引き続き「東京都 新型コロナウイルス感染症対策サイト」（以下対策サイト）ネタです。（対策サイトでなくても有効です）
今回はNetlifyでデプロイプレビューという、お便利機能を設定する方法です。これを入れるとPullRequestが超捗ります。
北海道版でも実際に使っています。北海道を支える技術。
前回と前々回の。
私がメインで協力している北海道版はこちらです。
前提
- 北海道まとめサイト -> 北海道新型コロナウイルスまとめサイトの事
- 東京都対策サイト -> 東京都 新型コロナウイルス感染症対策サイトの事
- 東京都新型コロナウイルス感染症対策サイトをforkしてnetlifyでdev環境を立ち上げる手順」 の続きから説明します
- PR -> GitHubのPullRequestの事
- 説明では北海道版のリポジトリを使っていますが、東京都版でもいけるはずです
説明すること
- デプロイプレビューって？？
- 設定の仕方
- 注意点
デプロイプレビューって？？
GitHubでPullRequestを出すと、マージしなくてもPR適用後の内容が反映された専用のURLが発行される機能です。
PRの内容をローカルに取り込んだりしなくても変更内容を実際に動かす事が出来ます！超便利！
↓が実際に使った見た説明です。
設定の仕方
東京都新型コロナウイルス感染症対策サイトをforkしてnetlifyでdev環境を立ち上げる手順」 で、リポジトリをfork済のところから始めます。（以降の手順はやっていてもやっていなくても大丈夫です）
前回と同じく、NetlifyとGitHubを連携していくのですが、別の設定として新規追加します。
ログインしたら、「New site from Git」を選択
GitHubを選択
forkしたリポジトリを選択
ここまでは前回と一緒ですが、次の設定が違うので注意してください。
| 項目 | 設定する値 | 備考 |
| Branch to deploy | development | PRの対象ブランチ |
| Build Command | yarn install; yarn run generate;echo -e “User-agent: *\nDisallow: /” > ./dist/robots.txt | .github/workflows/develop.yml を参考に |
| Publish directory | dist | .github/workflows/develop.yml を参考に |
を設定して、「Deploy site」ボタンをポチッとな
これでOKです。
実際にPRを出してみる
こんな感じのPRを出してみます。
そうすると、Netlifyの何かが走り始めて、、、
ちょっと待つと全部終わります。一番下の「Detail」をクリックすると、、
PullRequestの内容が反映されたページが表示されます。
これでレビューが捗りますね！
おまけのお便利設定（通知設定）
ヘッダーの「Deploys」->「DeploySetting」-> 一番下までスクロールすると、「Deploy notifications」という項目があります。
右上の「Add notification」-> 「GitHub pull request comment」-> 「Save」と進みます。
この状態で、さきほどと同じくPullRequestを出すと、こんな感じでbotさんがPRにコメントしてくれます。
リンク先は、最初の説明のと同じなのですが、
- 単純にわかりやすい
- GitHubとSlackを連携しておくと、このリンクもSlackに飛んでくる
ので、積極的にGitHubを見ない方でも、確認する手間が一手間減りますので、やはりレビューが捗ります。素晴らしい。
注意点
こんなに素晴らしい機能なのですが、やはり無料だと制限があります。
300 build minutes/month
というのがポイントで、デプロイプレビュー + developmentブランチのビルド時間が、一月あたり300分という事です。
ビルド時間というのは、リポジトリからデータを取ってきてyarn generateしたりしてる時間です。
ざっくり1回あたり2、3分です。
つまり、一月あたり300分 / 2,3分 = 100回 程度が限界です。
また、本番環境もNetlifyで設定していると、そちらのビルドも適用されるはずなので、さらに厳しくなります、、、
100回なら大丈夫じゃね？と思うかもしれませんが、北海道は既に170個のPRがありました、、、
また、PRを出した後にmergeされるまでに何回か修正コミットを追加した場合も、pushする度にビルドが走ります。
というわけで、超便利なのですが、無料枠だと結構厳し目なので注意が必要です。
（別のアカウントで設定しなおせばOKという裏技がありますが、、、）
まとめ
Netlifyのお便利機能の紹介でした。
動作確認ができる、というのはチーム開発をする上でめちゃめちゃ有効です。
ローカル開発環境を立てるのに敷居が高い非エンジニアの方だけでなく、例えば移動中にスマホでちょっと確認できたり、レビューが大変捗ります。
無料制限に気をつけつつ、是非使ってみてください。
コメント