current position:Home>Docker for web developers (VI): deploying static websites using nginx

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

2022-01-27 00:18:02 Tianxing Wuji


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
        image: nginx:latest
        container_name: vue-crayon
            - ./dist:/usr/share/nginx/html
            - ./configs/conf.d:/etc/nginx/conf.d
            - "80:80"
            - crayonnet
        restart: on-failure

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 .


copyright notice
author[Tianxing Wuji],Please bring the original link to reprint, thank you.

Random recommended