vue3笔记（39-2）docker-compose部署

近期需要实现项目的 docker 部署，调研 docker-compose 对 vue3 项目的部署如何使用。

基础知识

Docker

一个开放源代码的容器化平台，允许开发者将应用及其依赖打包进轻量级、可移植的容器中。提供一个标准化的方式打包和运行应用，确保应用在不同环境中的一致性和可移植性。
功能：

  1. 容器化：将应用和其运行环境封装在一个容器中
  2. 镜像管理：创建、存储和分发容器镜像
  3. 容器运行：可以运行在任何支持Docker的环境中

docker-compose

Compose 是一个用于定义和运行多容器 Docker 应用程序的工具。可简化多容器应用的配置和管理，适用于开发、测试和生产环境中的复杂应用。
功能：

  1. 多容器管理：允许用户在一个YAML文件中定义和管理多个容器
  2. 服务编排：配置容器间的网络和依赖关系
  3. 一键部署：使用docker-compose up命令启动、停止和重建服务
    Compose的使用三步：
  4. 使用 Dockerfile 自定义应用程序的环境，便于在任何地方复制它；
  5. 使用 docker-compose.yml 定义构成的应用程序的服务，便于隔离环境中一起运行；
  6. 运行 docker-compose up 命令启动并运行整个应用程序。

两者关系

Docker 是 Docker Compose 的前提，Docker Compose 是为了简化使用 Docker 时多容器应用的管理和部署而设计的。
两者之间相辅相成，Docker 提供容器化的核心功能，Docker Compose 则管理这些容器的组合和交互。
两者面向不同用户，Docker 面向任何需要容器化应用的用户，Docker Compose 则面向需要同时管理多个容器的开发者和运维团队。

安装步骤

  1. 查看服务器中 docker 版本

    1
    docker --version

    Docker version 24.0.7, build afdd53b

  2. 在服务器中安装 docker-compose

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    wget https://github.com/docker/compose/releases/download/v2.16.0/docker-compose-linux-x86_64

    # 或将本地下载好的 docker-compose 放入服务器
    scp docker-compose-linux-x86_64 root@***:/root
    mv docker-compose-linux-x86_64 /usr/local/bin/docker-compose

    # 赋予执行权限
    chmod +x /usr/local/bin/docker-compose

    # 测试安装是否成功
    docker-compose --version

部署步骤

  1. 将项目进行打包，生成 dist 文件夹。

    1
    npm run build

  2. nginx 配置文件
    查看 nginx 配置文件路径

    1
    nginx -t

    nginx: the configuration file /usr/local/etc/nginx/nginx.conf syntax is ok

其中default.conf用于 nginx 的配置，默认配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
server {
    listen       80;
    server_name  localhost;
    #charset koi8-r;
    #access_log  logs/host.access.log  main;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    location /pdbApi {
        proxy_pass http://****/:8989;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods *;
     }
     location /bioApi {
        proxy_pass http://****:8999;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods *;
     }
     location /loginApi {
        proxy_pass http://****:8009;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods *;
     }
    #error_page  404              /404.html;
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

本机已安装过，可以直接使用；后测试发现若没有安装，可以直接手写一个配置文件default.conf，只用于映射到 docker 容器中。

  1. 新建 docker-compose.yaml 文件，将 dist 文件夹和default.conf 进行文件映射。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    version: "3.4"
    services:
      vue_test: # serviceName
        container_name: vue_test # 唯一标识
        image: nginx:1.9.0
        ports:
          - "8066:80"
        volumes: 
          - /data/user01/feenv/dist/:/usr/share/nginx/html/
          - /data/user01/feenv/default.conf:/etc/nginx/conf.d/default.conf

    报错(root) Additional property     restart is not allowed可能是格式不对

  2. 执行 docker-compose

    1
    docker-compose up -d

  3. 访问 IP:port 即可访问部署好的项目。

其他指令

1
2
3
4
5
6
7
8
9
10
11
12
# 启动
docker-compose up -d
# 停止  
docker-compose stop
# 重启
docker-compose restart
# 查看运行的服务
docker-compose config --services
# 查看日志
docker-compose logs serviceName
# 进入容器
docker-compose exec serviceName bash

问题记录

docker 拉取镜像报错：
报错
解决方式一：修改 docker 镜像源【暂时验证不成功】

1
vi /etc/docker/daemon.json
1
2
3
4
5
6
7
 {
  "registry-mirrors": [
    "https://docker.mirrors.ustc.edu.cn",
    "https://6kx4zyno.mirror.aliyuncs.com",
    "https://registry.docker-cn.com"
  ]
}

修改完毕后，重启 docker 服务：

1
2
systemctl daemon-reload
systemctl restart docker

问题出现了，这个修改没有起作用，依旧是原来的报错。。。有待keep looking。。。

附录
Docker Compose - 安装和基本使用
docker-compose部署Vue项目
YAML、YML在线编辑(校验)器

记录AF3部署

|– nginx.conf
|– docker-compose.yml
|– default-shenwei.conf
|– default-metastone.conf
|– dist-dev
| |– index.html
|– dist-metastone
| |– index.html
docker-compose.yml中添加两个服务：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
version: "3.8"
services:
  bio_dev:
    container_name: bio_v1
    image: nginx:1.9.0
    environment:
      - TZ=Asia/Shanghai
    ports:
      - "8067:80"
    volumes: 
      - /data/user01/BioEnv/dist-dev:/usr/share/nginx/html/dist-dev
      - /data/user01/BioEnv/default-shenwei.conf:/etc/nginx/conf.d/default.conf
      - /data/user01/BioEnv/nginx.conf:/etc/nginx/nginx.conf
    restart: always
  bio_metastone:
    container_name: bio_stone_v1
    image: nginx:1.9.0
    environment:
      - TZ=Asia/Shanghai
    ports:
      - "8077:80"
    volumes:
      - /data/user01/BioEnv/dist-metastone:/usr/share/nginx/html/dist-metastone
      - /data/user01/BioEnv/default-metastone.conf:/etc/nginx/conf.d/default.conf
      - /data/user01/BioEnv/nginx.conf:/etc/nginx/nginx.conf
    restart: always