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

## やりたいこと

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

<img height="400" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84451/72990414-db43-a795-a2f0-934774318dc4.png">


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>

以下のように<kbd>New access token</kbd>ボタンがあるのでこれを押して取得できます。
<img width="476" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84451/b3aef69a-d2a2-5961-e000-12da5d208591.png">



## `NETLIFY_SITE_ID`の調べ方

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

以下の画面の「API ID」が「`NETLIFY_SITE_ID`」になります。
<img width="775" alt="Screen Shot 2020-02-04 at 19.13.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84451/cc7415d8-9ee8-3464-229b-e105c5e245a0.png">


`NETLIFY_AUTH_TOKEN`と`NETLIFY_SITE_ID`が手に入ったら、以下のようにGitHubリポジトリのSettings > Secretsで追加します。
<img width="1003" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84451/a7bfb807-a53f-03d4-c9b1-776a5be98038.png">

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

## 参考
- [Get started with Netlify CLI | Netlify Docs](https://docs.netlify.com/cli/get-started/#obtain-a-token-via-the-command-line)


## おまけ

Netlifyデプロイ用のGitHub Actionsを作成しました。@peaceiris氏の[コメント](https://qiita.com/nwtgck/items/e9a355c2ccb03d8e8eb0#comment-630dc1dff7f70b284b83)にあるようにDockerを使わないため高速です。
以下のようにプルリクエストにデプロイされたURLをコメントとして送ってくれてレビューがしやすくなります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84451/cb933fe1-4eea-575f-8435-d17789a40163.png" width="650">


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

```yaml
- 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>