概要
備忘録として、Vue.jsで作成した静的サイトをS3にアップロードし、CloudFrontを利用してHTTPSで配信する手順を記載する。ACM（AWS Certificate Manager）でSSL/TLS証明書を取得し、独自ドメインを適用する方法についても残す。
前提条件
- Vue.jsのプロジェクトがすでにビルド済みであること（
dist/ディレクトリが存在する）
1. Route 53で独自ドメインを取得
1.1 ドメインの取得
- AWSマネジメントコンソールで Route 53 を開く
- 「ドメインを登録」をクリックし、希望の独自ドメイン（例:
example.com）を検索 - 取得可能であれば購入し、登録を完了する
1.2 ホストゾーンの作成
- Route 53の「ホストゾーン」を開き、「ホストゾーンの作成」をクリック
- 取得したドメイン（
example.com）を入力し、作成 - 作成されたホストゾーンのNSレコードを確認し、ドメインレジストラの設定と一致させる
2. S3にVueのリソースをアップロード
2.1 S3バケットの作成
- AWSマネジメントコンソールで S3 を開く
- 「バケットを作成」をクリックし、以下の設定でバケットを作成する
-
バケット名:
example-bucket（任意の名前） -
リージョン:
us-east-1（ACMの証明書と合わせるため推奨。東京でもOK） - パブリックアクセスをすべてブロック: オフ（後でCloudFrontを経由するため）
-
静的ウェブサイトホスティング: 有効（CloudFrontを使用するため、インデックスドキュメントを
index.htmlに設定）
-
バケット名:
2.2 Vueリソースのアップロード
ローカルでVueプロジェクトの dist/ ディレクトリをS3にアップロードする。
aws s3 sync ./dist s3://example-bucket --acl public-read
3. ACMでSSL/TLS証明書を取得
3.1 ACMの証明書をリクエスト
- AWSマネジメントコンソールで ACM（AWS Certificate Manager） を開く
- 「証明書のリクエスト」をクリック
-
パブリック証明書 を選択し、独自ドメイン（例:
www.example.com）を入力 - 検証方法は DNS検証 を選択
- Route 53でDNSレコードを作成し、検証を完了させる
4. CloudFrontの設定
4.1 ディストリビューションの作成
- AWSマネジメントコンソールで CloudFront を開く
- 「ディストリビューションを作成」をクリック
- オリジンドメイン に作成したS3バケットを指定
-
プロトコル:
Redirect HTTP to HTTPS -
代替ドメイン名（CNAME） に
www.example.comを追加 - ACMで取得した証明書 を選択
- 設定を保存し、CloudFrontディストリビューションを作成
⚠️ 注意: 代替ドメイン名（CNAME）を設定しないと、CloudFrontで独自ドメインを利用できず、HTTPS証明書エラーが発生する。
5. Route 53でDNS設定
5.1 Aレコードの追加（エイリアス有効）
- AWSマネジメントコンソールで Route 53 を開く
- 該当するホストゾーンを選択
-
新しいレコードを作成 し、以下の設定を追加
-
名前:
www.example.com - タイプ: A
- エイリアス: 有効
- ターゲット: CloudFrontのディストリビューション（例:abcdefg.cloudfront.net.）
-
名前:
5.2 ホストゾーンのNSレコードを確認
取得したドメインのNS（ネームサーバー）と、Route 53のホストゾーンのNSが一致しているかを確認する。
⚠️ 注意: NSレコードが一致しないと、DNSが正しく機能せずCloudFrontにアクセスできない。
6. 動作確認
- ブラウザで
https://www.example.comにアクセス - Vueのサイトが正しく表示されることを確認
まとめ
本記事では、S3にVueのリソースをアップロードし、CloudFrontを利用してHTTPSで配信する手順を説明した。特に以下の2点が重要である。
-
CloudFrontの代替ドメイン名（CNAME）を正しく設定すること
- 設定しないとHTTPS証明書の適用ができず、独自ドメインでアクセスできない
-
Route 53のホストゾーンのNS設定を確認すること
- 取得したドメインのNSと一致していないと、DNSが機能せずCloudFrontにアクセスできない