(Docker Nginx) Spring boot+Vue front and rear end separate deployment detailed full version

Posted by madavies on Tue, 15 Feb 2022 10:38:38 +0100

Brief description: Spring boot+Vue is deployed in the front and rear end of the project separately, mainly in the form of docker container deployment.

Spring boot project deployment: build mysql environment with docker + build project environment with docker.

Vue project: use docker to start nginx server proxy deployment.

1.SpringBoot project deployment

The project uses mysql8 0 is used as the data source, so docker needs to be used to build the MySQL environment and the project's own environment during deployment.

1.1.mysql container

1.1.1. Pull image

docker pull mysql:8.0.22 #After the pull is successful, view it through docker images

1.1.2. Run container

docker container run --name mysql8.0.22 -p 3306:3306 -v /$mysql8.0.22/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=123456 -d mysql:8.0.22

When 1251 error occurs in connection:

#1. Enter the container
docker exec -it mysql8.0.22 /bin/bash
#2. Connect to mysql server for configuration modification
use mysql;
alter user 'root'@'%' identified with mysql_native_password by '123456';
flush privileges;

1.2. Project container

First, package the project: mumu-0.0.1-snapshot jar

1.2.1.Dockerfile file

FROM openjdk:11.0-jre
VOLUME /tmp
COPY mumu-0.0.1-SNAPSHOT.jar mumu.jar
RUN bash -c "touch /mumu.jar"
EXPOSE 8081
ENTRYPOINT ["java","-jar","mumu.jar","--spring.datasource.url=jdbc:mysql://192.168.18.170:3308/nms8000?createDatabaseIfNotExist=true&autoReconnect=true&useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai"]

Explanation:
FROM openjdk:11.0-jre: project jdk Operating environment, Dockerfile Can pass FROM The instruction gets its state directly, that is, in the container java It is already installed. Next, run it through custom commands Spring Boot Application.
VOLUME: Points to a/tmp Because Spring Boot Use built-in Tomcat Container, Tomcat Default use/tmp As a working directory. The effect is on the host/var/lib/docker A temporary file is created under the directory and connected to the container/tmp. 
The of the project jar File as app.jar Add to container
RUN: Means to execute some commands in the newly created image, and then submit the execution results to the current image. Use here touch Command to change the modification time of the file, Docker The default state of all container files created is unmodified. This is not necessary for simple applications, but for some static content (such as: index.html)The file needs a "modification time".
EXPOSE: The port exposed to the outside of the container is used to map with a port of the host when the container is generated
ENTRYPOINT: Container application startup command parameter setting 
# Note: when configuring the relevant ip address in ENTRYPOINT, localhost or 127.0.0.1 will be pointed to the current container. For example, if you need to connect to the mysql server in this machine, you must change the ip to the machine ip instead of localhost

1.2.2. Generate image

$ docker image build -t mumu .
# perhaps
$ docker image build -t mumu:0.0.1 .
Explanation:
-t Parameters are used to specify image The name of the file, followed by a colon to specify the label. If not specified, the default label is latest. The last point indicates Dockerfile Path where the file is located
image Successfully created, you can docker image ls / docker images To view the newly generated docker image information

1.2.3. Run container

docker container  run --name mumu -p 8081:8081 \
-v /opt/jar/springBootDocker/logs:/home/nms/sunam/docker-volumes/mumu \
-it -d mumu:0.0.1 /bin/bash

explain
 run: Container start command
