Last issue, introduced the use of Docker deployment and development of wordpress, this issue to introduce the use of docker more close to the front-end development. At present, many front-end projects use VUE, and files are generated to the default dist folder during release. This article will show that Vue projects are released and deployed to Docker container. The commands involved in this article are based on the Docker environment configuration. See Docker for WEB Development (III) : Installing Docker.

Order form

The files generated after the Vue project are static files. We will choose Nginx as the WEB server, and the bound port is 80. This paper is built and deployed based on the project Vue3+Ant Design2+NodeJs Full Stack Management System Development.

Enter the project directory and first pull nginx’s latest image:

docker pull nginx:latest
Copy the code

After the installation, start to run the Docker container. Since it is a Vue project, the generated files are in the dist folder. Here we use dist as the directory of the Nginx mirror site. The following two parameters are required to properly run the mirror and bind ports:

-p: Specifies a port mapping in the following format: Host (host) port: Container port -v: binds a volume, that is, a path. –name=”vue-crayon” : specifies a name for the container. For example, the name vue-crayon is used.

docker run -d -p 80:80 -v $PWD/dist:/usr/share/nginx/html  --name="vue-crayon"  nginx 
Copy the code

Execution will return after the completion of a series of long string, is the container ID, here is: cd7b5d5bb5e833cb9d112f0c3fb43c54e4ae652c16ce52309eb7599cf2d32e7e

You can run the following command to check whether the container is started successfully:

docker ps
Copy the code

Open your browser and type http://localhost to see the following effect:

If port 80 is occupied, use another port. If you do not want to use the http://localhost address, modify the hosts file

Here are the execution commands for non-80 ports, using 8001:

docker run -d -p 8001:80 -v $PWD/dist:/usr/share/nginx/html  --name="vue-crayon"  nginx 
Copy the code

Since the code shown is a VUE project, 404 will appear after refreshing and you need to change the nginx configuration in two ways:

  1. Enter the container to modify the nginx configuration. If you need to enter the container to modify the nginx configuration, run the following commanddocker exec -it cd7b5d5bb5e8 bash, including-itThe container ID is followed by a long string that is not expanded here.
  2. willnginxConfiguration in accordance with thedistFolder mounting mode For mounting

The nginx configuration path is configs/conf.d. Add the following configuration items to the nginx configuration item:

location / {
    try_files $uri $uri/ /index.html;
}
Copy the code

Modify the above command slightly, complete as follows:

docker run -d -p 80:80 -v $PWD/dist:/usr/share/nginx/html -v $PWD/configs/conf.d:/etc/nginx/conf.d  --name="vue-crayon"  nginx 
Copy the code

After executing, you can access the VUE project as normal and the path is normal.

If you do not need to delete it, run the following commands in sequence:

Displays information about all running containers, mainly container ids

docker ps
Copy the code

Next, stop the container (long string is the container ID) :

docker stop 3fd6959eaa90
Copy the code

Stop and remove with the following command (long string container ID) :

docker rm 3fd6959eaa90
Copy the code

The actual operation of each test project is in the form of command line, which is not very convenient for operation. The following will introduce Docker Compose.

Docker Compose

Create docker-comemess. yml in your project directory as follows:

Services: nginx: image: nginx:latest container_name: Vue-crayon volumes: - ./dist:/usr/share/nginx/html - ./configs/conf.d:/etc/nginx/conf.d ports: - "80:80" networks: - crayonnet restart: on-failure networks: crayonnet:Copy the code

To do this, run the following command:

docker-compose up
Copy the code

Also open a browser and type http://localhost to see the effect.

After the