m's blog

備忘録とかメモとか

Netlify向けのデプロイテンプレートを作ってみました! 【ステージング、プルリクプレビュー対応】

Netlify 向けのデプロイテンプレートを作ってみました! 【ステージング、プルリクプレビュー対応】

Netlify 向けのデプロイテンプレート を作ってみました。

今回は、作成したテンプレートの使い方などを解説していきたいと思います。

ステージング環境やプルリクのプレビューにも対応 しています。

Template repository に設定してあるので、そのままテンプレートとして使えます。

環境に合わせて、適当に調整して使ってください。

目次

簡単な流れ

今回の記事では、使い方や注意点などを解説したあと、実際に動かしてみるところまでを解説します。

( 設定の内容について、後日、別記事で書くかも? )

それでは、早速、Netlify 向けのデプロイテンプレート について、解説していきたいと思います。

セットアップ

リポジトリの作成

以下のコマンドで、テンプレートをクローンしてください。

git clone https://github.com/mm0202-template/deploy-to-netlify.git

また、以下の GitHub リポジトリページの 「 Use this template 」 ボタンからもリポジトリの作成が可能 です。

Netlify での公開設定

Netlify のページで 「 New site from Git 」 ボタンを押して、サイトの作成をスタートしてください。

はじめてサイトを作成する場合は、以下のページを参考にしてください。

途中、「 Publish directory 」 の入力では、public ディレクトリを指定 してください。

公開するブランチの設定

Settings ページを開いて、Build & deploy > Continuous Deployment > Deploy contexts の項目へ移動して、Edit settings ボタンを押してください。

以下の表に従って、使用するページのタイプごとに設定を追加してください。

対象 説明 設定
production 公開ページ 「 Production branch 」に production-public を設定
staging ステージング確認用ページ 「 Branch deploys 」の設定に staging-public を追加
pull-req-preview プルリク確認用ページ。最新プッシュのみ 「 Branch deploys 」 に pull-req-preview-public を追加
deploy-preview Netlify のプルリク確認機能。過去分の確認も可 「 Deploy previews 」の設定で「 Automatically build deploy previews for all pull requests 」を選択し、「 Branch deploys 」 に staging を追加

deploy-preview の使用には、別途、後述のソースコードの調整が必要です。

GitHubリポジトリでの設定

production リポジトリと staging リポジトリが必要になります。

GitHub リポジトリに、production リポジトリとstaging リポジトリを追加 してください。

ソースコードの調整

deploy-preview を使用する場合は、.github/workflows/templates/deploy-preview.yml.github/workflows 下に移動 してください

これにより、「 deploy-preview 」 用のデプロイワークフローが有効になります。

deploy-preview の使用には、別途、前述の Netlify での有効化設定が必要です。

各環境について

production

マージリクエストなどで production ブランチにプッシュイベントが発生するとデプロイ されます。

デフォルトのサブドメイン、または追加した独自ドメインでアクセス してください。

staging

マージリクエストなどで staging ブランチにプッシュイベントが発生するとデプロイ されます。

https://staging-public--[defualt subdomain] のような URL でアクセス してください。

pull-req-preview

プルリク時( プルリク後のプッシュを含む )にデプロイ されます。

https://pull-req-preview-public--[defualt subdomain] のような URL でアクセス してください。

公開されるページは、最新のプッシュだけ です。

※ Netlify の 「 deploy-preview 」 とは異なります。

deploy-preview (optional)

https://deploy-preview-[pull request id]--[defualt subdomain] のような URL でアクセス してください。

「 deploy-preview 」 を使用する場合、プッシュ時に、毎回、ワークフローで生成されたファイルのマージが必要 となります。

毎回マージするのが面倒な場合は、前述の pull-req-preview を使ってください。

使用例

テンプレートをそのまま使用する場合は、以下のようなマージの流れを想定しています。

作業用ブランチ > staging > production > master

使用環境やマージの流れによって、ワークフローを調整してください。

実際に使ってみる!

productionstagingpull-req-preview 環境の公開を想定して、実際にページを公開してみます!

※ 今回の解説では deploy-preview については使用しません。

では、早速、試してみたいと思います。

前述の使用例の流れのように 作業用ブランチ > staging > production > master 」の流れでページを公開していきます

作業用ブランチの作成

ローカル環境で、適当な名前の作業用ブランチを作成して、チェックアウトしてください。

以下のコマンドで、空のコミットした後、プッシュしてください。

git commit --allow-empty -m "commit for check"
git push

プルリクエストの作成と確認用ページのチェック

GitHubの 「 Pull Request 」 ページで、「 base 」 に staging ブランチを指定 して、プルリクエストを作成してください。

pull-req-preview ワークフローが完了したら、Netlify のサイトページの Deploys タブを開いてください。

デプロイが実行されていれば、以下のような項目が追加されるので、その項目をクリックしてください。

Netlify 向けのデプロイテンプレートを作ってみました! 【ステージング、プルリクプレビュー対応】

デプロイの情報ページが開くので、下の方にある「 Deploy log 」のエリアにあるPreview ボタンを押してください。

ページが開いて、以下のように表示されれば、プルリク確認用ページのデプロイに成功です。

Netlify 向けのデプロイテンプレートを作ってみました! 【ステージング、プルリクプレビュー対応】

ページが表示されればプルリク確認用のページのデプロイに成功です!

マージとステージング確認用ページのチェック

問題がなければ、Merge pull request ボタンを押して、マージを実行してください。

staging ワークフローがスタートするので、ワークフローが完了したら、Netlify の Deploys ページを開いてください

以下のような項目が追加されていれば、デプロイが実行されています。

Netlify 向けのデプロイテンプレートを作ってみました! 【ステージング、プルリクプレビュー対応】

上の図のような項目をクリックして、デプロイ結果ページを開き、Preview ボタンから staging 用のページを確認してください。

以下のような表示がされていれば、staging 用のページのデプロイに成功です!

Netlify 向けのデプロイテンプレートを作ってみました! 【ステージング、プルリクプレビュー対応】

サイトの公開とチェック

最後に、production 環境をデプロイしてサイトを公開したいと思います。

GitHub の 「 Pull Request 」 ページで、「 base 」 に production ブランチ、「 compare 」 に staging ブランチを指定 して、プルリクエストを作成してください。

特に問題がなければ、Merge pull request ボタンを押して、マージを実行してください。

production ワークフローがスタートするので、ワークフローが完了したら、Netlify の Deploys ページを開いてください

以下のような項目が追加されていれば、デプロイが実行されています。

Netlify 向けのデプロイテンプレートを作ってみました! 【ステージング、プルリクプレビュー対応】

先ほどと同様にして、デプロイ結果ページを開き、公開されたページを確認してください。

以下のような表示がされれば、サイト公開に成功です!

Netlify 向けのデプロイテンプレートを作ってみました! 【ステージング、プルリクプレビュー対応】

最後に、必要に合わせて production ブランチを master ブランチへマージしてください。

以上で、サイトの公開は完了です!

まとめ

今回は、筆者の作成した Netlify へのデプロイテンプレートの使い方について解説してみました。

Netlify は最近使い始めたばかりですが、GitHub にプッシュするだけでサイトが公開されるのは、とても気持ちがいいです(*´▽`*)

サイトの作成もですが、ちょっとしたツールやサンプルページを作るのにも便利そうで、重宝しそうです。

最後に、今回の内容について、簡単にまとめてみたいと思います。

  • Netlify のデプロイは簡単!
  • ステージング環境の設置も楽ちん
  • 主にやることは、Netlify での Deploy contexts の設定と、それに合わせた調整だけ!