microCMS

Netlifyでステージング環境を用意する

柴田 和祈

この記事は公開後、1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Netlify使っていますか?Gitの連携するだけで自動的にビルド・デプロイされるので非常に便利ですよね!
実はこのブログもNetlifyにデプロイされています。

今回はNetlifyの便利機能を紹介します。

Gitブランチごとにデプロイを分ける

Netlifyはデフォルトではmasterブランチがそのままデプロイされますが、別のブランチを別の環境にデプロイすることができます。

Settings > Build & deploy > Deploy contexts で設定が可能です。


デフォルトでは上記のような設定になっていると思います。
Branch deploysの項目を見てみると、「None」が選択されています。
ここで「Let me add individual branches」を選択し、デプロイしたいブランチ名を入力します。

例えば、stagingを指定した場合、Git側のstagingブランチにPushした際にビルドとデプロイが走ります。
デプロイ先にアクセスするためには、masterのデプロイ先URLの先頭に「ブランチ名--」を付ければOKです。
例:staging--xxxxxx-xxxxxx-xxxxxx.netlify.com

もちろん本番環境には影響はないので安心してください。

プルリクごとに環境を作る

先ほどの設定項目をもう一度見てみましょう。
Deploy previewsという項目があります。
「Automatically build deploy previews for all pull requests」が選択されていますね。

なんと、デフォルトでプルリクごとにビルド&デプロイのプレビューが生成されるようです。
デプロイ先URLの先頭に「deploy-preview-{id}--」を付ければアクセスすることができます。idはプルリクごとに付与される#付きのidです。
例:deploy-preview-56--xxxxxx-xxxxxx-xxxxxx.netlify.com

試しにstagingブランチで文言修正コミットをし、masterブランチにプルリクを投げてみます。
そうすると、以下のように2つのデプロイが走るのが観測できると思います。

それぞれビルドが終わればプレフィックスを付けることでアクセス可能になります。

GitHubのプルリク上からもリンクされる

NetlifyとGitHubを連携している場合、プルリクを投げると以下のように進捗が表示されます。

この赤矢印の部分をクリックすると、プレビュー環境を簡単に開くことができます。便利!

おわりに

いかがでしたでしょうか。
単純にmasterデプロイするだけでなく、ブランチデプロイやプルリクデプロイを活用して開発体験を向上させていきましょう。

-----

microCMSは日々改善を進めています。
ご意見・ご要望は管理画面右下のチャット、公式Twitterメールからお気軽にご連絡ください!
引き続きmicroCMSをよろしくお願いいたします

まずは、無料で試してみましょう。

APIベースの日本製ヘッドレスCMS「microCMS」を使えば、 ものの数分でAPIの作成ができます。

microCMSを無料で始める

microCMSについてお問い合わせ

初期費用無料・14日間の無料トライアル付き。ご不明な点はお気軽にお問い合わせください。

お問い合わせ

microCMS公式アカウント

microCMSは各公式アカウントで最新情報をお届けしています。
フォローよろしくお願いします。

  • X
  • Discord
  • github

ABOUT ME

柴田 和祈
microCMSのデザイン、フロントエンド担当 / ex Yahoo / 2児の父 / 著書「React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで 」 / Jamstack