Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@takumibv

Next.jsのmiddlewareを用いてメンテナンスモードを導入する

Last updated at Posted at 2023-06-11

Next.js, Vercel ではメンテナンスモードが提供されていないため、自前で用意する必要があります。
Next.js の middleware を使って、メンテナンスを実装してみます。

完成後のコードは以下のリポジトリです。
https://github.com/takumibv/nextjs-maintenance-example

達成したいこと

  1. Next.js の middleware でメンテナンスモードを導入する
  2. 特定のページは、メンテナンスモードでも表示できるようにする
  3. 特定のIPアドレスの場合は、メンテナンスモードを除外できるようにする

環境

  • Node.js 16.8以降
  • Next 13.4

0. 準備

Next.jsの導入

$ npx create-next-app@latest
# 執筆時点で 13.4.4 が最新

# 設定は以下の通り
Would you like to use TypeScript with this project? Yes
Would you like to use ESLint with this project? Yes
Would you like to use Tailwind CSS with this project? Yes
Would you like to use `src/` directory with this project? No
Use App Router (recommended)? Yes
Would you like to customize the default import alias? No
  • 今回は Next.js 13 のApp Router を選択しますが、 middleware.ts の書き方は Next.js 12 以降であれば同じ記述で実現できます。(Next.js 12での動作は未確認)

画面の用意

今回は以下の3画面を用意します。

./
├── app
│   ├── page.tsx
│   ├── layout.tsx
│   ├── dashboard
│   │   └── page.tsx
│   ├── maintenance
│   │   └── page.tsx
│   └── ...
:
  • app/page.tsx (/): トップ画面. メンテナンスモード時でも表示できるようにする.
  • app/dashboard/page.tsx (/dashboard): メンテナンスモード時に、メンテナンス画面を表示する画面.
  • app/maintenance/page.tsx (/maintenance): メンテナンス画面.
app/layout.tsxのソースコード
app/layout.tsx
import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}
app/page.tsxのソースコード(補足あり)
app/page.tsx
import Image from "next/image";
import Link from "next/link";
import logo from '@/public/next.svg';

export default function Home() {
  return (
    <main className="p-24">
      <Image
        className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
        src={logo}
        alt="Next.js Logo"
        width={180}
        height={37}
        priority
      />

      <Image
        className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
        src="/next.svg"
        alt="この画像はメンテナンスモードの時には表示できない"
        width={180}
        height={37}
        priority
      />

      <p className="mt-6">この画面はメンテナンスモードを適用しない</p>

      <ul className="mt-2">
        <li>
          <Link href="/dashboard" className="underline">
            Dashboard
          </Link>
        </li>
        <li>
          <Link href="/maintenance" className="underline">
            Maintenance
          </Link>
        </li>
      </ul>
    </main>
  );
}

画像ファイルについて

<Image> を2例載せており、下のパターンはsrcを画像パスを文字列で渡しており、メンテナンスモード時は表示できなくなります。
これは middleware.ts で画像リンクがリダイレクト対象になってしまうためです。メンテナンスモード時で画像などのアセットを使用する場合は、 上パターンのように import したファイルをsrcに指定するようにしましょう。
画像アセットについて.png

app/dashboard/page.tsxのソースコード
app/dashboard/page.tsx
import Link from "next/link";

export default function Dashboard() {
  return (
    <main className="p-24">
      <h1 className="text-2xl font-bold">Dashboard</h1>

      <div className="mt-2">
        <Link href="/" className="underline">
          Top
        </Link>
      </div>
    </main>
  );
}
app/maintenance/page.tsxのソースコード
app/maintenance/page.tsx
import Image from "next/image";
import Link from "next/link";
import logo from "@/public/next.svg";

export const metadata = {
  title: "Maintenance",
  robots: "noindex",
};

export default function Maintenance() {
  return (
    <main className="p-24">
      <Image
        className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert w-20"
        src={logo}
        alt="Next.js Logo"
        width={180}
        height={37}
        priority
      />

      <h1 className="text-2xl font-bold mt-2">Maintenance</h1>

      <div className="mt-2">
        <Link href="/" className="underline">
          Top
        </Link>
      </div>
    </main>
  );
}

1. Next.js の middleware でメンテナンスモードを導入する

