先日バックエンドのHTTP化を勉強したので、フロントエンドも改めて設定しました。
フロントエンドのHTTPS化は以前も一度行なってはいたのですが、まだ深くは理解できていなかったので繰り返し勉強してちょっとずつ理解を深めたいと思います。
こちらの動画を参考にしました。
以下作業内容を箇条書きでまとめます。
ドメイン取得
今回はお名前ドットコムで「pictures-app.work」というドメインを取得しました。
S3でVueアプリケーション公開
自分が取得したドメイン名と同じ名前(pictures-app.work)でS3バケットを作成
S3バケットを公開するためにBlock all public accessのチェックマークを外しsave changesをクリック
Edit Bucket Policyでポリシーをアクセス可能に変更
公開用のポリシーは以下の内容になる
{
"Version":"2012-10-17",
"Statement":[{
"Sid":"PublicReadForGetBucketObjects",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::自分のS3バケット名/*"
]
}
]
}
S3のマネジメントコンソールのプロパティタブからStatic website hostingの設定を行う
Static website hostingをEnableにし、Index documentとError documentをindex.htmlに設定
S3のマネジメントコンソールでPublicly accessibleが表示されていることを確認(Publicly accessibleがなかったら設定忘れてるところないか確認する)
プロパティの画面にBucket website endpointが表示されていて、アクセスするとアプリケーションにアクセスできる
Route 53で自分が取得したドメイン名と同じ名前でHosted Zoneを作成
Route 53でホストゾーンが作成されネームサーバーも登録されている
Route 53以外でドメインを取得している場合はRoute 53のネームサーバーとドメインを紐づけるよう設定する
ネームサーバーの設定はターミナルからdig ドメイン名 NS +shortで確認できる(ネームサーバーの変更を行なった直後なのでまだお名前ドットコムのネームサーバーと紐づいているっぽい)
少し時間が経つとAWSのネームサーバーに変わっていました
次にRoute 53にAレコードを追加して、S3のバケットを指定するためIPアドレスではなくAliasでS3バケットを選択する(ドメイン名と同じバケット名のものしか選べないっぽい。なのでS3バケット名はドメイン名と同じにする必要があるかと)
上記設定でRecord setを作成し、しばらくすると自分のドメインでサイトにアクセスできる
Certificate Managerの設定
※後から気づいたのですが、CloudFrontでACMの証明書を選択するにはus-east-1(バージニア北部)リージョンで証明書を作成する必要がありました。
Certificate ManagerのマネジメントコンソールからRequest Certificateをクリック
Step 1: Add domain namesの画面で自分のドメインを入力しNextをクリック
Step 2: Select Validation MethodでDNS Validationを選択しNextをクリック
Step 3: Add tagsは任意で入力しStep 4: Reviewの画面で設定に問題ないことを確認する
Step 5: Validationの画面でCreate record in Route 53をクリック
Validationが成功することを確認
しばらくするとCertificatesの画面でもIssuedになっていて、CNAMEが発行されている
CNAMEのドメインの前についている文字列をコピーする
Route 53でCNAMEがRecord setに自動で追加されている
CloudFrontの設定
CloudFrontの画面でCreate Distributionをクリック
Step 1: Select delivery methodはwebを選択する
Step 2: Create distributionのOrigin Domain NameでS3バケットなど選択候補に出るが、ここをクリックしてはいけないようで
S3のマネジメントコンソールからStatic website hostingのエンドポイントのhttp://以下をコピーして
そのままCloudFrontのOrigin Domain Nameに貼り付ける(ここらへんの仕組みはよくわかっていないので後から詳しく調べたい)
CloudFrontでは上記のOrigin Domain Nameの他にViewer Protocol PolicyとAlternate Domain Names(CNAMEs)とSSL Certificateの設定を変更する(それ以外はとりあえずデフォルトでOK)
Default Cache Behavior SettingsのViewer Protocol PolicyをRedirect HTTP to HTTPSに設定
Distribution SettingのAlternate Domain Names(CNAMEs)に自分のドメインを入力する
SSL CertificateでCustom SSL Certificateから自分のドメインを選択する(us-east-1以外のリージョンでCertificate Managerの証明書を作成した場合はここでドメインが選択できないので注意)
上記の設定完了後Create Distributionをクリックして、CloudFrontのステータスがIn Progressになっていることを確認する
CloudFrontのステータスがDeployedになったらCloudFrontのDomain NameでブラウザにアクセスしHTTPS通信できていることを確認する
Route 53でAレコードのAiiasに先ほど作成したCloudFrontディストリビューションを設定する
