（東京都 新型コロナウイルス感染症対策サイトで）Netlifyでデプロイプレビューを設定するとレビューが捗るよ

引き続き「東京都 新型コロナウイルス感染症対策サイト」（以下対策サイト）ネタです。（対策サイトでなくても有効です）

今回はNetlifyでデプロイプレビューという、お便利機能を設定する方法です。これを入れるとPullRequestが超捗ります。

北海道版でも実際に使っています。北海道を支える技術。

前回と前々回の。

• 東京都新型コロナウイルス感染症対策サイトをforkしてnetlifyでdev環境を立ち上げる手順」
• 北海道新型コロナウイルスまとめサイトのインフラ構成（リリース時）

私がメインで協力している北海道版はこちらです。

北海道 新型コロナウイルスまとめサイト

当サイトは、道内の新型コロナウイルス感染症（COVID-19）に関する最新情報を提供するために作成されました。開発は、ICTエンジニアやデザイナーなどによって結成された「JUST道IT」が行っています。複製・改変が許されたオープンソースライセンスで公開されている、東京都公式新型コロナウイルス対策サイト（）の仕組みを利用

stopcovid19.hokkaido.dev

前提

• 北海道まとめサイト -> 北海道新型コロナウイルスまとめサイトの事
• 東京都対策サイト -> 東京都 新型コロナウイルス感染症対策サイトの事
• 東京都新型コロナウイルス感染症対策サイトをforkしてnetlifyでdev環境を立ち上げる手順」 の続きから説明します
• PR -> GitHubのPullRequestの事
• 説明では北海道版のリポジトリを使っていますが、東京都版でもいけるはずです

説明すること

• デプロイプレビューって？？
• 設定の仕方
• 注意点

デプロイプレビューって？？

GitHubでPullRequestを出すと、マージしなくてもPR適用後の内容が反映された専用のURLが発行される機能です。

PRの内容をローカルに取り込んだりしなくても変更内容を実際に動かす事が出来ます！超便利！

↓が実際に使った見た説明です。

（東京都 新型コロナウイルス感染症対策サイトで）Netlifyでデプロイプレビューを設定するとレビューが捗るよ

tech.moyashidaisuke.com

2020.03.20

設定の仕方

東京都新型コロナウイルス感染症対策サイトをforkしてnetlifyでdev環境を立ち上げる手順」 で、リポジトリをfork済のところから始めます。（以降の手順はやっていてもやっていなくても大丈夫です）

前回と同じく、NetlifyとGitHubを連携していくのですが、別の設定として新規追加します。

Netlify: All-in-one platform for automating modern web projects

Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. Get started for free.

www.netlify.com

ログインしたら、「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を見ない方でも、確認する手間が一手間減りますので、やはりレビューが捗ります。素晴らしい。

注意点

こんなに素晴らしい機能なのですが、やはり無料だと制限があります。

Plans and Pricing | Netlify

Simple pricing for the modern and automated web platform. Monthly plans to suit your project size. All plans start with a free trial.

www.netlify.com

300 build minutes/month

というのがポイントで、デプロイプレビュー + developmentブランチのビルド時間が、一月あたり300分という事です。

ビルド時間というのは、リポジトリからデータを取ってきてyarn generateしたりしてる時間です。

ざっくり1回あたり2、3分です。

つまり、一月あたり300分 / 2,3分 = 100回 程度が限界です。

また、本番環境もNetlifyで設定していると、そちらのビルドも適用されるはずなので、さらに厳しくなります、、、

100回なら大丈夫じゃね？と思うかもしれませんが、北海道は既に170個のPRがありました、、、

codeforsapporo/covid19

北海道 新型コロナウイルス対策サイト. Contribute to codeforsapporo/covid19 development by creating an account on GitHub.

github.com

また、PRを出した後にmergeされるまでに何回か修正コミットを追加した場合も、pushする度にビルドが走ります。

というわけで、超便利なのですが、無料枠だと結構厳し目なので注意が必要です。

（別のアカウントで設定しなおせばOKという裏技がありますが、、、）

まとめ

Netlifyのお便利機能の紹介でした。

動作確認ができる、というのはチーム開発をする上でめちゃめちゃ有効です。

ローカル開発環境を立てるのに敷居が高い非エンジニアの方だけでなく、例えば移動中にスマホでちょっと確認できたり、レビューが大変捗ります。

無料制限に気をつけつつ、是非使ってみてください。