Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Once the VUE project is complete, how do you deploy to a formal environment?

I. Demand analysis

The front-end project of our company was originally deployed by generating static files and transferring them to THE CDN through operation and maintenance. In order to improve efficiency and avoid compiling files into the code base, developers deployed them by themselves. Therefore, I analyzed the requirements and organized them as follows:

  1. Multiple VUE projects can be deployed.
  2. It does not depend on the machine having an environment for installing Node and NPM.
  3. When updating a project, the user is unaware.

Two, determine the plan

Decided to use docker deployment, independent of Node, NPM, etc.

Three, the use of steps

1. Create the deploy directory and pull the web_docker code

The vue project must be placed in the /deploy directory. If you want to place the vue project in another directory, modify the configuration file.

2. Run the sh init.sh command

The init.sh script does the following:

  1. Download all configured VUE projects
  2. Automatically installs dependencies and generates build files
  3. Start the nginx container according to docker-comemage.yml

Init. Sh file

#! /bin/bash # $1 :: project # $2 :: branch sh ./update.sh $1 $2 docker-compose -f docker-compose.yml up -dCopy the code

You can pass in two parameters: project and branch. Branch is the master branch by default and is used to specify the installation of a project, such as sh init.sh vue-admin-template master. If no parameters are passed, all VUE projects are installed

Update. Sh file

#! /bin/bash project="all" branch="master" if [ "$1" != '' ]; then project=$1 fi if [ "$2" != '' ]; then branch=$2 fi if [ "$project" == 'vue-admin-template' ] || [ "$project" == 'all' ]; then echo '-------start update vue-admin-template-------' cd .. / if [ ! -d './vue-admin-template' ]; then git clone -b $branch https://github.com/PanJiaChen/vue-admin-template.git fi cp web_docker/build/docker-build.sh vue-admin-template/docker-build.sh cp web_docker/build/build.sh vue-admin-template/build.sh cd vue-admin-template sh ./docker-build.sh echo '-------end update vue-admin-template-------' fiCopy the code

Download the vue-admin-template project. If you want to deploy multiple projects, add the configuration to update.sh.

What are the docker-build.sh and build.sh scripts used for?

Docker – build. Sh file

#!/bin/bash
echo '---start build---'
docker run --rm -v $(pwd):/work node:14.2.0-slim bash -c "cd /work && sh build.sh"
echo '---end build---'
Copy the code

The script uses the docker run command to start a temporary container. Using the Node: 14.2.0-Slim image, the project files are mapped to the container’s /work directory and sh build.sh is executed inside the container

This is also the strength of Docker. The container already has node environment and NPM environment. The container can install project dependencies and generate compilation files, so it does not depend on the host to install node environment. So what does the build.sh script do?

Build. Sh file

#! /bin/bash npm install -P && npm run build:prod if [ -d './dist_docker' ]; then mv ./dist_docker ./dist_docker_copy fi mv ./dist ./dist_docker if [ -d './dist_docker_copy' ]; then rm -rf ./dist_docker_copy fiCopy the code

This script is used to install project dependencies and generate build files. The build files for vue projects are placed in the dist directory by default. In order not to interfere with the user’s use during the project build process, the dist_docker folder is used in addition. The page the user sees is a static file in dist_docker.

Compilation takes a long time, while changing folder names takes a very short time, and switching back and forth between dist and dist_docker folders ensures that the project is updated without user awareness.

Docker – compose. Yml file

version: "3"
services:
  nginx:
    image: nginx
    build: ./nginx
    container_name: nginx_docker
    volumes:
      - /deploy:/deploy
      - /deploy/web_docker/nginx/conf.d:/etc/nginx/conf.d
    restart: always
  #   ports:
  #     - "80:80"
  # web:
  #   image: web
  #   build: ./web
  #   container_name: web_server_docker
  #   restart: always
  #   volumes:
  #     - /deploy/web_docker/web/node_server:/node_server
  #   ports:
  #     - "20000:20000"
Copy the code

