はじめに
株式会社エイチームコマーステックの @hytkgami です。
ソフトウェアエンジニアとして、モバイル、Web フロントエンド、バックエンドなど広く開発に携わっています。
この記事はAteam Commerce Tech Inc. Advent Calendar 2021の 22 日目の記事です。
データベースメンテナンスやAPIのメンテナンスに伴い、アプリケーションへのアクセスを一時的に遮断したいケースがあると思います。
今回は、VercelでホスティングしているNext.jsアプリケーションにメンテナンスモードを実装する方法を書きます。
要約
- メンテナンスページを用意する
- メンテナンスページにリダイレクトする処理を作る
- フラグを用意し、フラグがONのときにリダイレクトさせる
環境
- node
v14.18.1 - npm
6.14.15 - next
12.0.7
実装
メンテナンスページを用意する
まずは、メンテナンスモード中にユーザに表示する画面を用意します。
/public/maintenance.htmlとしてプロジェクトに配置します。
<html lang="ja">
<head>
<title>My Awesome Service | メンテナンス中</title>
<style>
body {
box-sizing: border-box;
}
.root {
padding: 1rem;
}
</style>
<meta name="robots" content="noindex,nofollow" />
<meta name="googlebot" content="noindex,nofollow" />
</head>
<body>
<div class="root">
<h1>メンテナンス中です</h1>
<p>
ご迷惑をおかけしますが、現在メンテナンス中のためサービスをご利用いただけません。<br />
サービス再開までしばらくお待ちください。
</p>
</div>
</body>
</html>
必要に応じて画像を配置するとユーザのストレスを緩和できるかもしれません。
サービスのブランドに合わせて対応しましょう。
メンテナンスページにリダイレクトする処理を作る
サイトへのアクセスを、すべてメンテナンスページへリダイレクトさせます。
Next.jsのドキュメントに従い、設定ファイルを編集します。
/** @type {import('next').NextConfig} */
module.exports = {
reactStrictMode: true,
-}
+ async redirects() {
+ return [
+ {
+ source: "/((?!maintenance.html$).*$)",
+ destination: "/maintenance.html",
+ permanent: false,
+ },
+ ];
+ },
+};
/maintenance.html以外へのアクセスが、すべて/maintenance.htmlにリダイレクトされるようになりました。
フラグを用意し、フラグがONのときにリダイレクトさせる
ここまでの作業で、サービスへのすべてのアクセスがメンテナンスページにリダイレクトされるようになりました。
しかし、このままではメンテナンス中ではない時もメンテナンスページにしかアクセスできません。そこでフラグを実装します。
まず、環境変数を用意します。
プロジェクトルートで.env.developmentというファイルを作成します。
MAINTENANCE_MODE=false
さらに、先ほど編集したnext.config.jsで環境変数を読み込むようにします。
module.exports = {
reactStrictMode: true,
async redirects() {
- return [
- {
- source: "/((?!maintenance.html$).*$)",
- destination: "/maintenance.html",
- permanent: false,
- },
- ];
+ return process.env.MAINTENANCE_MODE === "true"
+ ? [
+ {
+ source: "/((?!maintenance.html$).*$)",
+ destination: "/maintenance.html",
+ permanent: false,
+ },
+ ]
+ : [];
},
};
環境変数MAINTENANCE_MODEがtrueの場合にメンテナンスページへのリダイレクト処理を行い、そうでない場合は何も設定を渡しません。
こうすることで、メンテナンスモードがONのときにリダイレクトをかける、といった要件を実現できます。
環境変数 MAINTENANCE_MODE に渡している true や false は文字列として解釈されます。
フラグがOFFのときにメンテナンスページにアクセスさせない
ついでに、フラグがOFFのときの挙動も定義します。
先ほどの例では、
そうでない場合は何も設定を渡しません。
と書きました。
その部分にリダイレクト設定を渡します。
/maintenance.htmlへのアクセス時に/にリダイレクトさせる処理を渡しましょう。
permanent: false,
},
]
- : [];
+ : [
+ {
+ source: "/maintenance.html",
+ destination: "/",
+ permanent: false,
+ },
+ ];
},
};
おわりに
ここまでで、Next.jsのアプリケーションにメンテナンスモードを入れることができました。
環境変数を渡しているため、メンテナンスモードに切り替えるためには再度デプロイが必要な点にご注意ください。
Ateam Commerce Tech Inc. Advent Calendar 2021の次回の記事は、@kazzzzzz による「Hasura&Nextjsで快適な開発環境を構築〜プロダクション環境構築編〜」です。お楽しみに 🕺