RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

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

始めに

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

要件

今回の要件は下記です。

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

構成について

AWSの利用サービス

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

構成図

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

構成図

実際の設定手順

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

S3設定

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

1. バケット作成

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

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. ディストリビューションを作成

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

2.ポリシー設定

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

3.接続確認

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

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

Route53 設定

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

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

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

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

  • 完全修飾ドメイン名: 任意
  • 他の設定: デフォルト
2. CNAME登録

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

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

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

3. ルーティング設定

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

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.確認作業

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

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 あたりを触りたいと思います。
最後まで読んでいただきありがとうございました。
皆さまの参考になれば幸いです。

Copyright © RAKUS Co., Ltd. All rights reserved.