Netlify の Deploy Previews 機能を使ってプレビュー環境を自動で生成して確認する
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。
今回は Netlify の Deploy Previews 機能についてまとめたいと思います。
Deploy Previewsとは
ホスティングサービスである Netlify には Deploy Previews という機能があります。
Netlify のプロダクトページにも挙げられている Netlify の売りの一つとも言うべき機能で、GitHubなどの連携したリポジトリに変更が push された際に、自動でプレビュー環境を作ってくれるというものです。
標準で有効となっており、Netlify とリポジトリを連携させればすぐに使えるようになっています。
プレビュー環境はリポジトリに push された時点でビルドされます。PRを立てた場合にはGitHub Actionsでビルドの経過が可視化され、完了後にリンクが表示されます。ただし、後述する設定次第ではPRを立てても生成されない場合があります。
Deploy Previews の種類
Deploy Previews には2種類あります。
1.ブランチごとに生成されるDeploy Previews
リポジトリにブランチを作成、または更新した時にデプロイが走ります。これは{ブランチ名}--{ドメイン名}.netlify.comのURLでアクセスが可能です。
2.PRごとに生成されるDeploy Previews
PRを立てた、または更新した時にデプロイが走ります。これはdeploy-preview-{PRのナンバー}--{ドメイン名}.netlify.comのURLで生成され、PRからリンクを辿ることができます。
Deploy Previews の設定
Deploy Previews の詳細設定はSettings > Build & deploy > Deploy contextsから設定することができます。
デフォルトでは以下のように設定されています。
各設定項目を解説すると、
- Production branch: 本番環境に相当するブランチを指定します。これは以降の設定で必要になります。
- Deploy previews: Deploy Previews 機能のオンオフを選択します。
- Branch Deploys:
- All: 全てのブランチ、またはPRで Deploy Preview を作成します。
- None: Production Branch か、もしくはマージ先が Production Branch となっているブランチで Deploy Preview が生成されます。すなわちマージ先が本番以外になっているPRでは Deploy Preview が生成されません。
- Let me add individual branches: Production Branch に加え、個別にプレビュー生成したいブランチを選択できます。
注意点
この Deploy Previews 機能ですが、一旦生成されたプレビューリンクを消すことはできません。このため、プレビュー環境の取り扱いには注意が必要です。
Pro 限定の機能ですが、 Basic 認証を掛けることは可能です。ただし、Netlify CMSを使っていないことが条件となります。（Netlify CMSとの兼ね合いについて詳しく知りたい方はNetlify CMS で Deploy Preview にBasic認証が掛けられないもご覧ください）
まとめ
今回は Netlify の Deploy Previews 機能についてまとめました。Netlify を使うにあたって参考にしていただけると嬉しいです。
Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています
Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。
現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい！
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください！
お問い合わせしてみる！
