Docker for web developers (VI): deploying static websites using nginx

Last issue , Introduced the use of  docker Deployment development wordpress, In this issue, we'll introduce the software that is closer to the front-end development Docker Use . Many front-end projects now use vue, When publishing, the file is generated to the default dist Folder , This article will show vue The project is published and deployed to Docker Containers , The commands involved in this article are based on the configuration docker Environmental Science , If the deployment is not installed Docker, You can refer to 《  oriented WEB Developed Docker（ 3、 ... and ）： install Docker》.

Order form

vue The files generated by the project are static files , We will choose nginx As WEB The server , The bound port is 80 . This paper is based on the project 《 Vue3+Ant Design2+NodeJs Full stack management system development 》 Build and deploy based on .

Go to project directory , Pull first nginx Latest image ：

docker pull nginx:latest

After installation , Began to run docker Containers , Because it is vue project , The generated file is in dist In the folder , Here we use dist As nginx The directory of the mirror site . You need to run the image normally and bind the port , Here are two parameters ：

-d ： Background running container , And return to the container ID
-p ： Specify port mapping , The format is ： host （ host ） port : Container port
-v ： Bind a volume , I.e. path
--name="vue-crayon"： Specify a name for the container , Example use name vue-crayon;

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

A long string that will be returned after execution , It's a container ID, Here for ：cd7b5d5bb5e833cb9d112f0c3fb43c54e4ae652c16ce52309eb7599cf2d32e7e

You can check whether the container is started successfully through the following command ：

docker ps

Open the browser , Input http://localhost You can see the following effect ：

If this machine 80 Port occupied , You can use other ports ; If you don't want to use it http://localhost Address access , You can modify hosts file

Here is the use of non 80 Port execution command , Use 8001：

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

Because the code shown is vue project , After the refresh, the 404, You need to change nginx To configure , There are two ways ：

1. Enter container modification nginx To configure , If you need to go into the container to modify , Can execute orders docker exec -it cd7b5d5bb5e8 bash, among -it The following long string is the container id, Not here .
2. take nginx Configuration according to dist The folder is mounted in the way of mounting

The following changes nginx To configure , Use the mount method , In the project nginx The configuration path is configs/conf.d, stay nginx Add the following configuration items to the configuration item ：

location / {
    try_files $uri $uri/ /index.html;
}

Slightly modify the above execution command , 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 

After execution , You can visit vue project , The path is also normal .

If not, you need to delete , You can execute the following commands in order ：

Show information about all running containers , Mainly containers ID

docker ps

Next, stop the container （ The long string is a container ID）：

docker stop 3fd6959eaa90

After stopping, remove , Following commands （ The long string is a container ID）：

docker rm 3fd6959eaa90

The actual operation of each test project is in the form of command line , Not very convenient in operability , Here's how to use it Docker Compose .

Docker Compose

Create a file in the project directory docker-compose.yml file , The code is as follows ：

version: "3" #  It means that we should  Docker-Compose  The version of the file used is 3
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:

such , Need to run , Just execute the following command to start :

docker-compose up

Also open the browser , Input http://localhost , You can see the effect .

End