8日目です！昨日、書き忘れましたが１週間経ちました！
ということで（どういうこと？）、アクセス時のエラーページをカスタムエラーページにします。
通常は、指定したファイルがない場合などには、以下のような XML が HTTP403 とともにかえってきます。
<?xml version="1.0" encoding="UTF-8"?>
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>****************</RequestId>
<HostId>/**********/******************************</HostId>
</Error>
これを変えてみます。
8日目の要約
アクセスエラー時の表示ページをカスタムページにします。
AWS CLI の準備
このあたりをみて、好きなバージョンとお使いのOSにあった環境設定をしてくださいね。
なんなら、 AWS CloudShell で実行するのも楽でよいと思います。
この記事シリーズは、AWS CloudShell で実行し、実行例を載せています。
バージョン１
https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-cliv1.html
バージョン２
https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-cliv2.html
概要
CloudFront のエラーページの設定を変更して、カスタムエラーページを返すようにするよ！
さあ、やってみよう！
エラーページを作る
カスタムエラーページ用の HTML ファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<head>
<title>えらーです m9('ω')</title>
</head>
<body>
<h1>残念〜！</h1>
<h2>アクセスできませーん！</h2>
</body>
</html>
・・・煽ってますねぇ。。。
作成できたら、 s3 cp コマンドで S3 バケットにアップロードしておきます。
aws s3 cp error.html s3://<バケット名>
CloudFront の設定変更を準備する
やはり、基本的には、6日目で実施したものと似た内容です。
- cloudfront get-distribution-config コマンドで現状の設定を取得する
- ETag の値を確認する
- 取得した json ファイルに対して、設定変更を加える
- cloudfront update-distribution コマンドを実行して更新する
この記事では、3と4についてのみ記載します。１と２の実施内容については、6日目の記事をご確認ください。
取得した json ファイルに対して設定変更を加える
CustomErrorResponses 内にある、 "Quantity": 0 を削除します。
この削除箇所に関しては、たんに「設定がゼロ個ですよ」という意味の行です。
"CustomErrorResponses": {
"Quantity": 0 <--- この行だけ削除
},
削除した場所に、以下を貼り付けます。
オリジンへアクセスした際、 HTTP403(Access Denied)が返ってきたら error.html を返す設定です。
"Quantity": 1,
"Items": [
{
"ErrorCode": 403,
"ResponsePagePath": "/error.html",
"ResponseCode": "403",
"ErrorCachingMinTTL": 10
}
]
cloudfront update-distribution コマンドを実行して更新する
準備ができたら、6日目と同様に cloudfront update-distribution コマンドを実行して、設定変更を行います。
aws cloudfront update-distribution --id <CloudFront Distribution ID> ¥
--cli-input-json file://distribution_error.json ¥
--if-match 確認したETag の値
コマンド実行に成功すると、Distribution の内容が記された json が返されます。
やはり長いので割愛します。
動作確認
確実に存在しない URL を指定して curl コマンドを実行します。
curl https://<ドメイン名>/naiyo.html
CloudFront 側でデプロイが完了していれば、以下のように指定したカスタムエラーページが返ってきます。
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<head>
<title>えらーです m9('ω')</title>
</head>
<body>
<h1>残念〜！</h1>
<h2>アクセスできませーん！</h2>
</body>
</html>
まとめ
これまではパス誤りなどで、XML が返ってきてしまっていましたが、カスタムエラーページを返すようにしたことでWeb サイトの統一感ある表示に繋げられると思います。
次回は少し、セキュリティ設定を見直したり導入したりしようと思います。
- 今回使ったコマンド
- s3 cp
- (cloudfront get-distribution-config)
- cloudfront update-distribution