【AWS】CloudFrontを用いてサーバーレスSPAを独自ドメインで公開する

Vue.jsによるサーバーレスSPAをCloudFront(AWSのCDNサービス)を用いて、独自ドメインで公開する方法です。

※必要最低限しか書いてないので、後日追加するかもしれません。
※2019/7/29 画像＆一部説明を追加しました。

※ここではこれらには(あまり)触れません

最低限、下記のことが必要になります(多分)。

※下記事項は、別記事で触れる予定

Vue.jsサービスのデプロイ用S3バケットをパブリックに公開して、Webホスティングする必要があります。
手順は下記のとおりです。

Vue.jsサービスデプロイ用のS3バケットを作成する
[プロパティ]タブ - [Static Website Hosting]で、
- 「このバケットを使用してウェブサイトをホストする」を選択する。
- 「インデックスドキュメント」に「index.html」を指定する。
[アクセス権限]タブ - [アクセスコントロールリスト]で、
- 「Everyone」の「オブジェクトの一覧」を許可する。

f:id:Makky12:20190729173019p:plain
f:id:Makky12:20190729173046p:plain
f:id:Makky12:20190729173059p:plain

独自ドメイン(≒CNAME)で公開するには、先にそのドメインのSSL証明書の発行が必要です。
手順は以下の通りです。

「Certificate Manager」にて、「証明書のプロビショニング」の「今すぐ始める」をクリック。
「証明書のリクエスト」で、「パブリック証明書のリクエスト」を選択。
「ドメイン名の追加」で、ドメイン名を入力。
- ワイルドカード指定も可能なので、例えば「*.makky12.com」みたいな指定もできる。
「検証方法の選択」では「DNS検証」と「Eメール検証」、いずれかを選択。
- 画面に記載があるが、「DNS 設定を変更するアクセス許可」があるならDNS検証、ないならEメール認証を選択。
- AWS的には、権限があるならDNS検証を推奨している。
「証明書」画面で「状況」が「認証完了」になればOK。

※なお、SSL証明書は必ず「リージョン：北バージニア(us-east-1)」で作成しないとCloudFront設定できないので注意！！！

f:id:Makky12:20190729174113p:plain

で、やってCloudFrontの設定になります。やり方ですが、まず「CloudFront」で「Create Distribution」-「[Web]のGet Started」をクリックします。

設定画面での設定値は、下表を参照。

項目名	設定値	説明	備考
Original Domain Name	S3バケットのＷebホスティング」でWebホスティングをしたバケット名	CloudFrontで制御を行うAWSリソース	これを選ぶと「Origin ID」が自動で設定される
Viewer Protocol Policy	Redirect HTTP to HTTPS	ブラウザなどからアクセスされた際に適用するプロトコル	厳密には何でもよいが、セキュリティを考えると、HTTPは避けたほうが。
Object Caching	Customoize	キャッシュの設定	個別設定を適用するならCustomize
TTL関連の3つ(Maximum, Minimum,Default)	すべて0	キャッシュの保存期間(秒)	1以上だと、デプロイしたコンテンツの反映に時間がかかる(らしい)
Alternate Domain Names(CNAMES)	公開するドメイン名	ここで設定したデストリビューションの別名	証明書で証明を受けないと、設定できない
SSL Certificate	「Custom SSL Certificate」を選択し、「SSL証明書の発行」で作成したSSL証明書を選択	使用するSSL証明書名	証明書を「北バージニア」で作成しないと、ここでリストに表示されない。
Default Root Object	index.html	デフォルトで表示するコンテンツ名	Vue.jsの場合、ルートのindex.htmlを表示する(はず)

で、「Create Distribution」をクリックし、該当のデストリビューションの「Status」が「Deployed」になればOK。
ただし5～15分程度かかるので、気長に待ちましょう。(In Progressの場合、デプロイ処理中です。)

また、以下の設定もデプロイ処理中に行っておきます。