Netlifyへのデプロイをビルド時間0で行うためのGitHub Actions

やりたいこと

Netlifyにデプロイをしたいです。
なおかつビルド時間0でデプロイしたいです。そのためにGitHub Actionsを使ってNetlifyにビルド結果をそのままデプロイします。
Netlifyなら300ビルド分が無償なところが、GitHub Actionsなら公開リポジトリは無償でビルド時間無制限なはずです！

Netlifyの魅了は「https://5e393ed8065133a87c00914c--piping-ui.netlify.com」のようにデプロイ毎に贅沢にサブドメインのサイトを作ってくれるところです。そのため両者を組み合わせるとビルド時間を気にせず公開リポジトリのgit pushごとに静的サイトのホスティングが無償でデプロイできてしまうはずです。
(Netlify FunctionsもあるのでFaaSも無償でいけそうです。)

やりかた

以下のような.github/workflows/netlify.ymlを作るだけです。

github/workflows/netlify.yml

name: Netlify

on:
  push:
  pull_request:
    types: [opened, synchronize]

jobs:
  build:
    runs-on: ubuntu-18.04

    steps:
      - uses: actions/checkout@v2

      # 「./dist」にビルド結果が生成する。好きなビルドに変えましょう。
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - run: npm ci
      - run: npm run build

      # Netlifyにデプロイする。「--dir=./dist」の部分はビルド結果ができあがるディレクトリ名に変えましょう。
      - run: npx netlify-cli deploy --dir=./dist
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

追記: コメント欄にて@peaceiris氏にnpmなども使えるとの情報を得てnpxを使った方法書き換えました。

コメントでも書いているように、npm run buildなどはお好きにビルドしたい方法に変えましょう。--dir=./distも必要があればビルド結果のディレクトリ名に変えましょう。

次は、secrets.NETLIFY_AUTH_TOKENやsecrets.NETLIFY_SITE_IDの取得方法についてです。

NETLIFY_AUTH_TOKENの取得方法

以下のページに飛ぶと、
https://app.netlify.com/user/applications#personal-access-tokens

以下のようにNew access tokenボタンがあるのでこれを押して取得できます。

NETLIFY_SITE_IDの調べ方

以下の手順でたどると、
「チームのページ > 自分のサイト > Settings > Site details > Site information」

以下の画面の「API ID」が「NETLIFY_SITE_ID」になります。

NETLIFY_AUTH_TOKENとNETLIFY_SITE_IDが手に入ったら、以下のようにGitHubリポジトリのSettings > Secretsで追加します。

これで終わりです。
参考のために、Netlifyへのデプロイ完了したGitHub Actionsはこんな感じになります:
- Actions: https://github.com/nwtgck/piping-ui-web/runs/425020398?check_suite_focus=true

参考

• Get started with Netlify CLI | Netlify Docs

おまけ

Netlifyデプロイ用のGitHub Actionsを作成しました。@peaceiris氏のコメントにあるようにDockerを使わないため高速です。
以下のようにプルリクエストにデプロイされたURLをコメントとして送ってくれてレビューがしやすくなります。

設定は以下のようなYAMLで書けます。
オプションでproduction-branchを指定すればそのブランチの時はproductionとしてデプロイされ5e393ed8065133a87c00914c--などがつかない状態でデプロイされます。

- name: Deploy to Netlify
  uses: nwtgck/actions-netlify@v1.0
  with:
    publish-dir: './dist'
    production-branch: master
    github-token: ${{ secrets.GITHUB_TOKEN }}
  env:
    NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
    NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

GitHubリポジトリ: https://github.com/nwtgck/actions-netlify