实现前后端全自动化部署，解放你的双手。——从零开始搭建一个高颜值后台管理系统全栈框架(五)-灵析社区

背景

上一期我整了个服务器和域名，然后请教了我们公司的运维大佬，简单的实现了前后端自动化部署，只需要把代码push上去，然后就能自动编译和部署。这里没有用到k8s或Jenkins这种重量级的CI/CD工具，只使用了github actions和docker-compose，适合个人小项目使用。

使用github actions自动编译

介绍

GitHub Actions是GitHub提供的一种自动化工作流程（workflow）管理工具。它可以根据特定的事件触发，执行各种操作和任务，例如编译代码、运行测试、部署应用等。

使用GitHub Actions，开发者可以定义一个或多个工作流程，每个工作流程由一系列步骤（steps）组成。每个步骤可以包含命令行脚本、调用API、运行测试等任务。这些步骤可以在不同的操作系统环境下执行，如Linux、macOS和Windows。

GitHub Actions提供了一系列预定义的事件（events），如提交代码、创建分支、打标签等，当这些事件发生时，可以触发相应的工作流程执行。同时，开发者也可以通过手动方式触发工作流程的执行。

GitHub Actions还与其他工具和服务集成，例如Docker、AWS、Azure等，可以通过这些集成实现更复杂的自动化流程。

总之，GitHub Actions是一种灵活强大的自动化工作流程工具，使开发者能够轻松地设置和管理与代码相关的自动化任务，并提高开发效率和质量。

总结：我们使用github actions就不用自己手动在本地build代码和build镜像了，只需要往main分支推送代码就行了。

自动部署前端服务

介绍

如果想把前端打成Docker镜像，需要写在项目里编写Dockerfile。这里我就不介绍什么是docker了，如果对docker不了解的，可以从网上找相关资料学习了解一下docker，现在大部分公司都会选择把前后端部署到镜像里，方便维护和迁移。

在项目根目录下创建Dockerfile文件

这里就不多做解释了，大家看代码中的注视吧，很简单的。

# Dockerfile
# 因为我们项目使用的是pnpm安装依赖，所以找了个支持pnpm的基础镜像，如果你们使用npm，这里可以替换成node镜像
# FROM nginx:alpine
FROM gplane/pnpm:8.4.0 as builder

# 设置工作目录
WORKDIR /data/web

# 这里有个细节，为了更好的使用node_modules缓存，我们先把这两个文件拷贝到镜像中，镜像会检测发现这两个文件没有变化，就不会去重新安装依赖了。
COPY pnpm-lock.yaml .
COPY package.json .

# 安装依赖，如果上面两个文件没有改动，就不会重现安装依赖。
RUN pnpm install

# 把当前仓库代码拷贝到镜像中
COPY . .
# 运行build命令，可以替换成 npm run build
RUN pnpm run build
# 上面我们把代码编译完成后，会在镜像里生成dist文件夹。

# 下面我们把打包出来的静态资源放到nginx中部署
# 使用nginx做基础镜像
FROM nginx:alpine as nginx
# 设置时区
RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
    && echo "Asia/Shanghai" > /etc/timezone 
# 设置工作目录
WORKDIR /data/web
# 在nginx镜像中创建 /app/www文件夹
RUN mkdir -p /app/www
# 把上一步编译出来dist文件夹拷贝到刚才新建的/app/www文件夹中
COPY --from=builder /data/web/dist /app/www

# 暴露 80端口和443端口，因为我们服务监听的端口就是80，443端口是为了支持https。
EXPOSE 80 
EXPOSE 443

# 如果镜像中有nginx配置，先给删了
RUN rm -rf /etc/nginx/conf.d/default.conf
# 把项目里的./nginx/config.sh shell脚本复制到ngxin镜像/root文件夹下
COPY ./nginx/config.sh /root
# 给刚复制进去的shell脚本设置权限，让镜像启动的时候可以正常运行这个shell脚本。
RUN chmod +x /root/config.sh
# 镜像启动的时候运行config.sh脚本
CMD ["/root/config.sh"]

在项目中创建/nginx/config.sh文件

上一步我们说了，把项目里的/nginx/config.sh复制到nginx中，所以我们需要在项目里创建这个文件，这个文件其实就是nginx配置。

#! /bin/sh -e

