Docker deploys SpringBoot+Vue project

1. Project deployment planning

        1. Back-end multi-module project blog and each module running port:

Front-end service module sangeng-blog->7777, back-end service module sangeng-admin->8989, public module sangeng-framework

        2. Front-end Vue project: sg-blog-vue->80

        3. Front-end and back-end Vue project: sg-vue-admin->81

        4.Docker required image

                java:17（jdk17）

                mysql:8.0.19

                redis:6.0.8

                nginx:1.18.0

        5. Project deployment

                Install docker

                Pull the java:8 image, use maven to package the back-end project, upload the jar package to the specified directory /mydata on the server, write the Dockerfile file, and format the back-end project into an image file.

                Pull the mysql:8.0.19, redis:6.0.8, nginx:1.18.0 images.

                Write the docker-compose.yml file and use docker-compose container orchestration to manage container running.

                Configure mysql and import sql files

                Configure redis and modify the redis.conf file

                Configure nginx, place the packaged Vue project in the html directory, and configure the nginx.conf file

                test run

                Image upload to Alibaba Cloud Image Warehouse

        6. Use tools

                IDEA

                Navicat

                Mobaxterm

2. Preliminary work

        2.1 Back-end projects are packaged using maven

        2.2 Project packaging, running jar package test locally

Enter the target directory, enter cmd in the file search box to enter the Dos window, and use the command to run the jar package

java -jar jar包

If no error is reported, there is no problem with the jar package.

        2.3 Front-end project packaging

npm run build

        2.4 Test locally and put it in Nginx. If the test is normal, it can be used.

        2.6 Configure security group rules

Add rules to the security group of the cloud server

This is Alibaba Cloud ECS, and what I added is the inbound direction rule.

3.Docker installation

The Docker operating environment requires the system to be 64-bit and the Linux system kernel version to be 3.8 or above.

start installation:

1: Set up the gcc environment

yum -y install gcc
yum -y install gcc-c++

Two: Install the required software packages

yum install -y yum-utils

Three: Install the mirror warehouse

However, because the docker server is abroad, sometimes the connection is refused or the connection times out when downloading the image from the warehouse, so you can use the Alibaba Cloud Image Warehouse.

yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

Four: Update the yum package index

yum makecache fast

Five: Install docker engine

yum install docker-ce docker-ce-cli containerd.io docker-compose-plugin

Six: Start docker

systemctl start docker

View docker service

View docker version information

docker version

Seven: Alibaba Cloud Image Acceleration Configuration

To configure the Alibaba Cloud accelerator, you must first have an Alibaba Cloud account. After logging in to Alibaba Cloud, open Alibaba Cloud's container image service page https://cr.console.aliyun.com, then find the corresponding page, and then follow the steps given to complete the configuration.

 To configure NetEase Cloud Accelerator, just replace the registry-mirrors address in the Alibaba Cloud Accelerator configuration step with the following address: http://hub-mirror.c.163.co 

(Please note that you need to enter step by step, refer to what I entered) 

7. Test the HelloWorld image

See Hello from Docker! Field Description There is no problem with our installation steps and Docker has been successfully installed.

4. Pull the image

Pull the image java:17 (JDK17)

docker pull openjdk:17

Pull the image mysql:8.0.19

docker pull mysql:8.0.19

Pull the image redis:6.0.5

docker pull redis:6.0.5

Pull the image nginx:1.18.0

docker pull nginx:1.18.0

View all current images:

5. Write the Dockerfile and build the image 

1. First transfer the jar package to the specified directory of the server

I have created a mydata directory in the root directory.

2. Create a Dockerfile file in the mydata directory and write a Dockersfile file

Here we make two jar packages into two images respectively. Because there can only be one Dockerfile file in a directory, the corresponding Dockerfile file is modified after the first image is built.

:set pasteText data pasted in vim mode  will not be messy

The first Dockerfile

