S3に静的ページを独自ドメインを利用してホスティングする

始めに

弊社では、数行と画像１枚の静的ページを表示させるためだけ に、1台サーバーを構築し保守運用してました。
それだけのために、1台のサーバーを保守運用するの馬鹿らしくね？？？？？？
＼＼＼うん！馬鹿らしい／／／
ということで、AWS上に移行すること ~~となりました~~ にしました。
今回は、S3とCloudFrontを利用して静的ページを表示させる設定をご紹介させていただきます。
初歩的な内容となりますので、これから静的ページを作りたいんだけど！といった方向けの内容となります。

始めに
要件
構成について
- AWSの利用サービス
- 構成図
実際の設定手順
おわりに

要件

今回の要件は下記です。

弊社のドメインが利用可能
HTTPレスポンスコード(501 や 503 番台等) が任意のものに変更が可能
https 通信で静的ページが表示可能
弊社のシステム側からのFWの許可設定を追加の必要がない

構成について

AWSの利用サービス

Route53 : 独自ドメインを登録するために利用
CloudFront : 独自ドメインの利用及びレスポンスコードを任意のものに変更するために利用
S3 : 静的ファイル(HTML) を配置

構成図

構成は下記を想定しています。

構成図

実際の設定手順

それでは早速設定手順に入らせていただきます。

S3設定

静的ページを保存するためだけに利用しております。
本番サービスで稼働する際には、ログ保存の設定や権限の設定などが色々かかわってきますが、
今回は最低限の設定だけとなります。

1. バケット作成

下記の設定手順でバケットを設定する

バケット名: rakus-tset
他の設定: デフォルト

2. indexファイルのアップロード

下記のファイルを作成したバケットに保存します。

index.html

<!DOCTYPE html>
<html lang="ja">
 <head>
 <title>hello rakus!</title>
 </head>
 <body>
 <h1>hello rakus!</h1>
 </body>
</html>

CloudFront設定

独自ドメインの利用及びレスポンスコードを任意のものに変更するために利用します。
まずは、独自ドメインを利用せずにhttp通信が可能なところまで設定します。

1. ディストリビューションを作成

ディストリビューションは下記のように設定します。

オリジンドメイン : 作成したS3 を選択
オリジンアクセス : Origin access control settings (recommended)
Origin access control : コントロール設定を作成
※デフォルトで作成
ウェブアプリケーションファイアウォール (WAF):保護しない
料金クラス : 北米と欧州のみを使用
IPv6 : オフ
他の設定: デフォルト

2.ポリシー設定

該当オリジンのページに戻った際に下記のようにでているため、作成したS3のバケットポリシーにコピペで設定をします。

3.接続確認

ここまでで下記にアクセスできるようになったため、確認します。

https://ディストリビューションドメイン名/index.html

Route53 設定

DNSにCNAME やルーティングの設定を行います。
この設定を行うことで、CloudFront と独自ドメインが紐づき、独自ドメインでのhttps通信を行えるようになります。

1. カスタム SSL 証明書発行

こちらもCloudFrontの画面から設定します。

該当のディストリビューションの設定からカスタム SSL 証明書の配下にある [証明書をリクエスト] を押下します。
設定画面の通りに進んでいきます。
下記の通りで設定していきます。

完全修飾ドメイン名: 任意
他の設定: デフォルト

2. CNAME登録

登録後下記のようにでるため、証明書の表示を押下します。

その後、Route 53 でレコードを作成を押下してRoute53に登録します。

検証が終わるまで待機します。

3. ルーティング設定

Route53 のサーバーへアクセスし、該当ホストゾーンに遷移し、下記の設定を登録します。

レコード名: 設定したドメイン名
レコードタイプ : A
エイリアス : はい
トラフィックのルーティング先 : 作成したディストリビューションを選択

4.カスタム SSL 証明書設定

該当のディストリビューションの設定を下記のように変更します。

代替ドメイン名 (CNAME) : 先ほど登録したCNAME
カスタム SSL 証明書 : カスタム SSL 証明書発行で作成したもの

5.確認作業

下記のコマンド実施します。

curl -I https://ドメイン名/index.html

現状では、レスポンスコードが200番で返ってきます。

HTTPレスポンスの変更

httpレスポンスを400番台や500番台で返したいため、そちらの内容を設定していきます
Viewer Response Eventで　HTTPレスポンスコードを書き換えます

1. Cloud Front関数

Cloud Frontの関数項目より下記を作成します。

名前: 任意
説明: 任意
説明: 開発コードは下記 ※レスポンスコードが200だった場合 503 番台に変更するようなものとなっております。

function handler(event) {
    var response = event.response;
    var contentType = response.headers['content-type'].value;
        
    if (response && response.statusCode === 200) {
        response.statusCode = 503;
        response.statusDescription = 'test mode';
    }

    return response;
}

発行タブより発行を行います。

2. Cloud Front紐づけ

作成したディストリビューションの画面からビヘイビアを編集します。
関数の関連付けを下記のように設定してください。

ビューワーレスポンス: CloudFront function 先ほど作成した関数を指定

3.確認作業