手っ取り早くAmplifyコンソールでメンテナンスぺージを作る
こんにちはハトです。いままではメンテナンス時はALBの固定レスポンスでメンテナンスページを出していたが、SPA化でAmplifyを使用するに伴ってこの方法が使えなくなりました。そこでAmplifyでメンテナンスページを出す方法を考えてみました。Amplifyコンソール自体はCDの仕組みを備えているが、バックエンドがまだ手動デプロイであるなら、バックエンドのリリース作業中はフロントエンドに触れてほしくないときなどに使えると思います。
- S3の静的ホスティングでメンテナンスページを作成します
- Route53とカスタムドメインを紐付けます
- 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) | |
| `</[1]+$ | .(?!(css | gif | ico |
こちらをメンテナンス期間中は次のように変更します。
| 送信元アドレス | ターゲットアドレス | 入力 | 国 |
|---|---|---|---|
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) | |
| `</[2]+$ | .(?!(css | gif | ico |
すると、www.example.comにアクセスすると、SPAのページではなく、メンテナンスページが表示されます。
２行目の意味は、3行目だけだとwww.example.com/login でアクセスすると sorry.example.com/login となってページエラーとなるためその対策です(S3のメンテナンスページ方でリダイレクト設定して対応しても良いと思います)。www.example.com/login を一旦www.example.com に書き換えて sorry.example.com にリダイレクトしてます。
以上で終了です。
追記(2021/12/28)
今確認したら、メンテナンス期間中のリダイレクト設定がうまく動いていなかったみたいでした。次のように変更して動作確認しています。
Amplifyの設定
| 送信元アドレス | ターゲットアドレス | 入力 | 国 |
|---|---|---|---|
https://www.example.com |
http://sorry.example.com |
302 (Redirect - Temporary) | |
| `</[3]+$ | .(?!(css | gif | ico |
S3のリダイレクト設定
[
{
"Condition": {
"HttpErrorCodeReturnedEquals": "404"
},
"Redirect": {
"HostName": "sorry.club-trape.com",
"ReplaceKeyPrefixWith": "#!/"
}
}
]
S3の設定は、例えば上記amplifyの設定だけだと、https://example.com/hogehoge が https://sorry.example.com/hogehogeにリダイレクトされてしまい、404エラーがでるため、その対処です。
Discussion
追記
間違って、301(Permanent) リダイレクトにすると、chromeブラウザがそれをキャッシュして、リダイレクト設定をamplifyで消しても有効になり続けます。決して間違えないようにしましょう。
追記
google chromeの最近の仕様なのか、s3だけ(sslを導入してなくhttpでしかアクセスできない)でデプロイすると、アドレス叩いてもなぜか表示されない。httpオンリーのサイトは完全シャットアウトされたのかも？？？？
仕方なく、cloudfrontをはさんでhttps化しました。
リリース作業が終わったあと、メンテナンスページに残り続けている人のために、メンテナンスページに元のページに戻るためのリダイレクト設定をすることができます。S3のwebホスティングの設定画面でリダイレクトオプションを設定するだけです。すると、メンテナンスページをリロードすると本番ページにリダイレクトされるようになります。
もし、リダイレクトされない場合は、cloudfrontを利用している場合、キャッシュが有効になっている可能性があります。cloudfrontにいき、invalidationsタブから、キャッシュを一旦削除してください。