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

2020.09.14

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

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

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

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

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

その際に

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

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"
},

プレビュー時にのみ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に以下のように設定します。

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

package.json

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

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

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