前言：

从开始研究本站博客自动部署方案开始到现在已经有三周左右了，准备在这篇文章里做一个方案盘点。

在自动部署过程中，核心是需要代码仓库有一个执行bash脚本的环境，这需要仓库服务提供商提供云计算资源，于是就产生了费用。在这其中，较大的商家因为有雄厚的经济实力，就可以提供一些免费的CI执行分钟数。

这其中广为流传的就是GithubAction,每个月有2000分钟数可以白嫖，此外netlify每月有300分钟，其他的我就不太了解了。如有了解的小伙伴可以再评论区补充一下。

本文所探讨的自动部署方案全都基于GithubAction实现，按部署的目的地，分第三方服务器和私有服务器两个部分介绍。

一、部署到第三方服务器

这部分介绍三个方案，分别是部署到GithubPage，腾讯云存储桶，netlify，他们都有静态网站托管的服务，可以直接把打包好的文件传上去部署网站，部署以后会生成一个子域名以供访问，自己有域名也可以绑定自定义的域名。

此外还有vercel，giteePage等方式，我暂时还没使用过，有用过的朋友也可以评论区补充一下。

方案1——部署到GithubPage

优点：部署最简单，网上攻略最全

缺点：国内访问速度最慢，一张图片加载一两分钟

overflow文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
name: 部署到Github Pages

on:
  push:
    branches:
      - main # default branch

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # If your repository depends on submodule, please see: https://github.com/actions/checkout
          submodules: recursive
      - name: 安装Node环境
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./public
      - name: Create artifact
        uses: actions/upload-artifact@v3
        with:
          name: buildPakage
          path: ./public

  deploy: #部署到github Pages
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: 部署到GitHubPages
        id: deployment
        uses: actions/deploy-pages@v2

方案2——部署到腾讯云存储桶

优点：国内可以访问，速度还可以

缺点：绑定域名需要备案，备案需要买服务器，买了服务器谁还用存储桶；公读不太安全容易被刷爆流量

overflow文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
name: 部署到Github Pages和腾讯对象存储

on:
  push:
    branches:
      - main # default branch

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # If your repository depends on submodule, please see: https://github.com/actions/checkout
          submodules: recursive
      - name: 安装Node环境
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./public
      - name: Create artifact
        uses: actions/upload-artifact@v3
        with:
          name: buildPakage
          path: ./public

  uploadToCOS: #上传build后的文件到对象存储
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Download artifact
        uses: actions/download-artifact@v3
        with:
          name: buildPakage
          path: ./dist #将构件下载到当前工作目录
      - name: Install coscmd
        run: sudo pip install coscmd
      - name: Configure coscmd
        env:
          SECRET_ID: ${{ secrets.TENCENT_CLOUD_SECRET_ID }}
          SECRET_KEY: ${{ secrets.TENCENT_CLOUD_SECRET_KEY }}
          BUCKET: myblog-1314096013
          REGION: ap-chengdu
        run: coscmd config -a $SECRET_ID -s $SECRET_KEY -b $BUCKET -r $REGION
      - name: Upload
        run: coscmd upload -rfs --delete ./dist/ /

方案3——部署到netlify👍

优点：

  1. 官方自带全球免费cdn加速，国内访问速度不错；

  2. 部署非常简单，只需要按提示一路点到底就行，对不会代码的外行很友好

  3. 每个月300分钟CI时长基本够用，不够了还可以用github的CI构建好以后直接发到netlify

  4. 可以绑定自定义域名，国内买的域名也可以用

缺点：几乎没有

netlify有两种部署方式：

  1. 直接frok远程仓库，然后触发netlify的CI构建流程；

  2. 使用githubAction构建，打包好文件直接发到netlify；

💡这两种方式可以根据两家剩余CI分钟数灵活转换，如果githubAction还有其他任务，本来就要打包，就可以使用第二种方式节约netlify构建时长。

overflow文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
name: 部署到netlify

on:
  push:
    branches: 
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
        
    steps:
      - name: 通用的代码拉取
        uses: actions/checkout@v3
    
      - name: 安装nodejs 18.x版本
        uses: actions/setup-node@v3
        with:
          node-version: 18.x
      
      - name: 安装依赖
        run: npm install
      
      - name: 安装netlify-cli官方脚手架
        run: npm i netlify-cli -g
      
      - name: 部署到netlify
        env:
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
        run:
          netlify build --context production && netlify deploy --prod --dir=public

二、部署到自己的服务器

方案4——使用GithubAction打包，然后传文件到服务器上

优点：

  1. 在github打包，如果服务器压力比较大可以减轻服务器压力
  2. 不需要在服务搭建构建环境，方便后期服务器的迁移

缺点：

  1. 配置较为复杂，需要的前置知识较多，需要对linux系统较为了解
  2. 私钥文件放在github上，相对来说不太安全
  3. 查到很多教程都是密码登录服务器，更加不安全
  4. 传文件较为花时间，我测试了两次，一次总时长1分40秒，一次两分10秒，有点浪费GithubAction免费时长

overflow文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
name: note build
# 触发workflow的条件
on:
    push:
        # 只有master分支发生push事件时，才会触发workflow
        branches: [main]
    pull_request:
        branches: [main]

jobs:
  deploy_job:
    runs-on: ubuntu-latest  #运行环境
    name: build
    steps:
      - uses: actions/checkout@v3
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # If your repository depends on submodule, please see: https://github.com/actions/checkout
          submodules: recursive
      - name: 安装Node环境
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build

      # 利用action把build好的文件上传到服务器/var/www/react-app路径下,需要确认此目录已在服务端创建
      - name: deploy file to server
        uses: wlixcc/SFTP-Deploy-Action@v1.0 
        with:  
          username: '${{ secrets.SERVER_UERNAME }}'   #ssh user name
          server: '${{ secrets.SERVER_HOST }}' #引用之前创建好的secret
          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }} #引用之前创建好的secret
          local_path: './public'  # 对应我们项目build的文件夹路径
          remote_path: '${{ secrets.SERVER_DEPLOY_DIR }}'

方案5——提交触发Webhook通知服务器拉取最新代码，在服务器上完成自动构建部署

优点：

  1. CI流程在服务器上执行，不需要githubAction的免费CI分钟数
  2. CI脚本自己编写，定制化程度高
  3. 使用webhook发送请求通知服务器拉代码，不需要登录服务器，相对更安全

缺点：

  1. 门槛较高，流程最复杂，需要写一个服务处理http请求，再写一个service守护进程
  2. 涉及前置知识点较多，需要学习systemd, node, git，bash脚本编写
  3. 搭建环境较繁琐，需要安装node环境，git环境
  4. 构建流程都在服务器上，相对来说更消耗服务器性能
  5. 链路太长，可靠性较低，国内服务器无法直连github拉取代码，需要同步代码到国内仓库(比如Gitee)，然后使用国内仓库的webhook通知服务器拉取代码，

具体操作可以看我之前发过的这两篇文章：

Overflow文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
name: 同步到Gitee仓库

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Github Sync to Gitee
        uses: wearerequired/git-mirror-action@master
        env:
          # 注意在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEY
          SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
        with:
          # 注意替换为你的 GitHub 源仓库地址
          source-repo: git@github.com:Bro-B/Bro-B.github.io.git
          # 注意替换为你的 Gitee 目标仓库地址
          destination-repo: git@gitee.com:spring-fisher/Bro-B.github.io.git