#基础镜像使用jdk17
FROM openjdk:17
#作者
MAINTAINER gj
# VOLUME 指定临时文件目录为/tmp，在主机/var/lib/docker目录下创建了一个临时文件并链接到容器的/tmp
VOLUME /tmp
# 将jar包添加到容器中并更名
ADD sangeng-blog.jar sangeng_blog.jar
# 运行jar包
RUN bash -c 'touch /sangeng_blog.jar'
ENTRYPOINT ["java","-jar","/sangeng_blog.jar"]
#暴露7777端口作为微服务
EXPOSE 7777

3. Build the image

docker build -t sangeng_blog:1.0 .

4. The second Dockerfile

#基础镜像使用jdk17
FROM openjdk:17
#作者
MAINTAINER gj
# VOLUME 指定临时文件目录为/tmp，在主机/var/lib/docker目录下创建了一个临时文件并链接到容器的/tmp
VOLUME /tmp
# 将jar包添加到容器中并更名
ADD sangeng-admin.jar sangeng_admin.jar
# 运行jar包
RUN bash -c 'touch /sangeng_admin.jar'
ENTRYPOINT ["java","-jar","/sangeng_admin.jar"]
#暴露8989端口作为微服务
EXPOSE 8989

5. Build the image

docker build -t sangeng_admin:1.0 .

6. View the built image

docker images

6. Use Docker-compose container orchestration

6.1 Install Docker-compose ( higher versions of Docker will be installed by default )

Note: If it is a lower version of compose, dockerthere composemust be between-

        1. First check whether the host has a docker-compose environment

docker compose version

If not, install it

        2. Installation command

DOCKER_CONFIG=${DOCKER_CONFIG:-$HOME/.docker} 

mkdir -p $DOCKER_CONFIG/cli-plugins 

curl -SL https://github.com/docker/compose/releases/download/v2.11.2/docker-compose-linux-x86_64 -o $DOCKER_CONFIG/cli-plugins/docker-compose

chmod +x $DOCKER_CONFIG/cli-plugins/docker-compose

6.2 Configure nginx files

1. Create an app directory under the / directory and enter the app directory

2. First create an nginx container, just to copy the configuration

# 1.运行容器
docker run -p 80:80 --name nginx -d nginx:1.18.0

# 2.将容器内的配置文件拷贝到当前目录/app中:
docker container cp nginx:/etc/nginx .
# 3.将文件nginx修改为conf
mv nginx conf
# 4.创建文件夹nginx
mkdir nginx
# 5.将conf目录拷贝到nginx目录
cp -r conf nginx/
# 6.删除conf目录
rm -rf conf
# 3.停止并删除容器
docker stop nginx && docker rm nginx 

6.4 Write the docker-compose.yml file

1. Create the docker-compose.yml file in the /mydata directory and write the docker-compose.yml file

:set paste​ The text data pasted in vim mode  will not be messy

#compose版本
version: "3"  
 

services:
  sangeng_blog:
#微服务镜像  
    image: sangeng_blog:1.0
    container_name: sangeng_blog
    ports:
      - "7777:7777"
#数据卷
    volumes:
      - /app/sangeng_blog:/data/sangeng_blog
    networks: 
      - blog_network
    depends_on: 
      - redis
      - mysql
      - nginx


  sangeng_admin:
#微服务镜像
    image: sangeng_admin:1.0
    container_name: sangeng_admin
    ports:
      - "8989:8989"
#数据卷
    volumes:
      - /app/sangeng_admin:/data/sangeng_admin
    networks:
      - blog_network
    depends_on:
      - redis
      - mysql
      - nginx
     
