One, foreword

This article will use Docker-compose to deploy the front-end Vue project to Nginx and run the back-end SpringBoot project

Basic server environment:
  1. CentOS7.3
  2. Dokcer
  3. MySQL

Docker-compose deployment Vue+SpringBoot front-end and back-end separation project

Docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose

1. Add back-end configuration filesapi-Dockerfile

#Specify base imageThe FROM maven: 3.5.4 - JDK - 8#Maintainer informationMAINTAINER zhengqing "960869719 @qq.com" RUN echo "-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the API environment configuration -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --"
#Port 9101 is exposed
EXPOSE 9101
#Set the environment encoding to UTF-8
ENV LANG C.UTF-8
#Run - Configure the container to make it executable
#ENTRYPOINT ["java"."-jar"."app.jar"."--spring.profiles.active=dev"]
Copy the code

2. Add configuration files required by front-end Vueweb-Dockerfile,nginx.conf,.dockerignore

web-Dockerfile: Installs dependencies, packages and generates resource files required for running access, and then stores them in an HTML directory under nginx to run
#The node mirror
FROM node:latest as build-stage
#Maintainer informationMAINTAINER zhengqing "960869719 @qq.com" RUN echo "-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the web environment configuration -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -"
#Specify the next working path as /app - similar tocdThe command
WORKDIR /app
#Copy the front-end project into the app directory
COPY ./code-web .

#Set up taobao NPM image
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
#Install dependencies
RUN cnpm install

#Pack - Purpose: Throw it under nginx run
RUN cnpm run build:prod

#Front-end project run command
#CMD ["npm"."run"."start"]


#= = = = = = = = = = = = = = = = = = = = = = = = : NPM packaging: run nginx = = = = = = = = = = = = = = = = = = = = = = = =
#Nginx mirrorThe FROM nginx: 1.15.3 - alpine as production - stage#Maintainer information
MAINTAINER zhengqing "[email protected]"

#Remove the default.conf file and nginx configuration file from the nginx container
RUN rm /etc/nginx/conf.d/default.conf
RUN rm /etc/nginx/nginx.conf
#Copy the host nginx.conf file to /etc/nginx in the nginx container
COPY ./docker/web/nginx.conf /etc/nginx/
#Copy the files generated after the front-end Vue project is packaged to run under nginx
COPY --from=build-stage /app/dist /usr/share/nginx/html

#Port 8101 is exposed
EXPOSE 8101

#Note: CMD is different from RUN in that CMD is used to specify the commands to be executed when the container is started, whereas RUN is used to specify the commands to be executed when the image is built.
#The intermediate image created by the RUN directive is cached and used in the next build. If you don't want to use these cache images, you can specify the --no-cache parameter at build time, such as docker build --no-cache

#Run nginx in the foreground using daemon off to ensure that the image does not exit
CMD ["nginx", "-g", "daemon off;"]
Copy the code
nginx.conf
user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
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;

    keepalive_timeout  65;

    # include /etc/nginx/conf.d/*.conf;

  	server {
        listen       8101;
        charset utf-8;
        server_name  www.zhengqing520.com;Server address or binding domain name

    	# start ---------------------------------------------------------------------------------------------

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

        # end ---------------------------------------------------------------------------------------------error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }}}Copy the code
.dockerignoreAction: Ignores unnecessary files or folders when passed to the Docker engine.
/code-web/node_modules
Copy the code

3,docker-compose.ymlWhat it does: Orchestrate container execution order, which is more convenient than running projects one by one

version: '3'
services:
  api:                                  # backend Springboot container
    container_name: xiao-xiao-su-api    # container named 'xiao-xiao-su-api'
    restart: always                     Always restart the container when the container exits
    build:
      context: . /                       Specify the context root directory, and then specify the Dockerfile based on that directory
      dockerfile: ./docker/api-Dockerfile
    working_dir: /app                   Set the working directory to the app folder inside the container
    environment:
      TZ: Asia/Shanghai
    volumes:                            # Mount file
      - ./code-api:/app                 # map the host code-API folder (Java code) to the app folder inside the container
      - ./logs/:/app/log                Map the logs generated by the container to the host's logs folder
    ports:                              # Mapping port
      - "9101:9101"
    command: mvn clean spring-boot:run -Dspring-boot.run.profiles=dev '-Dmaven.test.skip=true' After the container is created, run the springboot project

  web:                                  # Front-end Node container (running Vue projects in Nginx)
    container_name: xiao-xiao-su-web    # container named 'xiao-xiao-su-web'
    restart: always                     Always restart the container when the container exits
    build:
      context: . /                       Specify the context root directory, and then specify the Dockerfile based on that directory
      dockerfile: docker/web/web-Dockerfile
    environment:
      TZ: Asia/Shanghai
    ports:
      - "8101:8101"                      # Mapping port
    depends_on:                          The web container can be started only after being started by the API container
      - api
Copy the code

Three, server operation

Drop the project to the server, go to the root directory of the project, and run the following commands

#1. Build an image
docker-compose build
#2. Run the service
docker-compose up -d
Copy the code

Tip: The first build will be slow, so sit down and have a cup of herbal tea

4. Access testing

Front page:www.zhengqing520.com:8101/xiao-xiao-s…

Back-end interface:www.zhengqing520.com:9101/swagger-ui….

Five, the summary

  1. Deploy the VUE project:npmPull project required dependenciesnode_modules-> Package generationdistFolder -> Copy tonginxRunning in the
  2. Deployment of springboot project: xiaobian here is the use of maven command to run, followed by also through themvn install -Dmaven.test.skip=true -> cd target -> java -jar ***.jarrun
  3. throughdocker-composeArrange the execution order, ① back-end API container ② front-end Web container
  4. Put it under the server and passdocker-compose buildBuild image ->docker-compose up -dStarting the Application Service

Dockerfile command understanding, here posted a net to see more interesting picture

Example demo source

Github.com/zhengqingya…