LoginSignup
31

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-02-04

やりたいこと

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

image.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_TOKENsecrets.NETLIFY_SITE_IDの取得方法についてです。

NETLIFY_AUTH_TOKENの取得方法

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

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

NETLIFY_SITE_IDの調べ方

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

以下の画面の「API ID」が「NETLIFY_SITE_ID」になります。
Screen Shot 2020-02-04 at 19.13.24.png

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

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

参考

おまけ

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31