evidence bi with vercelで特定のページにbasic認証する

2025-08-15 | 6 min read | engineer bi evidence vercel

最終更新日: 2025-08-15

evidence biをデプロイするが、（あまりみせたくないページに）簡単にbasic認証をかけたい。vercelのrouting middlewareという機能を使えば割と簡単に実現可能なため試してみた

AIにやり方おしえてもらった

環境

node: 20.x
vercel: 49.1.x
@vercel/edge: 1.2.x

vercel関連のパッケージはインストールしておく

npm install --dev @vercel/edge vercel

vercel projectの設定周りの手順は割愛

実装

ここでは、特定のページ（/demo）に対してbasic認証をかけるように設定していく

こちらを middleware.jsとして作成する

import { next } from "@vercel/edge";
 
// ページ以下はbasic認証
export const config = {
  matcher: ["/demo/:path*"],
};
 
export default function middleware(request) {
  const authorizationHeader = request.headers.get("authorization");
 
  // 正解のユーザー/パスワード
  const validUser = process.env.BASIC_AUTH_USER;
  const validPass = process.env.BASIC_AUTH_PASSWORD;
 
  if (authorizationHeader) {
    const basicAuth = authorizationHeader.split(" ")[1];
    const [user, password] = atob(basicAuth).split(":");
 
    if (user === validUser && password === validPass) {
      return next();
    }
  }
 
  return new Response("Auth Required", {
    status: 401,
    headers: {
      "WWW-Authenticate": 'Basic realm="Secure Area"',
    },
  });
}

これでOK。

動作確認

vercel cliにてローカルで確認していく

middleware.js内で参照する認証のパスを環境変数.envに記載する

BASIC_AUTH_USER=admin
BASIC_AUTH_PASSWORD=admin

まずはログイン。ログインを促されるので適当にログインする

npx vercel login
...

ローカル環境立ち上げ

対象プロジェクトなど選択していく

.env.localも作ったけど、ここではなくてもよい

npx vercel dev
...
Vercel CLI 49.1.2
? Set up and develop “~/p_dev/evidence-dashboard”? yes
? Which scope should contain your project? own's projects
? Link to existing project? yes
? Which existing project do you want to link? evidence-dashboard
🔗  Linked to owns-projects-xxxx/evidencedashboard (created .vercel and added it to .gitignore)
? Would you like to pull environment variables now? yes
> Downloading `development` Environment Variables for own-projects-a5fc7d63/evidence-dashboard
✅  Created .env.local file and added it to .gitignore [253ms]
> Creating initial build
(node:17680) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
sh: yarn: command not found
...

sh: yarn: command not found

とでたあたりで（yarn使ってないので）Ctrl + C ****した

以下vercel.jsonを作成して再実行。試してないが、vercel projectの設定からDevelopment Commandを設定してあれば問題ないかも

{
  "framework": null,
  "buildCommand": "npm run sources && npm run build",
  "devCommand": "npm run dev -- --port $PORT",
  "installCommand": "npm install",
  "outputDirectory": "build"
}

npx vercel dev
Vercel CLI 49.1.2
> Running Dev Command “npm run dev -- --port $PORT”
 
> evidence-project@0.0.1 dev
> evidence dev --open / --host 0.0.0.0 --port 3000
...
> Ready! Available at http://localhost:3000

立ち上がった

http://localhost:3000にアクセスし、demoページにアクセスしようとしたら、basic認証のポップアップが表示されればOK

demo-page-basic-auth screen

おまけ。vercel devの時のenvファイルの設定方法

ローカル確認のときはenvファイルから読み込む。envファイルの読みこみ優先順位がわからなかったのでAIに聞いた

vercel dev コマンドを実行した際、参照される環境変数は主に「Vercel上の Development 環境」と「ローカルの .env ファイル」の2つです。

これらは優先順位が決まっています。以下にわかりやすく整理します。

参照順序と優先順位

基本的には、ローカルファイルが優先されます。同じ名前の変数が両方にある場合、ローカルの設定がVercel上の設定を上書きします。

優先順位（高い順）は以下の通りです：

ローカルの .env ファイル (.env.local, .env.development.local など)
Vercel プロジェクト設定 (Cloud) (Development 環境に設定されたもの)

一応.env.localにも書いてみたけど.envの内容が優先された

おわりに

本番環境（vercel上にデプロイされたもの）の確認は割愛する。vercel projectの設定から、basic認証で使う環境変数を設定してやれば同様な手順で確認できる

ちなみに、evidence biで作ったページは、通常サイドバーにリンクテキストが表示される。ただし、mdファイルの frontmatterにsidebar_link: falseを追加するとただのテキストになり、サイドバーからはリンクに飛べなくなる（直接リンクURLに飛べば閲覧はできる）。こちらの設定も合わせて行うと、よりページへ辿りつきづらくできる

vercel middlewareでbasic認証する記事、たくさんあるのだが、一応特定のパス以下という部分と、evidence biへの適用は新しいかなと思ったので記事にした

参考

https://vercel.com/docs/routing-middleware