いきなりですが、適当なサブドメにアクセスすると404ページを返すようにしました。
特に理由や意味はありません。
https://hogehoge.hdserver.info/
https://higehige.hdserver.info/
構成図
404ページ自体は静的ページなので、AWS amplifyでホスティングするようにしました。
コード成果物はcodecommitに格納していて、変更が入ったら自動でデプロイする仕組み（そうそう変更は入りませんが...）
ちなcodecommit はメンテナンスモードに入っているので、今はじめるならGithubとかGitlabがええでしょうな。(Bitbucketはしらん)
作り方
１．適当な404ページを作成します。今回はcodepenからよさげなデザインのページを拝借してきました。
https://codepen.io/tag/404-page
２．codecommitにリポジトリを作成し、成果物を格納します。
３．AWS amplifyのコンソールから新しいアプリを作成します。
リポジトリはcodecommitを選択します。
４．ビルド設定は特にいじらず、そのまま進めます。
Codecommitに設置したファイルのパスが異なる場合は変更します。
５．デプロイが完了したら、カスタムドメインの設定を行います。
存在しないサブドメインを指定するため、ワイルドカードを指定します。
６．DNS設定を行います。
Route53を利用している場合は自動的にホストゾーンにレコードが追加されるので操作不要なのですが、他のDNSサービスを利用している場合は手動でCNAMEレコードを追加する必要があります。
私はCloudflareのDNSを利用しているので、必要なレコード情報を手動登録しました。
- 外部ホストゾーンに登録する内容はコンソールから表示、確認ができます。
※この設定を飛ばすとカスタムドメインでアクセスするときにSSLエラーが出ますので、必ず設定しておきましょう。
ちなみにAmplifyがデフォルトで提供しているドメインは******.amplifyapp.comになりますが、カスタムドメインだと*******.cloudfront.netのようなCloudfrontのドメインになります。
７．しばらく待っているとステータスが使用可能になります。
適当なサブドメインでアクセスすると404ページが表示されるようになります。
404 status responseを返す一工夫
デプロイしたページですが、デフォルトだとアクセスしたときのステータスは200 OKです。
レスポンスコードも404にカスタムしたいのでリライトとリダイレクトの設定を編集します。
- 設定内容
[
{
"source": "</^[^.]+$|\\.(?!(css|ico|js|fonts)$)([^.]+$)/>",
"status": "404-200",
"target": "/404.html"
}
]意外とここが躓いたんですが、公式ドキュメントのサンプルをみると"status": "404"と記述しているのですが、これだと期待した動作をしません。
期待する動作にするには"status": "404-200"と記述する必要があります。
ちなみに旧コンソールでは、RewriteかRedirectかはプルダウンで選択できたようなのですが、今は完全に記述式に変わってます。
しかも書き方の説明も詳しく書いてないし、情報もあんまり落ちてないのでトラシューに苦労しました。あんまり使う人いないのかな...
なおファイル名を404.htmlにしたのは、デフォルトルートオブジェクトがindex.htmlで設定してあるっぽいので、そのままアクセスすると200 OKが返されてしまうからです。（index.htmlはおかない）
そのため、もし404.htmlに直接アクセスされた場合、返されるステータスは200 OKになってしまいます。
が、まぁそこまで気にしなくてよいでしょう💩
このへん応用してメンテナンスページとか作れそうだな？と思ったのですが、Amplifyのカスタムステータスで5XX系のステータスコードは対応していないみたいなので、その場合はCloudfront＋S3構成になるかも。
（メンテナンスページは503でレスポンス返したいわよね、みんな）
おわり
不用意にアクセスポイントを増やすことで、ランダムサブドメイン攻撃とかデータリクエストが増えるだけなんで、あんまり真似しないほうがよいでしょうな（コスト的な意味合いで）
おまけ
terraformのコードもつくってみた。