~ Ricky Chan ~

# 微信云托管自动化部署

# 准备工作

  1. 去到 码云 (opens new window) 初始化 项目仓库

# Vue 项目部署

  1. 利用 Vue-cli 初始化项目

  2. 在项目根目录加入 container.config.json 和 Dockerfile 文件

    • container.config.json 内容如下

      {
  "containerPort": 80,
  "dockerfilePath": "Dockerfile",
  "buildDir": "",
  "minNum": 0,
  "maxNum": 50,
  "cpu": 0.25,
  "mem": 0.5,
  "policyType": "cpu",
  "policyThreshold": 80,
  "envParams": {},
  "customLogs": "stdout",
  "initialDelaySeconds": 2
}
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14

    • Dockerfile 内容如下

      FROM node:12-slim AS builder

WORKDIR /app

COPY package*.json ./

RUN npm install @vue/cli -D

RUN npm install --only=production

COPY . ./

RUN npm run build

FROM nginx:latest

COPY --from=builder app/dist /usr/share/nginx/html

EXPOSE 80
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19

  3. 代码构建流程

    • 正常走 MR 提交代码

    • 只有 master 、 dev 和 test 分支会触发钩子

    • 将代码移动到公共仓库 (opens new window)

    • 代码会以 项目名-分支名 的形式存在公共仓库的分支里

  4. 设置项目自动化部署

# Egg.js 项目部署

  1. 利用 Egg 初始化项目

  2. 打开 package.json 删除 --daemon

    - "start": "egg-scripts start --daemon --title=melon",
+ "start": "egg-scripts start --title=melon",
    1
    2

  3. 在项目根目录加入 container.config.json 和 Dockerfile 文件

    • container.config.json 内容如下

      {
  "containerPort": 80,
  "dockerfilePath": "Dockerfile",
  "buildDir": "",
  "minNum": 1,
  "maxNum": 50,
  "cpu": 1,
  "mem": 2,
  "policyType": "cpu",
  "policyThreshold": 80,
  "envParams": {},
  "customLogs": "stdout",
  "initialDelaySeconds": 2
}
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14

    • Dockerfile 内容如下

      FROM node:12-slim AS builder

WORKDIR /app

COPY package*.json ./

RUN npm install --only=production

COPY . ./

EXPOSE 7001

CMD ["npm","run","start"]
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13

  4. 代码构建流程

    • 正常走 MR 提交代码

    • 只有 master 、 dev 和 test 分支会触发钩子

    • 将代码移动到公共仓库 (opens new window)

    • 代码会以 项目名-分支名 的形式存在公共仓库的分支里

  5. 设置项目自动化部署

2

# 项目自动化部署

  1. 登录 微信云托管平台 (opens new window) 进行项目初始化

    服务列表

  2. 选择 布鲁吉吉 账号登录 选择 bluej 环境

  3. 进入 服务列表 选项 点击右上角 新建服务 按钮

    服务列表

  4. 进入 服务管理 ➡️ 流水线 新建流水线

    • 代码源选择 Gitee
    • 代码仓库选择 bluej-bridge
    • 分支选择 项目名-分支名

    流水线设置

  5. 第一次需要手动点击 开始按钮 构建 后续代码提交后会自动构建

  6. 构建完成后 需要到 部署发布 中选择刚刚构建的版本 全量发布

  7. 域名访问

    • 微信云托管本身提供公网域名访问 服务列表 ➡️ 服务详情 ➡️ 公网域名
    • 也可以在 自定义域名 绑定自己的域名访问