概要

備忘録として、Vue.jsで作成した静的サイトをS3にアップロードし、CloudFrontを利用してHTTPSで配信する手順を記載する。ACM（AWS Certificate Manager）でSSL/TLS証明書を取得し、独自ドメインを適用する方法についても残す。

前提条件

AWSマネジメントコンソールで S3 を開く
「バケットを作成」をクリックし、以下の設定でバケットを作成する
- バケット名: example-bucket（任意の名前）
- リージョン: us-east-1（ACMの証明書と合わせるため推奨。東京でもOK）
- パブリックアクセスをすべてブロック: オフ（後でCloudFrontを経由するため）
- 静的ウェブサイトホスティング: 有効（CloudFrontを使用するため、インデックスドキュメントを index.html に設定）

ローカルでVueプロジェクトの dist/ ディレクトリをS3にアップロードする。

aws s3 sync ./dist s3://example-bucket --acl public-read

⚠️ 注意: 代替ドメイン名（CNAME）を設定しないと、CloudFrontで独自ドメインを利用できず、HTTPS証明書エラーが発生する。

AWSマネジメントコンソールで Route 53 を開く
該当するホストゾーンを選択
新しいレコードを作成 し、以下の設定を追加
- 名前: www.example.com
- タイプ: A
- エイリアス: 有効
- ターゲット: CloudFrontのディストリビューション（例:abcdefg.cloudfront.net.）

取得したドメインのNS（ネームサーバー）と、Route 53のホストゾーンのNSが一致しているかを確認する。

⚠️ 注意: NSレコードが一致しないと、DNSが正しく機能せずCloudFrontにアクセスできない。

本記事では、S3にVueのリソースをアップロードし、CloudFrontを利用してHTTPSで配信する手順を説明した。特に以下の2点が重要である。

CloudFrontの代替ドメイン名（CNAME）を正しく設定すること
- 設定しないとHTTPS証明書の適用ができず、独自ドメインでアクセスできない
Route 53のホストゾーンのNS設定を確認すること
- 取得したドメインのNSと一致していないと、DNSが機能せずCloudFrontにアクセスできない