Vercel にデプロイした docsify に middleware を使って BASIC 認証をかける

こちらの記事に大感謝！

https://zenn.dev/monicle/articles/vercel-plain-middleware-basic-auth

docsify への導入には少しアレンジが必要だったので備忘録です。

コード

middleware.js

const next = () => {
  const headers = new Headers();
  headers.set("x-middleware-next", "1");
  return new Response(null, {
    headers,
  });
};

export const config = {
  matcher: "/",
};

const USER_NAME = process.env.BASIC_AUTH_USER || "admin";
const PASSWORD = process.env.BASIC_AUTH_PASSWORD || "admin";

export default function middleware(request) {
  const authorizationHeader = request.headers.get("authorization");

  if (authorizationHeader) {
    const basicAuth = authorizationHeader.split(" ")[1];
    const [user, password] = atob(basicAuth).toString().split(":");

    if (user === USER_NAME && password === PASSWORD) {
      return next();
    }
  }

  return new Response("Basic Auth required", {
    status: 401,
    headers: {
      "WWW-Authenticate": 'Basic realm="Secure Area"',
    },
  });
}

基本的に上記の記事で紹介されているコードと同じですが、1箇所だけ変更します。

- import { next } from "@vercel/edge";
+ const next = () => {
+   const headers = new Headers();
+   headers.set("x-middleware-next", "1");
+   return new Response(null, {
+     headers,
+   });
+ };

このままだと、認証をかけても下位ディレクトリには URL 直打ちでアクセスできてしまうようです。
すべてのページに認証をかけるには config の部分をコメントアウトすれば OKです。

初期化コマンドの docsify init ./docs はディレクトリ（ docs ）を作成してその中に .nojekyll や index.html を作成するだけなので、 node_modules ディレクトリは作られません。
その状態で import { next } from "@vercel/edge"; としても読み込み先が存在しなくてエラーになってしまうので、代わりに読み込み先のコードを直に書き込んでやります（引数 init を受け取ることはないので大元のコードをさらに簡略化）。

書いた middleware.js は docs ディレクトリの直下に入れましょう。

Vercel へのデプロイ上での各種設定

デプロイの Root Directory は docs を設定。

Vercel の設定画面から BASIC_AUTH_USER と BASIC_AUTH_PASSWORD の環境変数を設定しておきます。

Vercel の環境変数は 次の デプロイから有効になります。

ここまでの設定がうまくいっていれば BASIC 認証が有効になります。