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.json に echo-netlify-basic-auth コマンドを追加
scripts": {
・・・
"echo-netlify-basic-auth": "echo \"/*\\n Basic-Auth: name:pass\" > out/_headers"
},これはビルド後のフォルダ内の「_header」ファイルにBasic認証の設定を記載するコマンドです
またブランチに応じて実行する内容事を変える必要があるので、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 とする事は難しいみたい。。😢