方針

  1. .env ファイルの NEXT_PUBLIC_MAINTENANCE_MODE でメンテナンスモードを切り替えるようにする
  2. メンテナンスモードの時に、 任意の画面にアクセスした際に /maintenance にリダイレクトするようにする

.env ファイルに環境変数を用意する

.env
NEXT_PUBLIC_APP_HOST=http://localhost:3000

NEXT_PUBLIC_MAINTENANCE_MODE=true
  • NEXT_PUBLIC_MAINTENANCE_MODE: true を指定してメンテナンスモードに切り替えます。
  • リダイレクト先は絶対パスでしか指定できないため、NEXT_PUBLIC_APP_HOST にホスト名を用意します。

middleware.ts ファイルを作成する

middleware.tsの最低限のコードです。 メンテナンスモード時に、全ての画面に対して /maintenance にリダイレクトするようになります。

middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

const isMaintenanceMode = Boolean(process.env.NEXT_PUBLIC_MAINTENANCE_MODE);

export function middleware(request: NextRequest) {
  if (!isMaintenanceMode) {
    // メンテナンスモードでない時は、/maintenance を404にする
    if (request.nextUrl.pathname === "/maintenance") {
      request.nextUrl.pathname = "/404";
      return NextResponse.rewrite(request.nextUrl);
    }

    return;
  }

  // メンテナンスモード時の処理
  if (isMaintenanceMode) {
    // 繰り返しリダイレクトを防ぐ
    if (request.nextUrl.pathname === "/maintenance") return;

    // メンテナンス画面へリダイレクト
    return NextResponse.redirect(`${process.env.NEXT_PUBLIC_APP_HOST}/maintenance`);
  }
}

export const config = {
  matcher: [
    // 画面遷移以外のリクエストを除外する
    "/((?!api|_next/static|_next/image|favicon.ico).*)",
  ],
};
  • middleware 関数がリクエストが完了する前に実行されることで、レスポンスを操作することができます。(参考)
  • config変数 でmiddleware 関数を実行するパスを指定できます。初期状態だとアセット系も含めすべてのリクエストに対して実行されるため、画面遷移以外のリクエストを除外します。
  • メンテナンスモードでない時に/maintenance にアクセスすると、 request.nextUrl.pathname = "/404" を指定し、404画面を表示するようにします。
  • NextResponse.redirect(url) には絶対パスを指定します。(参考)

2. 特定のページは、メンテナンスモードでも表示できるようにする

メンテナンスモード時でも、 トップ画面 app/page.tsx (/) は表示できるように修正します。

middleware.ts を修正する

middleware.ts
+ // メンテナンスモードの除外ページ
+ const maintenanceExclusionPaths = ["/"];

const isMaintenanceMode = Boolean(process.env.NEXT_PUBLIC_MAINTENANCE_MODE);

