手っ取り早くAmplifyコンソールでメンテナンスぺージを作る

2 min read読了の目安(約2200字 3

こんにちはハトです。いままではメンテナンス時はALBの固定レスポンスでメンテナンスページを出していたが、SPA化でAmplifyを使用するに伴ってこの方法が使えなくなりました。そこでAmplifyでメンテナンスページを出す方法を考えてみました。Amplifyコンソール自体はCDの仕組みを備えているが、バックエンドがまだ手動デプロイであるなら、バックエンドのリリース作業中はフロントエンドに触れてほしくないときなどに使えると思います。

  1. S3の静的ホスティングでメンテナンスページを作成します
  2. Route53とカスタムドメインを紐付けます
  3. Amplifyコンソールで「書き換えてリダイレクト」に先程のドメインを紐付けます

こうすることで既存のurl例えばexample.comとかにアクセスすると、sorry.example.comにリダイレクトされます。

注意: 上記はhttpでのカスタムドメインまで対応します。https化したメンテナンスページを作りたいのであれば、cloundfrontをs3の前身において設定する必要があります。ここではそこまでの内容は扱いません。

S3の静的ホスティングでメンテナンスページを作成する

公式ドキュメントの内容に従って作成してください。注意点はバケット名です。Route53で利用するカスタムドメインと合わせる必要があります。例えばsorry.example.comという名前のドメインを割り当てたい場合は、バケット名もsorry.example.comという名前にする必要があります。カスタムドメインを割り当てる必要がなければどのような名前でも可能です。

そのあと、公開アクセスブロックのチェックをすべて外し、静的ホスティングの設定を有効にし、自身のメンテナンスページをindex.htmlという名前でアップロードしてください(静的ホスティングの設定もindex.htmlと一致させておく)。

そのあと、S3のウェブサイトエンドポイントからアクセスして無事メンテナンスページが表示されれば完了です。

Route53とカスタムドメインを紐付けます

公式サイトの「ドメインとサブドメインのエイリアスレコードを追加する」を参照してください(サブドメインの項目がありますが、今回はサブドメインは設定してないので無視してください)。

5分ほどすると、自身のカスタムドメインからアクセスできていると思います。

Amplifyコンソールで「書き換えてリダイレクト」に先程のドメインを紐付けます

Amplifyコンソールを開きます。左のサイドメニューから「書き換えて、リダイレクト」を選択してください。

wwwサブドメインを扱っているなら、次のような設定になっていると思います。

送信元アドレス ターゲットアドレス 入力
https://example.com|https://www.example.com 302 (Redirect - Temporary)
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> /index.html 200 (Rewrite)

こちらをメンテナンス期間中は次のように変更します。

送信元アドレス ターゲットアドレス 入力
https://example.com https://www.example.com 302 (Redirect - Temporary)
https://www.example.com/<*> https://www.example.com 200 (Rewrite)
https://www.example.com http://sorry.example.com 302 (Redirect - Temporary)
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> /index.html 200 (Rewrite)

すると、www.example.comにアクセスすると、SPAのページではなく、メンテナンスページが表示されます。

2行目の意味は、3行目だけだとwww.example.com/login でアクセスすると sorry.example.com/login となってページエラーとなるためその対策です(S3のメンテナンスページ方でリダイレクト設定して対応しても良いと思います)。www.example.com/login を一旦www.example.com に書き換えて sorry.example.com にリダイレクトしてます。

以上で終了です。