背景

工作后，经常听闻同行提到自动化部署、CICD等关键词。出于好奇也去网上看了一些相关资料得以了解。由于我还没接触到有相关配置的项目，但自己也一直想尝试体验一下这个东西。但奈何自己相关知识匮乏，水平有限，之前尝试过几次最终以失败告终。

再加上工作忙自己懒，慢慢的也就搁置了，但我一直没忘，哈哈哈

今天打算重新拾起来，虽然网上教程一大堆，但我还是想自己亲手记录一下这个过程，毕竟对我来说一路坎坷。也希望能帮助到初次探险的你。

学到什么？

阅读本文将学习到：

理解cicd
使用 github actions体验cicd
多项目部署github pages

CI/CD是什么？

CI - 持续集成（Continuous Integration）

CD - 持续交付 (Continuous Delivery)

CD - 持续部署 (Continuous Deployment)

这里先不具体纠结这些关键字的含义，往下看你就大致明白了

手动部署

没有配置CICD前，你可能需要这样部署前端项目：

打包代码 (如：npm run build)
打开 FTP 工具 (如：FileZilla),
登录到服务器
找到对应的服务器前端静态目录以及本地目录
上传文件

没有配置自动化部署的项目，部署流程往往复杂繁琐，成本较高。那你可能会想能不能实现类似一键部署，简化上述操作过程呢？

答案是：必须当然可以！

通过一个万能的shell 脚本自动执行以上所有操作，也就是你可能听过的自动化部署。有没有很兴奋？

自动化部署

提交代码
没错，自动化部署你只需要做一件事就是提交代码，过几分钟就可以刷新生产环境站点查看最新部署的内容了（前提是配置好CICD）

CICD工具

市面上有很多优秀的 CICD 工具，场景也会更复杂。

Jenkins：基于 Java、跨平台、开源、独立的 CI/CD 工具，有大量的插件帮助完成软件开发过程的自动化构建、测试和部署。
Travis CI：基于云平台的、开源的 CICD 工具，可用于构建托管在 Github、Bitbucket、GitLab上的项目。
Circle CI：与 Travis CI 同样是云平台构建，支持 Github、Bitbucket、GitLab。
Github Actions：使用云平台构建托管在 Github 之上的项目。

对于 Jenkins，需要先准备一台服务器安装好环境。而后三者全部是基于云平台的工具，我们只需要将代码托管到对应的平台，在让它们介入即可，使用起来会更加简单。

本文使用 Github Actions 进行演示，不需要跑ci的服务器。用最简单的配置实现github中提交代码，自动编译，自动部署到 github pages（或自己的服务器）

Github Actions 部署

什么是 Github Actions? 它是一个持续集成和持续交付（CI/CD）平台。

那么它是怎么实现自动化呢？

在 Github Actions 中会提供一些钩子，检测到仓库某个特定活动触发，就会执行这些脚本，GitHub 把这些触发钩子称为事件，这些脚本称为 actions。

同时，官方也提供了一个类似 npm.cn 这样的公共市场，在这里面你可以搜到别人写好提交的 actions，这样你就可以很方便复用别人造的脚本轮子了。

Github Actions CICD流程图（摘自网络）

多个项目部署github pages上

由于github的所有项目只能有一个 GitHub Pages 域名那就是：https://username.github.io 这里我就默认你已经完成这一步了。

比如我的域名地址： silin001.github.io

其他开启github pages 的项目都是这个域名的子目录

如果想将一个小demo（或者文档）也部署到GitHub Pages中供外界进行访问，那具体应该如何实现呢？

首先在需要部署的github项目中来到Settings中 GitHub Pages标签中，指定分支和目录，也就是开启该项目的 GitHub Pages功能。这样系统会自动按项目名称 分配域名子路径。

例如此时的域名访问路径变成了：https://username.github.io/xxxproject

接下来我们就在项目中开始实践吧。

package.json中添加homepage

"homepage": "https://username.github.io/project"

项目中添加github workflow

github workflow，可以实现自动化流水线。

拉取我们远程仓库项目到本地后，根目录下创建 .github/workflows目录，创建 cicd.yml（名字自定义）文件，添加如下内容：

yml 复制代码

name: todoList 自动部署
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
        with:
          version: 8.6.2
      - uses: actions/setup-node@v3
        with:
          node-version: 16.X
      - run: npm install
      - run: npm run build
      - name: action-Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.DEPLOY_SECRET }}
          BRANCH: gh-pages
          publish_dir: ./dist

使用社区的各种actions可以帮我们实现重复的自动化需求。

比如我们这里需要部署gh-pages，我们可以设置触发时机为push到主分支的时候触发，这样我们每次合并到主分支，就会自动触发部署了。

配置 secrets

因为yml文件中需要用到 github token，首先要生成一个 Github 密钥，完成之后记得复制一下（刷新页面后就不可查看了）然后去自己的项目仓库中操作：

点击 settings
点击左侧 Secrets
点击右侧按钮 new repository secret
创建的名字和 .yml 中的 secret.xxx 要对应，值就写刚刚生成的 Github 密钥。

CICD部署到服务器

如果自己有服务器的话，可以尝试部署到服务器，这一步我未验证。

yml 复制代码

name: 自动部署到服务器测试
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16.X
      - run: npm install
      - run: npm run build
      # 部署到服务器（此步骤待测试）
      - name: 部署到服务器
        uses: easingthemes/[email protected]
        # 注入环境变量供ssh-deploy使用
        env:
          # secrets中配置的私钥，用于免密连接服务器
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          # 服务器地址
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          # 用户名
          REMOTE_USER: ${{ secrets.REMOTE_USER }}
          # 部署路径
          TARGET: ${{ secrets.TARGET }}
          # 打包文件来源
          SOURCE: "dist/"
          # 删除服务器上TARGET目录里所有文件
          ARGS: "-avz --delete"