使用 Github Actions 自动化部署前端页面

lemon精
1,029 阅读5分钟

git action.jpeg

最近这段时间想要搞个自己的网站，然后再不懈的折腾下完成了初始化项目的部署，然后每次更新代码都要去服务器上拉代码、再打包感觉太麻烦了，有没有简单的自动化部署🤔🤔🤔 没错就是我们的主角 github action

它是什么

在 GitHub Actions 的仓库中自动化、自定义和执行软件开发工作流程。 您可以发现、创建和共享操作以执行您喜欢的任何作业（包括 CI/CD），并将操作合并到完全自定义的工作流程中。
几个关键词：自动化、自定义
我们完全可以用这个去部署前端的页面简直是意大利炮去打蚊子，但是无所谓主不在乎，能简单快捷的帮助我部署就行，搞起！！！

起步

我这边的大概诉求是：代码 push 到 master 分支，触发构建流程，将构建产物部署到我的服务器上
大致流程如下：
image.png

  1. 开发人员把代码push 到 github
  2. 触发 github 钩子（push）执行 github action预定好的工作流
    1. 安装依赖，打包构建
  3. 通过ssh 上传静态资源到服务器
  4. 可选性通知开发者

新建项目

我这里是创建了一个新的工程用作演示
image.png
这里以 vue 项目为例，创建一个新的项目

npm create vue@latest
cd <your-project-name>
npm install
npm run dev

随后把代码推送到 github 上

服务器设置

前置条件：

  1. 安装 git
  2. 安装 node
  3. 安装 nginx
  4. 检查服务器防火墙设置以及安全组网络设置的端口打开
  5. 注意：ESC 服务器需要安装 rsync 我的是 linux 直接 yum install rsync即可，后续 ssh 上传代码会用到

我们现在服务器上把静态资源的位置以及基本的nginx 代理给设置好，我这里通过 ssh 登录到服务器的
image.png
随便创建一个文件夹把项目 clone 到本地

mkdir /var/www && cd /var/www && git clone <your github address>
cd <your github address>
npm install
npm run build
# 把构建产物 copy 到该目录下，或者你随便创建目录
cp -r dist/ /var/www/html

注：如果依赖安装缓慢，请设置 npm 镜像

# 设置
npm config set registry https://registry.npmmirror.com
# 检查
npm config get registry

设置 nginx 代理,简单配置下能访问静态页面即可，这里是监听服务器的9876的端口，访问到我们的前端构建产物，注意修改完之后执行 nginx -s reload
image.png

server {
  listen 9876;
  server_name localhost;

  location / {
    root /var/www/html/vue3-static;
    index index.html;
  }
}

这样就可以直接通过ip:port访问，我这里是：39.106.130.29:9876

创建 github action

在 github 点击 actions 创建该项目的 workflow，如下
image.pngimage.png

name: 自动化部署
on:
  # 哪些钩子触发，这里是 push
  push:
    branches:
      # 具体的分支
      - master
    # 因为我这里是一个git 项目下有多个子项目，所以指定了对应的路径
    paths:
      - "vue3-static/**"
jobs:
  build:
    # 运行环境，这里是 ubuntu，参考 https://docs.github.com/zh/actions/using-workflows/workflow-syntax-for-github-actions#%E7%94%A8%E4%BA%8E%E5%85%AC%E5%85%B1%E5%AD%98%E5%82%A8%E5%BA%93%E7%9A%84-github-%E6%89%98%E7%AE%A1%E7%9A%84%E6%A0%87%E5%87%86%E8%BF%90%E8%A1%8C%E5%99%A8
    runs-on: ubuntu-latest
    steps:
      - name: 变量和密钥配置的区别（secrets & vars）
        run: echo "var ${{vars.TEST}} secrets ${{secrets.DEPLOY}}}}"
      - name: Checkout
        # 检出对应代码
        uses: actions/checkout@v3
      - name: Install Node.js
        # 设置node环境
        uses: actions/setup-node@v4
        with:
          node-version: 20.x
      - name: 打包
        run: |
          npm install
          npm run build
      - name: 上传静态资源到服务器
        uses: easingthemes/ssh-deploy@main
        with:
          # ssh公钥
          SSH_PRIVATE_KEY: ${{ secrets.DEPLOY }}
          # 复制操作的参数。"-avzr --delete"意味部署时清空服务器目标目录下的文件
          ARGS: "-avz --delete"
          # 打包出来的静态代码
          SOURCE: "dist/"
          # 部署ESC目标主机 xx.xx.xx.xx
          REMOTE_HOST: ${{ secrets.HOST }}
          # 登录ESC用户 root 或其他的 user
          REMOTE_USER: ${{ secrets.USER }}
          # 部署目标目录
          TARGET: /var/www/html/dist
      - name: 通知
        run: | 
          curl --location 'https://sctapi.ftqq.com/${{secrets.FT_KEY}}.send' --header 'Content-Type: application/x-www-form-urlencoded' --data-urlencode 'text=部署成功了～～～'

这个工作流中的大致流程：

  1. 监听了工程 push 代码到 master (注意 我这里指定了vue3-static工程代码的上传才触发工作流，参考：paths)
  2. 检出对应的代码 uses: actions/checkout@v3
  3. 安装 node uses: actions/setup-node@v4
  4. 执行命令打包
  5. 使用 ssh 上传静态代码到服务器 uses: easingthemes/ssh-deploy@main

因为需要用到 ssh 上传代码，其中我们需要设置 ssh 密钥，当然我们直接写死也行，不过会不安全

# 执行这个一路回车
ssh-keygen -t rsa -b 4096
# 把公钥复制到ESC 服务器的 authorized_keys
cat ~/.ssh/id_rsa.pub
# 登录到服务器
ssh root@xx.xx.xx.xx

# 把公钥内容粘贴到authorized_keys
vi ~/.ssh/authorized_keys

上面的流程完成后我们可以重新 ssh root@xx.xx.xx.xx测试一下，如果不需要密码登录，说明 ssh 密钥配置成功。
随后我们去给我们的工程配置项目变量和密钥，如下：
image.png
image.png
注意⚠️：HOST和 USER的逻辑一样，当然也可以写死在 workflow 里，隐私的一些东西配置到secrets里，这样打印也打印不出来，如下：
image.png
最后我们可以对接【方糖】的push 功能来通知我们部署成功～
增加下面的流程即可，完整版参考上面的

- name: 通知
  run: | 
  curl --location 'https://sctapi.ftqq.com/${{secrets.FT_KEY}}.send' --header 'Content-Type: application/x-www-form-urlencoded' --data-urlencode 'text=部署成功了～～～'

这样在我们部署成功就会收到微信公众号的推送通知啦，当然你也可以选择性对接飞书、钉钉等通知平台

image.png

方糖对接文档

测试

我们随便改个工程的文案，然后把代码 push 到 github

image.png
我们进到工程的 github 的 action 里就可以看到对应的工作流执行了
image.png
再次访问我们的页面就可以看到对应的代码更新啦🎉🎉🎉🎉🎉🎉🎉🎉image.png

总结

  1. 这样通过 git actions可以非常简单的完成我们代码的部署
  2. 注意私密的东西配置到Secrets里面，避免信息泄露
  3. 初步了解认识到 githubactions 能做的事情不仅仅是这些，大胆发挥想象力和创造力

测试代码地址

套个盾：非专业人员，文中有错误的地方欢迎指出交流，谢谢～～
看到这里了如果觉得有帮助，麻烦点个赞～～

参考

github actions官方文档有更加详细的描述

avatar
文章
阅读
粉丝