始めに
弊社では、数行と画像1枚の静的ページを表示させるためだけ に、1台サーバーを構築し保守運用してました。
それだけのために、1台のサーバーを保守運用するの馬鹿らしくね??????
\\\うん!馬鹿らしい///
ということで、AWS上に移行すること となりました にしました。
今回は、S3とCloudFrontを利用して静的ページを表示させる設定をご紹介させていただきます。
初歩的な内容となりますので、これから静的ページを作りたいんだけど!といった方向けの内容となります。
要件
今回の要件は下記です。
- 弊社のドメインが利用可能
- HTTPレスポンスコード(501 や 503 番台等) が任意のものに変更が可能
- https 通信で静的ページが表示可能
- 弊社のシステム側からのFWの許可設定を追加の必要がない
構成について
AWSの利用サービス
構成図
構成は下記を想定しています。
実際の設定手順
それでは早速設定手順に入らせていただきます。
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 証明書設定
該当のディストリビューションの設定を下記のように変更します。
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.確認作業
下記のコマンド実施します。
curl -I https://ドメイン名/index.html
結果(一部抜粋)
HTTP/1.1 503 test mode Content-Type: text/html Content-Length: 143 Connection: keep-alive
おわりに
S3を静的ページで採用されることは結構あるかと思います。
ドメイン や レスポンス内容の制約により、利用されることを断念するケースもあるかもしれません。
CloudFront functionは非常に便利で色々なことができますので、よろしければ掘ってみてもおもしろいかもしれません。
次は、署名付き URL と署名付き Cookie あたりを触りたいと思います。
最後まで読んでいただきありがとうございました。
皆さまの参考になれば幸いです。