🔐

Next.js (OpenNext) + Cloudflare Workers で Basic 認証をかけてデプロイする

2025/10/19に公開

はじめに

Next.js で構築する Web サイトに Basic 認証をかけて、Cloudflare Workers にデプロイするまでの手順を備忘録としてまとめました。

Cloudflare のアカウントは事前に作成済とします。
また、独自ドメインの設定は今回は行っていません。

動作環境

Next.js 15.4.6 (App Router)
opennextjs/cloudflare 1.9.1
wrangler 4.42.0

プロジェクト作成

下記コマンドで、opennextjs/cloudflare を使用して Cloudflare Workers にデプロイするための設定が構築された Next.js プロジェクトを作成します。

npm create cloudflare@latest -- my-next-app --framework=next --platform=workers

サイトの内容は各々の要件に応じて作成してください。
とりあえず Workers 上で動作確認したいという場合はそのままで次に進んでも構いません。

Basic 認証の実装

src/ 直下 (app/ と同階層) に、 middleware.ts を作成します。
画像などの静的ファイルを認証から除外したい場合は、 config の matcher で除外することができます。

src/middleware.ts

import { NextRequest, NextResponse } from "next/server";

export function middleware(request: NextRequest) {
  // 環境変数から認証情報を取得
  const authUser = process.env.BASIC_AUTH_USER;
  const authPassword = process.env.BASIC_AUTH_PASSWORD;

  // Basic　認証が設定されている場合のみ認証を実行
  if (authUser && authPassword) {
    const authHeader = request.headers.get("authorization");

    if (!authHeader || !authHeader.startsWith("Basic ")) {
      return new NextResponse("Authentication required", {
        status: 401,
        headers: {
          "WWW-Authenticate": 'Basic realm="Secure Area"',
        },
      });
    }

    // Basic　認証のデコード
    const base64Credentials = authHeader.split(" ")[1];
    const credentials = atob(base64Credentials);
    const [username, password] = credentials.split(":");

    // 認証情報の検証
    if (username !== authUser || password !== authPassword) {
      return new NextResponse("Invalid credentials", {
        status: 401,
        headers: {
          "WWW-Authenticate": 'Basic realm="Secure Area"',
        },
      });
    }
  }

  // 認証成功または認証不要の場合は次へ
  return NextResponse.next();
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};

まずはローカル環境で動作確認するために、 .env.local あるいは .env.development.local などのファイルに環境変数を設定します。

.env.development.local

BASIC_AUTH_USER=your_username
BASIC_AUTH_PASSWORD=your_password

npm run dev を実行して、ローカル環境で動作確認してください。

ブラウザでアクセスすると、Basic 認証のダイアログが表示されます。

デプロイ

Cloudflare のダッシュボードからデプロイのための設定もできるのですが、今回はローカル環境からデプロイしてみたかったので wrangler コマンドを使ってみます。

Cloudflare 上での環境変数の設定

ローカルでは環境変数用のファイルを用意しましたが、本番環境でシークレットとして扱いたい設定はファイル記載や git 管理下に含めたくないので、Cloudflare 上では別の方法で設定します。

npx wrangler secret put BASIC_AUTH_USER
npx wrangler secret put BASIC_AUTH_PASSWORD

コマンドを実行すると値の入力を求められるので、設定したい値を入力してください。
成功すると Success! Uploaded secret BASIC_AUTH_USER のように表示されます。

デプロイ

wrangler でデプロイするには、以下のコマンドを実行してください。

npm run deploy

これでログインしたアカウントの Workers 上でデプロイが完了します。
成功すると URL が表示されるので、ブラウザでアクセスしてみてください。
ローカル環境と同様に Basic 認証のダイアログが表示されれば OK です。

はじめに

動作環境

プロジェクト作成

Basic 認証の実装

デプロイ

ログイン

Cloudflare 上での環境変数の設定

デプロイ

Discussion