AWS

独自ドメイン+CloudFront+S3で静的ファイルホスティングサービスの作り方

この記事では、独自ドメインからCloudFront経由でS3にアクセスする静的ファイルホスティングサービスの作り方について解説します。

サービスアーキテクト

以下の図が今回説明するサービスの設計になります。

  • お名前.comでホスティング用のドメイン名を登録する
  • Route53でお名前.comで登録したドメインの名前解決を行い、CloudFrontにアクセスする
  • CloudFrontからS3にアクセスする
  • S3のホスティングURLには直接アクセスはできないようにする

S3のバケットを作成する

AWSコンソールにアクセスし、「S3」から「Create Bucket」でバケットを作成します。

以下は詳細の設定です。(その他はデフォルトで大丈夫です)

  • ACLsはdisabledにする
  • Block Public Access SettingsはBlock all public accessにする

バケットにファイルを追加する

静的ホスティングしたいファイルをバケットに追加します。

 

CloudFrontを作成する

次にCloudFrontを作成し、割り当てられたドメインからS3にアクセスできるようにします。

コンソールで「CloudFront」から「Create distribution」で新規作成します。

以下が詳細の設定です。(その他はデフォルトで大丈夫です)

  • Origin domainには作成したS3バケットのドメインを指定する
  • Origin AccessではLegacy access identitiesを指定する
    • Origin access identityは「Create New OAI」で新規作成したものを指定する
    • Bucket Policyは「Yes, update the bucket policy」を指定する

作成したら、デプロイが完了するまで少し時間がかかるので待ちます。

ルートアクセスでindex.htmlを表示するように関数を作成する

作成したDistribution Domain(d2xxxxx.cloudfront.net)にアクセスを試みてみると、AccessDeniedとなります。

正しくはd2xxxx.cloudfront.net/index.htmlとしてアクセスしないと表示されないようです。

これはちょっと不格好なので、index.htmlの指定なしでアクセスできるようにします。

サイドバーの「Functions」から関数を新たに作成します。

関数は以下のように「/」へアクエスしたら「index.html」を追加する処理にします。

1
2
3
4
5
6
7
8
9
10
function handler(event) {
    var request = event.request;
    var uri = request.uri;
 
    // Check whether the URI is missing a file name.
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    }
    return request;
}

作成したら、「Publish」から関数を発行します。

作成したDIstrubutionの「Behavior」から「Edit」で次のように作成した関数を割り当てます。

 

動作確認

ここまでで動作確認をします。

  • CloudFrontのDistribution Domain(d2xxxxxx.cloudfront.net)へのアクセス→index.htmlが表示される
  • S3のバケットURL(xxxx.s3.xxxx.amazonaws.com)へのアクセス→AccessDeniedとなる

お名前.comでドメインを作成する

次は独自ドメインでCloudFrontにアクセスできるための設定をしていきます。

まずはお名前.comでドメインを作成します。

Route53でも作成は可能なのですが、お名前.comの方が安い(多分)のでそっちで作るのが良いと思います。

Route53でホストゾーンとNSレコードを作成し、お名前.comの方に割り当てる

次にお名前.comで登録したドメインをRoute53で名前解決をするために、Route53を設定します。

まずはホストゾーンを作成します。

  • Domain Nameにはお名前.comで登録したドメイン名を指定します
  • その他はデフォルトで大丈夫です

ホストゾーンを作成したらNSレコードが作成されていますので、これをお名前.comのDNS設定に割り当てます。

お名前.comのサイドバーの「ネームサーバーの変更」から作成したドメインを選択し、「他のネームサーバを利用」のタブでネームサーバーを入力します。

Route53の最後の「.(ピリオド)」は不要なのでそこは省きます。

動作確認

お名前.comで作成したドメインがRoute53で名前解決されているかの確認はdigコマンドで行います。

次のようにNSレコードが割り当てられているかを調べます。

正しく設定されている場合、ANSWER SECTIONに4つのNSレコードが登録されているのを確認できるでしょう。

独自ドメインに証明書をACM(AWS Certificate Manager)で割り当てる

CloudFrontに割り当てた独自ドメインはHTTPSアクセスが必須になっています。

そのため、証明書をACMで作成します。

コンソールで「ACM」にアクセスし、「Request certificate」から作成します。

  • Fully qualified domain nameにはお名前.comで作成したドメイン名を指定します
  • それ以外はデフォルトで大丈夫です

作成した証明書を選択するとステータスが「Pending Validation」となっているため、「Create records in Route 53」でRoute53にDNS検証用のCNAMEレコードを作成します。

CNAMEレコードを作成しても検証できるまでには、結構時間がかかりますのでしばらく待ちます。

正しく適用できているかはdigコマンドで確認できます。

CloudFrontでAlternate domain nameとCustom SSL Certificateを設定する

次はCloudFrontで作成したDistrubutionの代替ドメイン名とSSL証明書を設定します。

  • Alternate domain nameにお名前.comで作成したドメイン名を指定します
  • Custom SSL certificateにACMで作成した証明書を指定します
  • それ以外はデフォルトで大丈夫です

Route53でCloudFrontに繋げるためのAレコードを作成する

最後にRoute53でCloudFrontに繋げるためのAレコードを作成します。

Route53でのAレコードはIPアドレスだけではなく、AWSのリソースのエイリアスを指定することができます。

以下のようにRoute53にアクセスし、「Create Record」からCloudFront向けのAレコードを作成します。

  • Record TypeはAレコードを指定します
  • AliasスイッチをONにします
  • Route traffic toをAlias to Cloudfront distributionを指定します
  • CloudFrontのDistributionに作成したものを指定します

動作確認

これで独自ドメインからS3へ保存した静的ファイルへのアクセスが可能となりました。

 

まとめ

今回はS3にホスティングした静的ファイルへ独自ドメインからアクセスできるための手順を紹介しました。

S3、CloudFront、ACM、Route53など色々なサービスを組み合わせる必要があるので複雑な部分もありますが参考になれば幸いです。

-AWS

© 2023 Shiro's secret base