Netlifyでステージング環境を作る

2020.09.16
Netlifyでステージング環境を作る

Netlifyではproduction用のブランチ(多いケースとして master)が該当プロジェクトでデプロイされます。


設定を変更する事で別のブランチもNetlify上にデプロイ、確認出来るようになります。


これから行う設定をすることで、
例えば、 develop ブランチにコミットする毎にNetlify上に反映する事が出来るようになります。

その際のURLは以下のようになります。

  • master・・ https://hogehoge.netlify.app/
  • develop・・ https://develop--hogehoge.netlify.app/

また手順の最後のBasic認証はProプラン以上でないと出来ないのでご注意を!

Netlify上でdevelopブランチが確認出来るようにする

Netlifyの Settings > Build&Deploy のDeploy contextsからEdit settingを押下



Branch deploys から Let me add individual branches を選択。
Additional branchesに develop を記載

Basic認証を設定する

ここから下の設定はNetlifyのProプラン以上でないと出来ないので注意です!




NetlifyでBasic認証をかけるためにはビルド後のフォルダに「_header」ファイルを作る必要があります

詳しくは以下に書いているため詳細は ↓ をご覧下さい


端折って書いていくと、

まず package.jsonecho-netlify-basic-auth コマンドを追加

package.json
scripts": {
  ・・・
  "echo-netlify-basic-auth": "echo \"/*\\n  Basic-Auth: name:pass\" > out/_headers"
},

これはビルド後のフォルダ内の「_header」ファイルにBasic認証の設定を記載するコマンドです



またブランチに応じて実行する内容事を変える必要があるので、netlify.toml に以下のように設定

netlify.toml
[context.production]
command = "yarn run deploy"
[context.develop]
command = 'yarn run deploy && yarn run echo-netlify-basic-auth'
[context.deploy-preview]
command = 'yarn run deploy && yarn run echo-netlify-basic-auth'

これで deplop ブランチとPR作成時のプレビュー環境の場合のみBasic認証がかかるようになります。

URLをstg--xxxx.netlify.app/としたい場合

Netlifyではブランチ名がURLになります。


そのため https://develop--hogehoge.netlify.app/ のようなURLではなく https://stg--hogehoge.netlify.app/ のようにしたいケースがあります。



その場合は stg というブランチを使いつつ、netlify.tomlの設定を

[context.production]
command = "yarn run deploy"
[context.stg]
command = 'yarn run deploy && yarn run echo-netlify-basic-auth'
[context.deploy-preview]
command = 'yarn run deploy && yarn run echo-netlify-basic-auth'

とすればOKです。



develop ブランチで上げたものをNetlify上で https://stg--hogehoge.netlify.app とする事は難しいみたい。。😢

おすすめ