1. Install Docker and some basic Docker commands

The installation is slightly, the basic instructions are as follows:

# 构建镜像，test为镜像名，v1为版本号，“.”不可省略，代表当前文件夹下
docker build -t test:v1 .

# 运行容器，-d 后台运行，-p 映射容器内端口到宿主机，--name 容器名字:版本号
docker run -d -p 8080:80 --name test-hello test:v1 

docker ps  # 查看当前运行中的容器

docker images  # 查看镜像列表

docker rm container-id  # 删除指定 id 的容器

docker stop/start container-id  # 停止/启动指定 id 的容器

docker rmi image-id  # 删除指定 id 的镜像

docker volume ls  # 查看 volume 列表

docker network ls  # 查看网络列表

2. Package the VUE project

The root directory of the vue project enters the terminal and enters npm run build to package the project. A dist folder will be generated in the root directory of the project, and the entire folder will be copied to a new working folder (I named it nginx, which can be named in other ways). Next, the directory structure is as follows:

└─nginx
├─conf.d
├─html
│ └─dist
└─logs

3. Write nginx configuration file

The configuration files of nginx include /etc/nginx/nginx.conf and /etc/nginx/conf.d/default.conf. You can modify default.conf here. The files are as follows:

server {
    listen       80;  #  nginx对外暴露的端口
    server_name  localhost;  # 此处为docker服务宿主机的ip
 
    location / {
        root   /home/nginx/vue;  # 选择nginx工作目录
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
 
    location /api/ {
        proxy_pass http://localhost:8080;  # nginx代理的端口
        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-Forwarded-Proto $scheme;
    }
}

This file is placed in conf.d in the nginx folder.

4. Write Dockerfile

The file is as follows:

# 基础镜像 不指定版本则默认最新
FROM nginx

# 创建目录
RUN mkdir -p /home/nginx/vue
# 指定工作路径
WORKDIR /home/nginx/vue

COPY ./conf.d/default.conf /etc/nginx/conf.d/
COPY ./html/dist /home/nginx/vue

The file is placed in the nginx folder directory.

5. Build a mirror image

The current file structure is as follows:

└─nginx
    ├─conf.d
    │ └─default.conf
    ├─html
    │ └─dist
    ├─logs
    └─Dockerfile

Open the terminal in the nginx directory and enter docker build -t test:v1 . Start building the image, and the build is completed as shown below:

You can view images with the docker images command.

6. Run the container

Continue to enter docker run -d -p 8080:80 --name vue_test my-vue:v1 in the terminal to run the container, as shown below:

At this time, enter http://localhost:8080 in the browser to enter the project, and the vue deployment is successful.

7. Mount directory

Continue to enter the following command in the terminal to run the container

docker run -d -v $PWD/html/dist:/home/nginx/vue -v $PWD/logs:/var/log/nginx -v $PWD/conf.d:/etc/nginx/conf.d -p 8080:80 --name vue_test my-vue:v1

The running process is the same as above, but at this time, the files in the project are mounted locally, and the modified files will take effect without repeated deployment.

8. Use docker-compose to deploy the project

Create a docker-compose.yml file in the same directory as nginx, as follows:

version : '3.3'
services:
  vue-nginx:
    container_name: vue_test
    image: my-vue:v1
    build:
      context: ./nginx
    ports:
      - "8080:80"
    volumes:
      - ./nginx/html/dist:/home/nginx/vue
      - ./nginx/logs:/var/log/nginx
      - ./nginx/conf.d:/etc/nginx/conf.d
    restart: always

Enter docker compose up -d in the terminal to run, as shown below:

You can use the docker compose ps command to view running containers.

Summarize

This article mainly records the process of deploying vue projects with docker, using docker and docker-compose two deployment methods, the difficulty of deployment mainly lies in understanding the configuration file of nginx and the writing of Dockerfile

Docker uses nginx to deploy VUE projects