使用 GitHub Actions 构建 Gatsby 并部署到 Netlify

Netlify 引入了构建分钟数（免费套餐 300 分钟，专业帐户 1000 分钟），这限制了其网站上的构建时间。

值得庆幸的是，Netlify 社区支持提供了指南“如何优化我的 Netlify 构建时间？”，其中包含许多提示。

您可以通过将构建时间委托给 GitHub Actions，直接构建并部署到 Netlify，从而缩短构建时间。

前言

我在学习 GitHub Actions 的同时写了这篇文章，所以如果你发现任何错误请告诉我。:)

如果你想了解有关 GitHub Actions 的更多信息，请查看官方GitHub Actions 文档。

创建工作流文件

请参阅配置工作流程。

工作流定义

以下是使用 YAML构建 Gatsby 站点并每 2 小时部署到 Netlify 的完整 GitHub 工作流程。

name: Build and Deploy to Gatsby every two hours

on:
  # 1. Trigger the workflow every 2 hours
  schedule:
    - cron: "0 */2 * * *"

jobs:
  build:
    # 2. Using the latest Ubuntu image
    runs-on: ubuntu-latest

    steps:
      # Check out the current repository code
      - uses: actions/checkout@v1
      # 3. https://github.com/actions/setup-node#usage
      - uses: actions/setup-node@v1
        with:
          node-version: "12.x"
      - run: npm install
      # This triggers `gatsby build` script in "package.json"
      - run: npm run build
      # 4. Deploy the gatsby build to Netlify
      - uses: netlify/actions/cli@master
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        with:
          # 5. "gatsby build" creates "public" folder, which is what we are deploying
          args: deploy --dir=public --prod
          secrets: '["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]'

cron计划每两小时触发一次工作流
在最新版本的 Ubuntu 镜像中，
NPM 包是使用 Node 版本 12.x 安装和构建的。
然后使用Netlify 官方的 GitHub Actions Netlify-CLI部署站点。
部署public文件夹，由生成gatsby build。

秘密环境变量

使用 Netlify CLI 部署到 Netlify 需要个人访问令牌，NETLIFY_AUTH_TOKEN（以及可选的站点 ID，NETLIFY_SITE_ID）。

但是您永远都不应该暴露您的 API 密钥，永远都不应该。

值得庆幸的是，GitHub 提供了一种创建秘密环境变量的方法，您可以将其传递给工作流定义。

现在您需要声明环境变量，并将其传递给 CLI。

        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        with:
          # 5. "gatsby build" creates "public" folder, which is what we are deploying
          args: deploy --dir=public --prod
          secrets: '["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]'

args传递给 Netlify CLI 的内容，
secrets是 Netlify CLI 的环境变量。

请参阅Netlify CLI 文档deploy上的命令。

因此上述配置在命令行中看起来如下。

在 powershell 中，

$env:NETLIFY_AUTH_TOKEN='secret'; $env:NETLIFY_SITE_ID='site id'; netlify deploy --dir=public --prod

在 bash 中，

NETLIFY_AUTH_TOKEN='secret' NETLIFY_SITE_ID='site id' && netlify deploy --dir=public --prod

我不知道声明工作流的替代语法，并且很难传递秘密。

workflow "Publish on Netlify" {
  on = "push"
  resolves = ["Publish"]
}

action "Publish" {
  uses = "netlify/actions/cli@master"
  args = "deploy --dir=site --functions=functions"
  secrets = ["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]
}

GitHub Actions 的 YAML 编辑器抱怨你不能将数组传递给secret，所以你需要将其转换为字符串，

#       👇 secrets is a string                    👇
secrets: '["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]'
# not an array.
secrets: ["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]

工作流结果

提交工作流文件后，您可以在日志中看到 Gatsby 站点已成功构建并部署到 Netlify。

现在Netlify 日志显示部署仅需 1 秒。

防止 Netlify 自动构建

当您的 Netlify 站点链接到您的 GitHub 存储库时，任何源代码提交都会触发 Netlify 上的构建。

但是您不能取消 GitHub 存储库与 Netlify UI 的链接，以防止自动构建（除非您在没有先链接到存储库的情况下创建新站点）。

因此，您需要前往Netlify 社区支持并请求取消链接您的网站。

例如，这里是SHANc 的请求，该请求在圣诞节得到了快速处理！(🙂👍)

这是喜欢的网站和未链接的网站之间的比较。

手动工作流触发器

没有办法手动触发工作流程，因此我首先让工作流程在代码“推送”上运行，然后才按计划运行。

name: Build and Deploy to Gatsby every hour

# https://help.github.com/en/actions/automating-your-workflow-with-github-actions/configuring-a-workflow#triggering-a-workflow-with-events
on:
  schedule:
    - cron: '0 */2 * * *'
# https://help.github.com/en/actions/automating-your-workflow-with-github-actions/events-that-trigger-workflows#example-using-a-single-event
# 👇 To test, uncomment these and comment three lines above.
# on:
#   push:
#     branches:
#       - master

jobs:
  build:
    runs-on: ubuntu-latest
    ...

查看关于工作流事件以获取更多触发器。

该图片由Web Donut在Pixabay上发布

文章来源：https://dev.to/dance2die/building-gatsby-with-github-actions-and-deploying-to-netlify-33l2