mlog

備忘録とかメモとか

トップ > Netlify > 簡単セットアップ！Netlifyにステージング環境を追加する方法

簡単セットアップ！Netlifyにステージング環境を追加する方法

Netlify GitHub ホスティング 静的コンテンツ

Image from Gyazo

今回は Netlify にステージング環境を追加する方法 について解説したいと思います！

Netlify では、簡単にステージング環境を追加する事ができます。

GitHub と連携する場合であれば、GitHub にステージング用のブランチを追加して、Netlify の設定ページで公開用ブランチを追加するだけでステージング環境が出来てしまします。

おまけに、デフォルトでプルリクごとのプレビューも自動で用意されている という( ﾟДﾟ)ｶﾞｸｶﾞｸ

それでは、早速、Netlify にステージング環境を追加する方法を解説していきます。

目次

はじめに

本記事では、以下の記事で公開したサンプルサイトをベースに解説を進めていきます。

まだ Netlify を利用していない場合は、上記のページを参考に、トライアル用のサイトを作成してください。

簡単な流れ

本記事では、以下のような流れで解説を進めていきます。

  1. GitHub リポジトリに staging ブランチを追加
  2. Netlify で staging ブランチの公開設定
  3. 公開設定したステージング用ページを確認
  4. プルリクのプレビューについての解説
  5. まとめ

それでは、早速、Netlify にステージング環境を追加していきます。

GitHub リポジトリに staging ブランチを追加

まずは、GitHub リポジトリにステージング環境用のコードを追加します。

ローカル環境で staging ブランチを追加して、チェックアウトしてください。

public/index.html の内容を以下のように調整してください。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>staging</title>
</head>

<body>
    <p>ステージングだよ！</p>
</body>

</html>

public/index.html の内容を変更したら、GitHub へプッシュしてください。

以上で、GitHub リポジトリの準備は完了です！

Netlify で staging ブランチの公開設定

次に、作成した staging ブランチを公開するための設定を進めていきます。

Nelify の管理ページを開いて、対象サイトの Settings ページを開いてください。

Settings ページを開いたら、Build & deploy > Continuous Deployment へ移動してください。

Image from Gyazo

Deploy contexts 項目にある、Edit settings ボタンをクリックしてください。

Image from Gyazo

Edit settings ボタンをクリックをクリックすると、ブランチのデプロイ設定が表示されます。

Image from Gyazo

全てのブランチを公開する場合

全てのブランチを公開する場合は、Branch deploys の項目の中から All を選択してください。

個別にブランチの公開設定をする場合

個別にブランチの公開設定をする場合は、Branch deploys の項目の中から Let me add individual branches を選択してください。

Additional branches という入力欄が表示されるので、その欄に追加したいブランチの名前を入力してください。

今回は staging ブランチだけを公開するものとして、Additional branches　に staging ブランチを追加しています。

公開したいブランチを入力したら、Save ボタンをクリックしてください。

以上で、staging ブランチの公開設定は完了です。

ステージング用のページを確認！

Branch deploys で設定したブランチは、以下のような URL にアクセスすると、表示を確認することができます。

[ブランチ名]--[サイト名].netlify.com

例えば、ブランチ名が staging で、サイト名が example であれば、staging--example.netlify.com といった感じです。

上記の例を参考に、staging ブランチ用の URL を開いて、公開内容をチェックしてください。

「ステージングだよ！」と表示されれば設定は成功です。

プルリクのプレビューチェックもできる！

なんと、プルリクのページチェックもできます( ﾟДﾟ)ｶﾞｸｶﾞｸ

少し、蛇足になりますが、プルリクのプレビューも非常に便利な機能なので、簡単に補足したいと思います。

Settings > Build & deploy > Continuous Deployment に戻って Deploy contexts の設定を確認してください。

Image from Gyazo

Deploy previews の項目については、特に設定を変更はしていませんが、デフォルトで Automatically build deploy previews for all pull requests となっていると思います。

この設定は、プルリクした内容を自動でデプロイ するというものです。

※ もちろん、設定変更によりオフにすることもできます。

以下のような URL を開くことで、プルリクごとのプレビューを確認することができます。

deploy-preview-[id]--[サイト名].netlify.com

ここで、id はプルリクに付与される、#付きの番号です。

例えば、付与される番号が 42 で、サイト名が example であれば、deploy-preview-42--example.netlify.com にアクセスすることでプルリクのプレビューをチェックすることができます。

また、GitHub のプルリク側でもデプロイ内容が確認でき、リンクをたどってプレビューをチェックする事できます。

Image from Gyazo

上の画像の場合だと、一番下の、netlify/m-sample-netlify-trial/deploy-preview — Deploy preview ready! とかかれた欄の、右側の Details をクリックするとプレビューが確認できます。

まとめ

以上、「 Netlify にステージング環境を追加する方法」について解説してみました。

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

  • Netlify のステージング環境の設置は簡単！
  • staging ブランチを作成して、Netlify で登録するだけ！
  • プルリクのプレビューも自動生成！