Netlify の Deploy Previews 機能を使ってプレビュー環境を自動で生成して確認する

ishigaki

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回は Netlify の Deploy Previews 機能についてまとめたいと思います。

Deploy Previewsとは

ホスティングサービスである Netlify には Deploy Previews という機能があります。

Netlify のプロダクトページにも挙げられている Netlify の売りの一つとも言うべき機能で、GitHubなどの連携したリポジトリに変更が push された際に、自動でプレビュー環境を作ってくれるというものです。

標準で有効となっており、Netlify とリポジトリを連携させればすぐに使えるようになっています。

PRを作成後にデプロイが走り、完了後 Deploy preview ready! 右の Details からプレビュー環境にアクセスできる

プレビュー環境はリポジトリに 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から設定することができます。

デフォルトでは以下のように設定されています。

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では、React+Reduxが得意なフロントエンドエンジニアを募集しています

弊社ではフロントエンドのエンジニアさんを随時募集しています。現在は特にReact+Reduxの設計・実装に強いフロントエンドエンジニアさんを求めています! 大きな会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるフリーランスの方やパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!


ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。