やりたいこと
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
を作るだけです。
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はこんな感じになります:
参考
おまけ
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