S3配信に独自ドメイン設定

S3配信に独自ドメイン設定

July 29, 2020
AWS
AWS, S3, Route53, CloudFront

お名前.comで取得した独自ドメインでS3コンテンツを配信する。

構成 # 

[Client] -(1.DNS問合せ)-> [お名前.com] -(移譲)-> [Route 53]
  |  ^                                            |
  |  |                                            |
  |  `-----------(2.CloudFrontのIPアドレス)----------'
  |
  `-(3.Request)-> [CloutFront] -(Request)-> [S3]

前提 #

  • 配信したい S3 の Bucket 設定が完了している

Route 53 で新規に Hosted zone を作成 #

Route 53 > Hosted zones を開き Create hosted zone 押下。

Domain name に取得したドメインを入力。 Type は Public hosted zone を選択して Create hosted zone 押下。

詳細が表示されるので、 Name servers の4レコードをチェック。これをお名前.com側の設定に入力する（任意のネームサーバーとして入力することでDNS名前解決が移譲されるということ）。

ACM で HTTPS 用の証明書作成 #

CloudFront Distribution の作成ページから遷移して作成できるので CloudFront > Distributions を開き Create Distribution 押下。

CloudFront で配信する証明書はバージニアリージョンの ACM で発行する必要がある。 CloudFront Distribution 作成画面からだとリージョン切り替えて遷移してくれる。

画面中程に SSL Certificate セクションがあるので Request or Import a Certificate with ACM 押下。

Domain name に *.codeemall.info のようにサブドメイン部分にアスタリスクを入力。こうするとワイルドカード証明書が発行できる。

作成した直後は Validation status が Pending validation となり保留中となっている。これは DNS の所有をチェックするためのプロセスで、記載の CNAME レコードをドメインに追加することで通過する。今回のドメインは Route 53 に登録済みなので、 Create record in Route 53 押下することで AWS 側で良しなにやってくれる。押下。

しばらくすると Status が Issued となる。これで証明書の作成は完了。

CloudFront Distribution を作成 #

改めて CloudFront > Distributions を開き Create Distribution 押下。

Origin Domain Name を選択すると S3 Bucket が選択可能なのでそれを選択。

Viewer Protocol Policy で HTTP から HTTPS のリダイレクト設定を入れる。あと Cache Policy でキャッシュをしないポリシーを選択。

Alternate Domain Names に配信したいサブドメインを入力。 SSL Certificate を Custom SSL Certificate 選択して先ほど作成した証明書を指定。

作成すると Distribution のデプロイが行われるので Status が Deployed になれば完了。 Domain Name が CloudFront の DNS なのでこれをブラウザで開いて確認できる。

サブドメインを Route 53 に登録 #

Route 53 > Hosted zones > 作成した Hosted zone を選択。 Create record を押下し、 www.codeemall.info に対する CloudFront へのルーティングを登録する。

Routing policy は Simple routing で。

Recode name が www.codeemall.info となるように入力。 Value/Route traffic to に CloudFront のリソースを選択すればいいが、何故かバージニアリージョンしか選択できず、リソース名のサジェストもヒットしない。とりあえず先ほど作成した CloudFront の DNS を入力すればよい。

これで作成完了したので念の為 nslookup しておく。

$ nslookup www.codeemall.info
Server:		127.0.0.1
Address:	127.0.0.1#53

Non-authoritative answer:
Name:	www.codeemall.info
Address: 13.249.171.66
Name:	www.codeemall.info
Address: 13.249.171.115
Name:	www.codeemall.info
Address: 13.249.171.13
Name:	www.codeemall.info
Address: 13.249.171.36

CloudFront と同じ IP アドレスが引けている。大丈夫っぽい。以下 URL にブラウザからアクセスして無事 Web ページが閲覧できました。

https://www.codeemall.info/index.html

index.html 見えない問題 #

URL に明示的に index.html を書かないとページがうまく参照できない。これは CloudFront の設定で Default Root Object を設定することでルートアクセス (e.g. https://www.codeemall.info/ ) のみは解決できるが、ルート以外のフォルダパスだと解決できない（なお S3 の Static website hosting 単体だと解決できている）。

解決策としては CloudFront の Origins で Origin Domain Name and Path に S3 の Static website hosting の DNS を指定するという方法がある。

ただしこの方法だと「S3 へのアクセスを CloudFront のみに制限する」ということができない（Static website hosting が有効のままなので）。

  • アクセス範囲的に今回の Bucket は許容する
  • フォルダアクセスとなるリンクは生成しない（これは Site Generator をなんとかする話）

上記あたりを踏まえて設定を考えたい。