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 ファイルを作成します。

error.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 側でデプロイが完了していれば、以下のように指定したカスタムエラーページが返ってきます。