cat >> /etc/nginx/conf.d/default.conf <<EOF
 
  server {
    listen      80;
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    #gzip_http_version 1.0;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary off;
    gzip_disable "MSIE [1-6].";

    proxy_read_timeout 600;

    location / {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        if (\$request_filename ~* .*\.(?:htm|html)$) 
		    {
			    add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
		    }

        root /app/www/;
        index index.html;
        client_max_body_size  500m;
    }

    location /api {
        proxy_pass  $SERVER_URL;
        proxy_set_header Host \$host;
        proxy_set_header X-Real-IP \$remote_addr;
        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
    }

    location /file/ {
        proxy_pass $FILE_URL;
        proxy_set_header Host \$host;
        proxy_set_header X-Real-IP \$remote_addr;
        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
    }
 }

EOF

echo "starting web server"

nginx -g 'daemon off;'

很基本的nginx配置，这里有两个地方需要说一下。

1. 为啥这里要写一个shell脚本而不是直接把配置复制到nginx中呢，是因为加了后端服务和文件服务的反向代理，为了不把反向代理的地址写死，（就是上面的$SERVER_URL和 $FILE_URL）我们需要使用环境变量，然后只能在shell脚本中才能使用环境变量，这两个环境变量在后面docker-compose里面去配置。
2. if (\$request_filename ~* .*\.(?:htm|html)$)这一段配置是设置html文件不缓存，这样我们每次发布后，别人就不用清缓存后才能访问新的内容。html文件很小，所以只把html设置不缓存完全没问题，至于其他js，每次打包过后如果js文件有变化，他对应的hash也会变，如果文件内容不变，使用老的缓存也没问题。

编译镜像

上面两步做完，如果本地装了docker，已经可以在本地编译镜像了，在项目根目录下执行下面命令。

docker build -t test:v1.0.0 . 

test是镜像名，v1.0.0是版本号，后面那个点别忘记了。build成功后，我们可以使用docker desktop运行镜像也可以使用docker run -p 8000:80 test:v1.0.0命令去执行，现在执行肯定会报错的，因为有两个环境变量还没配呢。

编写github actions yml文件

基于上面我们可以本地编译镜像，然后把镜像推到镜像仓库，然后在服务器上拉镜像，最后运行镜像。这样虽然可以实现，但是每一步都是手动的，太不优雅了。这时候github actions登场了，用了它我们就可以解放自己的双手了，写完一个功能，代码一推，就可以去干别的事了。

在项目根目录下，创建.github/workflows/docker-publish.yml文件，文件名可以随便起。

name: Docker

on:
  push:
    branches: ['main']

env:
  REGISTRY: ghcr.io
  IMAGE_NAME: ${{ github.repository }}

jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
      id-token: write

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Docker buildx
        uses: docker/setup-buildx-action@79abd3f86f79a9d68a23c75a09a9a85889262adf

      - name: Cache Docker layers
        uses: actions/cache@v2
        with:
          path: /tmp/.buildx-cache
          key: ${{ runner.os }}-buildx-${{ github.sha }}
          restore-keys: |
            ${{ runner.os }}-buildx-

      - name: Log into registry ${{ env.REGISTRY }}
        if: github.event_name != 'pull_request'
        uses: docker/login-action@28218f9b04b4f3f62068d7b6ce6ca5b26e35336c
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Extract Docker metadata
        id: meta
        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}

      - name: Build and push Docker image
        id: build-and-push
        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
        with:
          context: .
          push: ${{ github.event_name != 'pull_request' }}
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
          cache-from: type=local,src=/tmp/.buildx-cache
          cache-to: type=local,dest=/tmp/.buildx-cache-new

      - name: Move cache
        run: |
          rm -rf /tmp/.buildx-cache
          mv /tmp/.buildx-cache-new /tmp/.buildx-cache

      - name: SSH Command
        uses: D3rHase/ssh-command-action@v0.2.1
        with:
          HOST: ${{ secrets.SERVER_IP }}
          PORT: 22 
          USER: root
          PRIVATE_SSH_KEY: ${{ secrets.SERVER_KEY }}
          COMMAND: cd /root && ./run.sh

这些都是固定写法，兄弟们可以拿去直接用，有两个地方需要注意一下。