#redis服务
  redis:
    image: redis:6.0.8
    ports:
      - "6379:6379"
    volumes:
      - /app/redis/redis.conf:/etc/redis/redis.conf
      - /app/redis/data:/data
    networks: 
      - blog_network
    command: redis-server /etc/redis/redis.conf
 
 #mysql服务
  mysql:
    image: mysql:8.0.19
    environment:
      MYSQL_ROOT_PASSWORD: 'xu.123456'
      MYSQL_ALLOW_EMPTY_PASSWORD: 'no'
      MYSQL_DATABASE: 'sg_blog'
      MYSQL_USER: 'root'
      MYSQL_PASSWORD: 'xu.123456'
    ports:
       - "3306:3306"
    volumes:
       - /app/mysql/db:/var/lib/mysql
       - /app/mysql/conf/my.cnf:/etc/my.cnf
       - /app/mysql/init:/docker-entrypoint-initdb.d
    networks:
      - blog_network
    command: --default-authentication-plugin=mysql_native_password #解决外部无法访问

 #nginx服务
  nginx:
    image: nginx:1.18.0
    ports:
      - "80:80"
      - "8093:8093"
      - "8094:8094"
    volumes:
      - /app/nginx/html:/usr/share/nginx/html
      - /app/nginx/logs:/var/log/nginx
      - /app/nginx/conf:/etc/nginx
    networks:
      - blog_network
    

 
 #创建自定义网络
networks: 
   blog_network: 

2. Check whether there are syntax errors in compose.yml in the current directory

docker compose config -q

3. Start all docker-compose services and run them in the background

docker compose up -d

 View running container instances

Note: Because MySQL and Redis have not been configured yet, the container may hang. In this case, you can wait until MySQL and Redis are configured before restarting the container instance.

7. Configure MySQL

1. Transfer the sql file /app/mysql/dbto the directory (the same container data volume location as the MySQL container instance)

​ Native Navicat exports the sql file and transfers it to /app/mysql/dbthe directory

2. Enter the MySQL container instance

docker exec -it 容器ID bash

Check if there is a sql file in /var/lib/mysqlthe directory (there is in the example)

3. Log in to MySQL

The password is configured in the docker-compose.yml file

4. Use the corresponding database and import the sql file

use sg_blog;
source /var/lib/mysql/sg_blog.sql;

5.Import database successfully

 8. Configure Redis

1. Obtain the configuration file of the corresponding version of redis

Because the redis image pulled by docker does not have a redis.conf file. Therefore, we need to find a corresponding version of the redis.conf configuration file on our official website

redis configuration file official websiteRedis configuration | Redis

Because my redis version is 6.0.8, I choose the configuration file of 6.0.

2. Enter /app/redisthe directory

Use the vim command to enter the vim editor and paste the contents of the redis configuration file into it

:set pasteText data pasted in vim mode  will not be messy

3. Modify the configuration file content

• Add redis password (requirepass)

• Modify bind to 0.0.0.0 (any machine can access)

• In order to avoid conflict with the -d parameter in docker, set the background startup to no (daemonize no)

• Turn off protected mode (protected-mode no)

 

 9. Test the backend interface

 Test ok

10. Configure Nginx

10.1 Operating the dist folder

        1. Rename the two packaged dist folders and send them to /app/nginx/htmlthe directory

2. Modify the nginx.conf configuration file

Enter the conf folder and open the nginx.conf file

​ When http{.......}adding two server
, remember that the root path is the dist file path in the container.

   server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;
        #
        #       #access_log  logs/host.access.log  main;

              location / {
                     root   /usr/share/nginx/html/blog_dist;
                     index  index.html index.htm;
                     try_files $uri $uri/ /index.html;
                   }

        }

    server {
        listen       81;
        server_name  localhost;

        #charset koi8-r;
        #
        #       #access_log  logs/host.access.log  main;

              location / {
                     root   /usr/share/nginx/html/admin_dist;
                     index  index.html index.htm;
                     try_files $uri $uri/ /index.html;
                   }

        }

10. Project testing

It may be that the configured monitoring 80 did not take effect because I was monitoring 80. Finally, I put it directly under the html, and I will change it after I find the reason.

Access the corresponding IP and port to check if there are any problems with the project

front desk

 Backstage