export function middleware(request: NextRequest) {
  if (!isMaintenanceMode) {
    // メンテナンスモードでない時は、/maintenance を404にする
    if (request.nextUrl.pathname === "/maintenance") {
      request.nextUrl.pathname = "/404";
      return NextResponse.rewrite(request.nextUrl);
    }
    return;
  }

+  const { pathname } = request.nextUrl;
+
+  // メンテナンスモードの対象かどうか
+  const isMaintenanceTargetPath = !maintenanceExclusionPaths.some((path) => pathname === path);

-  if (isMaintenanceMode) {
+  if (isMaintenanceMode && isMaintenanceTargetPath) {
    // 繰り返しリダイレクトを防ぐ
    if (request.nextUrl.pathname === "/maintenance") return;

    // メンテナンス画面へリダイレクト
    return NextResponse.redirect(`${process.env.NEXT_PUBLIC_APP_HOST}/maintenance`);
  }
}
  • maintenanceExclusionPaths: メンテナンスモードの除外ページのパスを配列で格納します。
  • request.nextUrl.path (アクセスしたページのパス) がmaintenanceExclusionPathsに含まれていれば、リダイレクトを回避するように修正します。

3. 特定のIPアドレスの場合は、メンテナンスモードを除外できるようにする

方針

  • .env ファイルの NEXT_PUBLIC_MAINTENANCE_WHITELIST にメンテナンスモードを除外するIPアドレスを記載する
  • リクエストヘッダーの x-forwarded-for ヘッダーからIPを取得し、除外IPアドレスと比較する

.env に変数を追加

.env
NEXT_PUBLIC_APP_HOST=http://localhost:3000

NEXT_PUBLIC_MAINTENANCE_MODE=true
+ NEXT_PUBLIC_MAINTENANCE_WHITELIST=1.0.0.1,1.0.0.2

middleware.ts を修正する

middleware.ts
// メンテナンスモードの除外ページ
const maintenanceExclusionPaths = ["/"];

const isMaintenanceMode = Boolean(process.env.NEXT_PUBLIC_MAINTENANCE_MODE);
+ const maintenanceWhiteListIPs = process.env.NEXT_PUBLIC_MAINTENANCE_WHITELIST?.split(",") ?? [];

export function middleware(request: NextRequest) {
  if (!isMaintenanceMode) {
    // メンテナンスモードでない時は、/maintenance を404にする
    if (request.nextUrl.pathname === "/maintenance") {
      request.nextUrl.pathname = "/404";
      return NextResponse.rewrite(request.nextUrl);
    }
    return;
  }

  const { pathname } = request.nextUrl;
+ const ip = getIP(request);

  // メンテナンスモードの対象かどうか
  const isMaintenanceTargetPath = !maintenanceExclusionPaths.some((path) => pathname === path);
+ const isMaintenanceTargetIP = !maintenanceWhiteListIPs.includes(ip);

- if (isMaintenanceMode && isMaintenanceTargetPath) {
+ if (isMaintenanceMode && isMaintenanceTargetPath && isMaintenanceTargetIP) {
    // 繰り返しリダイレクトを防ぐ
    if (request.nextUrl.pathname === "/maintenance") return;

    // メンテナンス画面へリダイレクト
    return NextResponse.redirect(`${process.env.NEXT_PUBLIC_APP_HOST}/maintenance`);
  }
}

+ // IPアドレスを取得する
+ function getIP(request: NextRequest) {
+   // x-forwarded-for ヘッダーからIPを取得する
+   const xff = request.headers.get("x-forwarded-for");
+ 
+   return xff ? (Array.isArray(xff) ? xff[0] : xff.split(",")[0]) : "127.0.0.1";
+ }
  • getIP()関数でIPアドレスを取得します。
  • maintenanceWhiteListIPs (メンテナンスを除外するIPアドレス配列)に、getIP() で取得されるIPアドレスが含まれていれば、リダイレクトを回避するように修正します。
最終的な middleware.ts のソースコード
middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

// メンテナンスモードの除外ページ
const maintenanceExclusionPaths = ["/"];

const isMaintenanceMode = Boolean(process.env.NEXT_PUBLIC_MAINTENANCE_MODE);
const maintenanceWhiteListIPs = process.env.NEXT_PUBLIC_MAINTENANCE_WHITELIST?.split(",") ?? [];

export function middleware(request: NextRequest) {
  if (!isMaintenanceMode) {
    // メンテナンスモードでない時は、/maintenance を404にする
    if (request.nextUrl.pathname === "/maintenance") {
      request.nextUrl.pathname = "/404";
      return NextResponse.rewrite(request.nextUrl);
    }
    return;
  }

  const { pathname } = request.nextUrl;
  const ip = getIP(request);

  // メンテナンスモードの対象かどうか
  const isMaintenanceTargetPath = !maintenanceExclusionPaths.some((path) => pathname === path);
  const isMaintenanceTargetIP = !maintenanceWhiteListIPs.includes(ip);

  if (isMaintenanceMode && isMaintenanceTargetPath && isMaintenanceTargetIP) {
    // 繰り返しリダイレクトを防ぐ
    if (request.nextUrl.pathname === "/maintenance") return;

    // メンテナンス画面へリダイレクト
    return NextResponse.redirect(`${process.env.NEXT_PUBLIC_APP_HOST}/maintenance`);
  }
}

export const config = {
  matcher: [
    // 画面遷移以外のリクエストを除外する
    "/((?!api|_next/static|_next/image|favicon.ico).*)",
  ],
};

// IPアドレスを取得する
function getIP(request: NextRequest) {
  // x-forwarded-for ヘッダーからIPを取得する
  const xff = request.headers.get("x-forwarded-for");

  return xff ? (Array.isArray(xff) ? xff[0] : xff.split(",")[0]) : "127.0.0.1";
}

以上、middlewareを用いたメンテナンスモードの導入でした。

参考

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?