1. branches: ['main']这个表示代码往main分支push后触发自动编译，可以改成别的，比如打版本，merge代码等。
2. 最后后面SSH Command是用来执行服务器上/root/run.sh脚本的，因为目前我们使用github actions只做了编译代码和编译镜像以及上传镜像，还差一步自动部署镜像，这个脚本就是干这个的，我们后面再说。

我们可以再github这个标签里面看到执行进度，点进去可以看到日志。

编译完镜像后，github这里会显示你的镜像。

点进去可以看到完整的镜像名称，你可以去拉这个镜像在本地或服务器上部署，后面我们在部署的时候会用到这个镜像名称。

自动部署后端服务

编写后端Dockerfile文件

FROM gplane/pnpm:8.4.0 as builder

WORKDIR /app

# 先复制pnpm-lock.yaml和package.json文件，上文说过为了实现缓存
COPY pnpm-lock.yaml .
COPY package.json .

# 使用pnpm安装依赖
RUN pnpm install

COPY . .
# 编译代码
RUN pnpm run build

# 我们使用pm2启动后端服务，至于为什么，可以看下神光大佬的这篇文章。https://juejin.cn/post/7229595897813712957
FROM keymetrics/pm2:16-jessie

WORKDIR /app

COPY --from=builder /app/package.json ./
COPY --from=builder /app/pnpm-lock.yaml ./
COPY --from=builder /app/node_modules ./node_modules
ENV TZ="Asia/Shanghai"

RUN npm install pnpm -g
# node项目不像前端项目，编译代码的时候，会把node_modules里的文件也编译到dist中，后端还需要保留node_modules，不过我们可以把开发环境用到的包给移除掉，减少包的体积，pnpm install加--prod可以把开发环境中用到的包给移除掉，也就是安装在devDependencies中的依赖。
RUN pnpm install --prod

# 把需要的代码复制到镜像中
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/bootstrap.js ./
COPY --from=builder /app/script ./script
COPY --from=builder /app/src/config ./src/config
COPY --from=builder /app/tsconfig.json ./
COPY --from=builder /app/src/migration ./src/migration

EXPOSE 7001

# 启动项目
CMD ["npm", "run", "start"]

编写后端github actions文件

在项目根目录下，创建.github/workflows/docker-publish.yml文件，文件名可以随便起。文件内容和前端一模一样，直接把前端的拿过来就行了。

name: Docker

on:
  push:
    branches: ['main']
    tags: ['v*.*.*']

env:
  REGISTRY: ghcr.io
  IMAGE_NAME: ${{ github.repository }}

jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
      id-token: write

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Docker buildx
        uses: docker/setup-buildx-action@79abd3f86f79a9d68a23c75a09a9a85889262adf

      - name: Cache Docker layers
        uses: actions/cache@v2
        with:
          path: /tmp/.buildx-cache
          key: ${{ runner.os }}-buildx-${{ github.sha }}
          restore-keys: |
            ${{ runner.os }}-buildx-

      - name: Log into registry ${{ env.REGISTRY }}
        if: github.event_name != 'pull_request'
        uses: docker/login-action@28218f9b04b4f3f62068d7b6ce6ca5b26e35336c
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Extract Docker metadata
        id: meta
        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}

      - name: Build and push Docker image
        id: build-and-push
        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
        with:
          context: .
          push: ${{ github.event_name != 'pull_request' }}
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
          cache-from: type=local,src=/tmp/.buildx-cache
          cache-to: type=local,dest=/tmp/.buildx-cache-new

      - name: Move cache
        run: |
          rm -rf /tmp/.buildx-cache
          mv /tmp/.buildx-cache-new /tmp/.buildx-cache

      - name: SSH Command
        uses: D3rHase/ssh-command-action@v0.2.1
        with:
          HOST: ${{ secrets.SERVER_IP }}
          PORT: 22 # optional, default is 22
          # user of the server
          USER: root
          # private ssh key registered on the server
          PRIVATE_SSH_KEY: ${{ secrets.SERVER_KEY }}
          # command to be executed
          COMMAND: cd /root && ./run.sh

数据库迁移

我们在本地开发的时候，一般都是开启表结构自动同步，改了实体会自动把改的地方同步到数据库。但是线上环境最好不要开这玩意，很有可能会把线上的数据搞没，因为有时候你改字段名称，他自动同步的时候，会把原来的字段删掉，然后新建一个字段，这样那一列的数据就没了，线上开自动同步风险很大，建议不要开。