[AWS]フォーム付き静的コンテンツを独自SSL/独自ドメインで公開するまで③-CloudFront編 #AWS

お問い合わせフォーム付きWeサイトを

S3で
Slack通知ありで
独自ドメインで(お名前.comよりCNAMEを利用)
独自SSLで（https/SNIベース）

公開するまでの備忘録
どこにでもやり方やリンクは転がってますが個人的にまとめます。

前回まででサイトは出来上がったので、
今回は独自ドメインからアクセスできるように
CloudFrontを使って通信をHTTPSにしましょう。

ちなみに前提として
すでにお名前.comでドメインを持っているとして
そのサブドメインを扱うとします（ニッチ）

流れは、
SSLをアップロードしたIAMを作成
CloudFrontに配信を行うS3のエンドポイントとSSLを持ったIAMを設定
お名前.comよりCNAMEで設定するドメインからCloudFrontにリダイレクトするようにCNAMEを設定

各リンクは以下

技術要件

AWS
- S3
- aws-cli
- Cognito
- Lambda
- aws-sdk
- CloudFront<-今回はここ
dnsまわり<-今回はここ

SSLのアップロード

aws-cliを使います。

AWS CLI を使えるようにしてみよう

aws-cliでアップロード

なぜかcliでしかSSLをIAMにアップロードできないので、CLIで行います。

作業をする環境に以下のような各ファイルがあるとします。

SSL 秘密鍵…server.key
SSL 証明書…server.crt
SSL 中間証明書…chain.crt

以下のコマンドを実行でIAMにアップされます。

aws iam upload-server-certificate
    --server-certificate-name example.ssl
    --path /cloudfront/
    --private-key file://server.key
    --certificate-body file://server.crt
    --certificate-chain file://chain.crt

--server-certificate-name ：IAMの名前、分かりやす物で
--path /cloudfront/：ここはcloudfrontで
--private-key file://server.key：各ファイルを指定
--certificate-body file://server.crt
--certificate-chain file://chain.crt

CloudFront

Distributionの作成

Amazon Management Consoleより「CloudFront」を選択
「Create Distribution」でDistributionを作成します。

Webを選択

ここの「Origin Dmain Name」に静的コンテンツを置いている
S3のエンドポイントURLを入力します。
例：http://example.co.jp.new.s3-website-ap-northeast-1.amazonaws.com/service.html

このあたりはお好みで。

Alternate Domain Names ：ここにお名前.comで取得したドメインを記入
SSL Certificate ：Custom SSL Certificateを選択。先ほどアップロードしたSSLのIAMを選択
Custom SSL Client Supprt ：「Only Clients that Support Server Name Indication(SNI)」を選択

SNIベースの方が安い+申請に時間がかかりません

これで「Create Distribution」を押せばCloudFrontの設定は終了。
しばらく「in progress」で機能しませんが20分ほど待てば「Deployed」になります。

この「Domain Name」をお名前.comのCNAMEに使います。

お名前.com

CNAMEの設定

http://coderdojo-nishinomiya.info/aws-s3-cname/
上記サイトを参考に、S3のエンドポイントURLになっている箇所を
先ほど作成したDistributionのURLにするだけで終わりです。

終了

DNSの更新が終了すればS3の内容がCloudFront越しにHTTPSで配信されています（ﾊｽﾞ

お疲れまでした。