VercelにホスティングしたウェブサイトにBasic認証を設定する 🔐

VercelにBasic認証をかけることに成功したので手順をメモしておきます。

❶ ホスティングしたいファイルをpublicディレクトリに入れる

❷ プロジェクトルートにapp.jsをつくる

app.js

const protect = require('static-auth');
const safeCompare = require('safe-compare');

const USER_NAME = 'user';
const PASSWORD = 'password';

const app = protect(
  '/',
  (username, password) => {
    return safeCompare(username, USER_NAME) && safeCompare(password, PASSWORD)
  },
  {
    directory: `${ __dirname }/public`,
    onAuthFailed: (res) => {
      res.end('Authentication failed.')
    },
  }
);

module.exports = app;

❸ プロジェクトルートにvercel.jsonをつくる

vercel.json

{
  "builds": [
    {
      "src": "app.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    { "src": "/.*", "dest": "app.js" }
  ]
}

これですべてのリクエストをapp.js経由で処理するようになり、Basic認証がかかります。
app.jsを経由するために、Root Directory は public ではなく ./ にしておきましょう。
本当はユーザー名、パスワードは外部化した方が良さそうですが、今回はスピード重視でファイルに書き込みました。