Netlify向けのデプロイテンプレートを作ってみました！ 【ステージング、プルリクプレビュー対応】
Netlify 向けのデプロイテンプレート を作ってみました。
今回は、作成したテンプレートの使い方などを解説していきたいと思います。
ステージング環境やプルリクのプレビューにも対応 しています。
Template repository に設定してあるので、そのままテンプレートとして使えます。
環境に合わせて、適当に調整して使ってください。
目次
簡単な流れ
今回の記事では、使い方や注意点などを解説したあと、実際に動かしてみるところまでを解説します。
( 設定の内容について、後日、別記事で書くかも？ )
それでは、早速、Netlify 向けのデプロイテンプレート について、解説していきたいと思います。
セットアップ
リポジトリの作成
以下のコマンドで、テンプレートをクローンしてください。
git clone https://github.com/mm0202-template/deploy-to-netlify.git
また、以下の GitHub リポジトリページの 
ボタンからもリポジトリの作成が可能 です。
Netlify での公開設定
Netlify のページで 
ボタンを押して、サイトの作成をスタートしてください。
はじめてサイトを作成する場合は、以下のページを参考にしてください。
途中、「 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
使用環境やマージの流れによって、ワークフローを調整してください。
実際に使ってみる！
production、staging、pull-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 タブを開いてください。
デプロイが実行されていれば、以下のような項目が追加されるので、その項目をクリックしてください。
デプロイの情報ページが開くので、下の方にある「 Deploy log 」のエリアにあるPreview ボタンを押してください。
ページが開いて、以下のように表示されれば、プルリク確認用ページのデプロイに成功です。
ページが表示されればプルリク確認用のページのデプロイに成功です！
マージとステージング確認用ページのチェック
問題がなければ、Merge pull request ボタンを押して、マージを実行してください。
staging ワークフローがスタートするので、ワークフローが完了したら、Netlify の Deploys ページを開いてください
以下のような項目が追加されていれば、デプロイが実行されています。
上の図のような項目をクリックして、デプロイ結果ページを開き、Preview ボタンから staging 用のページを確認してください。
以下のような表示がされていれば、staging 用のページのデプロイに成功です！
サイトの公開とチェック
最後に、production 環境をデプロイしてサイトを公開したいと思います。
GitHub の 「 Pull Request 」 ページで、「 base 」 に production ブランチ、「 compare 」 に staging ブランチを指定 して、プルリクエストを作成してください。
特に問題がなければ、Merge pull request ボタンを押して、マージを実行してください。
production ワークフローがスタートするので、ワークフローが完了したら、Netlify の Deploys ページを開いてください
以下のような項目が追加されていれば、デプロイが実行されています。
先ほどと同様にして、デプロイ結果ページを開き、公開されたページを確認してください。
以下のような表示がされれば、サイト公開に成功です！
最後に、必要に合わせて production ブランチを master ブランチへマージしてください。
以上で、サイトの公開は完了です！
まとめ
今回は、筆者の作成した Netlify へのデプロイテンプレートの使い方について解説してみました。
Netlify は最近使い始めたばかりですが、GitHub にプッシュするだけでサイトが公開されるのは、とても気持ちがいいです(*´▽｀*)
サイトの作成もですが、ちょっとしたツールやサンプルページを作るのにも便利そうで、重宝しそうです。
最後に、今回の内容について、簡単にまとめてみたいと思います。
- Netlify のデプロイは簡単！
- ステージング環境の設置も楽ちん
- 主にやることは、Netlify での Deploy contexts の設定と、それに合わせた調整だけ！
