メンテナンスモードをVercel Edge Configから取得するように変更

.gitignore

@@ -29,6 +29,7 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+.env*.local
 
 # vercel
 .vercel

README.md

@@ -25,7 +25,7 @@ NEXT_PUBLIC_APP_ENV=local
 NEXT_PUBLIC_APP_URL=本アプリケーションのURL、ローカルの場合は http://localhost:2222
 NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=GTM-から始まるGoogle Tag ManagerのIDを指定
 NEXT_PUBLIC_LGTMEOW_BFF_URL=https://github.com/nekochans/lgtm-cat-bff が稼働しているURLを指定
-IS_IN_MAINTENANCE=0
+EDGE_CONFIG=Vercel Edge ConfigのURL（Vercel上の値を参照）
 ```
 
 以下の環境変数はテストコード実行時や Build 時に参照されるので [direnv](https://github.com/direnv/direnv) を使って `.envrc` を配置するのが良いです。
@@ -99,7 +99,28 @@ asdf local nodejs 18.12.1
 
 ## メンテナンスモードについて
 
-`IS_IN_MAINTENANCE` が `1` の場合はメンテナンスページを強制的に表示します。
+[Vercel Edge Config](https://vercel.com/docs/storage/edge-config) を利用してメンテナンスモードを実現しています。
+
+以下から Vercel Edge Config を編集可能です。
+
+https://vercel.com/nekochans/lgtm-cat-frontend/stores
+
+それぞれ以下のように対応しています。
+
+- `lgtm-cat-frontend-store` （本番用）
+- `stg-lgtm-cat-frontend-store` （ローカルを含む開発、ステージング用）
+
+<img width="1416" alt="VercelEdgeConfig" src="https://github.com/nekochans/lgtm-cat-frontend/assets/11032365/7cf65e37-9009-4a79-b039-8f9353ec5c54">
+
+メンテナンスモードに移行する為には `isInMaintenance` を `true` に変更します。
+
+編集後は「Save」を押下するか `Command + s` で保存しないと反映されません。
+
+<img width="1415" alt="VercelEdgeConfigEdit" src="https://github.com/nekochans/lgtm-cat-frontend/assets/11032365/e61c7ff4-ded5-4e42-9ce9-0be2abb371bc">
+
+メンテナンスモードになると全てのページでメンテナンス中を示すエラーページが表示されます。
+
+<img width="887" alt="isInMaintenance" src="https://github.com/nekochans/lgtm-cat-frontend/assets/11032365/0350f584-8876-4df7-833d-fdcf0dda99cd">
 
 ## 開発でよく使うコマンド
 

package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@nekochans/lgtm-cat-ui": "^3.0.2",
     "@sentry/nextjs": "^7.91.0",
+    "@vercel/edge-config": "^0.4.1",
     "lodash.throttle": "^4.1.1",
     "next": "^14.0.4",
     "react": "^18.2.0",

src/edge/maintenance.ts

@@ -1,2 +1,7 @@
-export const isInMaintenance = (): boolean =>
-  process.env.IS_IN_MAINTENANCE === '1';
+import { get } from '@vercel/edge-config';
+
+export const isInMaintenance = async (): Promise<boolean> => {
+  const isInMaintenanceMode = await get<boolean>('isInMaintenance');
+
+  return isInMaintenanceMode === true;
+};

src/middleware.ts

@@ -9,7 +9,7 @@ export const config = {
   matcher: ['/', '/upload', '/terms', '/privacy', '/maintenance'],
 };
 
-export const middleware: NextMiddleware = (req: NextRequest) => {
+export const middleware: NextMiddleware = async (req: NextRequest) => {
   const { nextUrl } = req;
 
   if (isBanCountry(req)) {
@@ -18,7 +18,8 @@ export const middleware: NextMiddleware = (req: NextRequest) => {
     return NextResponse.rewrite(nextUrl);
   }
 
-  if (isInMaintenance()) {
+  const isInMaintenanceMode = await isInMaintenance();
+  if (isInMaintenanceMode) {
     nextUrl.pathname = '/maintenance';
 
     return NextResponse.rewrite(nextUrl);