/deploy/web_docker/nginx/conf.d will map to /etc/nginx/conf.d of the container. The Nginx container acts as a Web server that listens on ports and deploys VUE projects.

As you can see, there is also a Web container that is commented out because it is not necessarily going to be used, so it is commented out to automatically update the project. If you want your project to automatically update the formal environment after you push code into the repository, you can start the container and configure web hooks in the repository. The implementation details can be seen in the configuration of the container, which is not described here.

What configuration is available in /deploy/web_docker/nginx/conf.d?

Vue – admin – the template. The conf file

server{ listen 20001; server_name vue-admin-template; root /deploy/vue-admin-template/dist_docker/; gzip on; gzip_static on; gzip_disable "msie6"; gzip_min_length 10240; gzip_buffers 4 16k; gzip_comp_level 3; gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/peg image/gif image/png; gzip_vary off; location ~ .*\.(gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|ttf|ttc|woff|woff2)(.*) { add_header Cache-Control "public,  max-age=2592000"; } location ~* .*\.(? ! gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|ttf|ttc|woff|woff2$){ add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0'; } location / { try_files $uri $uri/ /index.html; error_page 404 /index.html; }}Copy the code

This defines the vue-admin-template project in the nginx container on port 20001. Nginx is configured with gzip, cache and other contents.

Domain. The conf file

server { listen 80; server_name domain.com; access_log /var/log/nginx/domain.com.log; location / { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; Proxy_pass http://172.24.0.2:20001/; }}Copy the code

This is used to do nginx forwarding. If the host does not have nginx installed to listen for port 80, you can map port 80 in docker-comemage. yml file and do nginx forwarding in the container.

3. Query the startup status of the Docker container

As can be seen, the nginx_Docker container starts normally. The container ID is EB70FF5855E8. If the container fails to start, the STATUS column will continuously try to restart the container. In this case, we can check the container startup log by using docker logs eb70FF5855E8 to find the cause of the failure and solve the problem.

4. Query the IP address assigned to the Docker container

Because there is no port configured in docker-comemage. yml, there is no one-to-one mapping between the container port and the host port. As we know, vue-admin-template listens on port 20001 in the container. If the host IP is 192.168.x.x, we cannot access http://192.168.x.x:20001, and the browser will report that the website cannot be accessed. Docker inspect EB70FF5855E8 to check the IP assigned by the host to the container.

As you can see, the IP assigned to the container eb70FF5855E8 is 172.24.0.2, so we try to access http://172.24.0.2:20001 from within the host machine

The access succeeds. So how does the browser access the VUE project? Nginx is installed on the host by default, so you need to configure forwarding on the host’s Nginx. If the host does not have Nginx installed and does not listen on port 80, we can let go of port 80 mapping and configure forwarding within the container.

5. Configure forwarding on nginx of the host

Add the domain-conf file with the following contents:

server { listen 80; server_name domain.com; access_log /var/log/nginx/domain.com.log; location / { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; Proxy_pass http://172.24.0.2:20001/; }}Copy the code

The host then performs an nginx -s reload to reload the configuration.

6. Set host, domain.com to the IP address of the host, and use a browser to access the hostdomain.com

It works perfectly.

Fourth, the FAQ

Question: What if you want to add a new project?

  1. Add the new project to the update.sh script.
  2. Added configuration in nginx/conf.d to add configuration to this project.
  3. Host nginx adds configuration to handle forwarding.
  4. Run the sh init.sh new project.

Question: The project code has been updated. What should I do?

Go to the directory where the project resides and run git pull && sh docker-build.sh.

Question: What should I do if the project listening port has changed?

  1. Modify the configuration in the nginx/conf.d directory.
  2. Reload the nginx container, or restart the nginx container.

Five, the summary

This Docker deployment scheme has been applied to our company’s project and will be improved continuously in the future. Please check web_docker for more code details. Don’t be stingy with a “like” if you think it will help. If you have better optimization suggestions, feel free to discuss them in the comments section, as well as fork the project and submit the Pull Request.