【部署】Docker + Github Aciton 自动化部署 vue 项目

前言

在网上搜索了很多资料，都是不成功的，，或者说都是打包好再推送过去。
那么我的思路是代码直接推到Github，让它
1、自动帮我打包成镜像，推到我的远端仓库；
2、连接我的服务器，拉取镜像更新，生成容器；

一、安装 Docker

我使用的服务器是 CentOS 7
然后根据官网的教程安装。

二、创建配置文件

Docker 需要在项目根目录创建三个文件（Dockerfile、nginx.conf、.dockerignore、）
Github Aciton 也需要一个配置文件（.github\workflows\schedule.yml）

Dockerfile

FROM node:14
COPY ./ /app
WORKDIR /app
RUN npm install -g pnpm
RUN pnpm config set registry https://registry.npm.taobao.org
RUN pnpm install && pnpm run build

FROM nginx
RUN mkdir /app
COPY --from=0 /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf

​ --from=0​​ 参数，从前边的阶段中拷贝文件到当前阶段中，Dockerfile中包含多个FROM语句时，0代表第一个阶段。

.dockerignore

设置 .dockerignore 文件能防止 node_modules 和其他中间构建产物被复制到镜像中导致构建问题。

**/node_modules
**/dist

nginx.conf

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
 worker_connections  1024;
}
http {
 include       /etc/nginx/mime.types;
 default_type  application/octet-stream;
 log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                   '$status $body_bytes_sent "$http_referer" '
                   '"$http_user_agent" "$http_x_forwarded_for"';
 access_log  /var/log/nginx/access.log  main;
 sendfile        on;
 keepalive_timeout  65;
 server {
   listen       80;
   server_name  localhost;
   location / {
     root   /app;
     index  index.html;
     try_files $uri $uri/ /index.html;
   }
   error_page   500 502 503 504  /50x.html;
   location = /50x.html {
     root   /usr/share/nginx/html;
   }
 }
}

.github\workflows\schedule.yml

这里的配置文件是触发自动化的关键，通过检测 push 代码触发。

schedule.yml

name: CI/CD
# 触发条件为 push
on: [push] # 执行时机
# 任务
jobs:
  test:
    # 运行的环境
    runs-on: ubuntu-latest
    # 步骤
    steps:
      - uses: actions/checkout@v2 # git pull
      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 14
      - name: 打包镜像, 上传 Docker Hub
        run: |
          docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
          docker build -t bpmn-camunda-image  .
          docker tag bpmn-camunda-image ${{ secrets.DOCKER_REPOSITORY }}
          docker push ${{ secrets.DOCKER_REPOSITORY }}:latest

      - name: 登录服务器, 执行脚本
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USERNAME }}
          password: ${{ secrets.SSH_PASSWORD }}
          script: |
            docker stop bpmn-camunda
            docker rm bpmn-camunda
            docker rmi ${{ secrets.DOCKER_REPOSITORY }}:latest
            docker pull ${{ secrets.DOCKER_REPOSITORY }}:latest
            docker run -d -p 10001:80 --name bpmn-camunda ${{ secrets.DOCKER_REPOSITORY }}:latest

需要在 Github => Settings => Security => Actions secrets=>New repository secret配置一些变量。
DOCKER_PASSWORD、DOCKER_USERNAME、DOCKER_REPOSITORY需要在 Docker Hub 注册，创建自己的仓库，生成 token。

{
  "DOCKER_PASSWORD":"在 dockerhub 生成的 token",
  "DOCKER_USERNAME":"dockerhub 的用户名：penglianger",
  "DOCKER_REPOSITORY":"仓库：penglianger/main",
  "SSH_HOST":"服务器ip: xxx.xxx.xxx.xxx",
  "SSH_USERNAME":"服务器名称： root",
  "SSH_PASSWORD":"服务器密码： xxxx",
}

第一次执行不设置这三个，或者手动先执行一遍
docker stop bpmn-camunda
docker rm bpmn-camunda
docker rmi ${{ secrets.DOCKER_REPOSITORY }}:latest

三、访问

由于这句命令： docker run -d -p 10001:80 --name bpmn-camunda ${{ secrets.DOCKER_REPOSITORY }}:latest

所以我们可以通过访问服务器+端口号 10001就可以访问了。