Netlify x Next.jsのプレビュー環境にBasic認証を設定する

2020.09.15
Netlify x Next.jsのプレビュー環境にBasic認証を設定する

ProプランじゃないとBasic認証はかける事が出来ないため注意です。



ビルドされたフォルダに「_headers」ファイルを追加しBasic認証の設定を記載する事でBasic認証をかける事が出来ます

公式: Password protection | Netlify Docs



公式ページに書かれている以下の記述の場合、

/something/*
  Basic-Auth: someuser:somepassword anotheruser:anotherpassword

Netlifyに上げたプロジェクトのsomethingフォルダを開こうとした場合にBasic認証でユーザ名、パスワードが求められます。


その際に

  • ユーザー名: someuser パスワード: somepassword
  • ユーザー名: anotheruser パスワード: anotherpassword

それぞれの組み合わせでページを開く事が出来ます。

echoで_headerを書き出すコマンドを追加

以下のコマンドで「_headers」ファイルをNext.jsで書き出した out/ フォルダに作る事が出来ます。

$ echo "/*\n  Basic-Auth: name:pass" > out/_headers


上記の場合

/*
  Basic-Auth: name:pass

となるため、Netlifyに上げたプロジェクトのフォルダファイルを開こうとした際全てにBasic認証がかけられます



簡単に実行出来るようにnpm-scriptsに登録します。

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

netlify.tomlを設定する

プレビュー時にのみBasic認証をかけたいので context.deploy-preview の場合のみ、ビルドを行った後にBasic認証用の_headersファイルを作成するようにします。

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


$yarn run deploy コマンドに関しては ↓ の記事を参照して下さい

環境変数でユーザ名/パスワードを設定する

Basic認証のユーザー名/パスワードをコード上で管理したくないのでNetlifyの環境変数を使います



Settings > Build&DeployのEnvironmentに以下のように設定します。

  • BASIC_AUTH_ID・・ ユーザ名の値
  • BASIC_AUTH_PASSWORD・・ パスワードの値

コードを以下のように変更します

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


もしこれでデプロイをすると、

  • ユーザー名: name パスワード: pass

でBasic認証が通るようになります。

おすすめ