--name Custom container naming
-d Program background start
-v /opt/jar/boot-docker/logs:/log The application log data is stored as a volume, and the/log Folder mounted on this machine/opt/jar/boot-docker/logs
-p 8081:8081 Use host(front)Port mapping container(behind)Port of
-it Parameters: container Shell Map to current Shell，Then the command you enter in the local window will be passed into the container
mumu:0.0.1 image Name (if a label is provided, the default is latest (label)
/bin/bash  After the container is started, it is the first command to be executed internally. This is the start Bash，Users can guarantee to use Shell

At this point, the springboot project runs in docker mode and the deployment ends.

2.Vue project deployment

2.1. Pack Project

npm run build

DONE Build complete. The dist directory is ready to be deployed.
After execution, the folder dist will be generated in the project directory, and then we can deploy the folder as nginx agent

Commands used in other development(My back-end development, right vue I don't know how to use it very well. Take note of it): 
1.vue ui #Start online project visual management
2.npm run serve #Start vue project
3.vue add element #Add element plug-in dependency to the project
4.vue add axios #Add axios plug-in dependency to the project

2.2.nginx deployment

Run nginx server in docker container mode.

1.2.1. Agent concept

Forward proxy

The proxy client side hides the client for hiding: for some reasons, the client cannot directly access the target server, so the client sends the request to the intermediate proxy server, which initiates the request to the target server and returns the requested data to the client. In this process, the target server does not know the name of the client, because it only receives the request from the intermediate proxy server. At this time, the client and the intermediate proxy server are a whole, and the client is hidden from the target server.
Reverse proxy

Proxy the server side and hide the server side: for example, a basic micro service system will have a gateway forwarding module and a variety of business modules. We can access different business modules at the back end through routing configuration at the gateway layer with different routing prefixes, and only expose the gateway port to the client. For example, the client can access the user module information through ip:9999/user / * *, Access the order module information through ip:9999/order / * * for the client, it only accesses the gateway service 9999, which is unknown to the user module and the order module. At this time, the gateway layer acts as a service reverse proxy.

1.2.2. Pull image

The docker pull nginx # command defaults to latest, or you can specify the version yourself

1.2.3. Run container

For nginx server, two important operations are:

Configure page access resources, configuration path: / usr/share/nginx/html
Modify nginx Conf file to configure specific agent policies

Therefore, when configuring and starting the nginx container, we need to mount the corresponding directories and files on the host to facilitate the subsequent update of resources and operations

Start command:

$ docker run -d --name nginx -p 80:80 \
-v $NGINX/html:/usr/share/nginx/html \
-v $NGINX/log:/var/log/nginx \
-v $NGINX/nginx.conf:/etc/nginx/nginx.conf \
-d nginx
# Note: this method is to read the resources and configuration under the host machine for startup, so the "$NGINX/html" and "$NGINX/nginx.conf" files are required to be valid. Otherwise, the container will fail to start. You can run without directory and file mounting first, and copy the "/ etc/nginx/nginx.conf" configuration file in nginx.
# Copy command:
docker cp nginx:/etc/nginx/nginx.conf . 
docker cp nginx.conf nginx:/etc/nginx/nginx.conf #Set nginx Conf copy into container

1.2.4. Resource and agent configuration

Upload the dist file directory packaged by vue to the corresponding directory of the server "$NGINX/html"

nginx.conf file configuration

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;
    server {
        listen       80;#Listening port
        server_name  localhost;

        location / {
            root   /usr/share/nginx/html/dist;#The resource directory dist is the directory packaged and compiled by vue
            index  index.html index.htm;
        }
        location /mumu/ {
            proxy_pass http://localhost:8081/;#8081 port exposed for springboot project container
            proxy_read_timeout 6000s;
            proxy_set_header   Host    $host:$server_port;
            proxy_set_header   X-Real-IP   $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
            client_max_body_size 1024M;
        }
    }
    include /etc/nginx/conf.d/*.conf;
}

nginx container restart

docker restart nginx

2.3. Access test

Access "ip:8081/test" to access the springboot project test interface
Visit "ip:80" to directly access the default page of vue
Access "ip:80/mumu/test" to access the springboot project test interface

Topics: Docker Nginx Spring Boot Vue

Programmer Think

(Docker Nginx) Spring boot+Vue front and rear end separate deployment detailed full version

1.SpringBoot project deployment

1.1.mysql container

1.1.1. Pull image

1.1.2. Run container

1.2. Project container

1.2.1.Dockerfile file

1.2.2. Generate image

1.2.3. Run container

2.Vue project deployment

2.1. Pack Project

2.2.nginx deployment

1.2.1. Agent concept

1.2.2. Pull image

1.2.3. Run container

1.2.4. Resource and agent configuration

2.3. Access test

Hot Topics