💡

Vue.jsアプリケーションをS3 + CloudFrontでデプロイ

2024/10/30に公開

AWS

Vue.js

CloudFront

tech

はじめに

キャッチアップとして推奨していただいたAWS S3とCloudFrontを使用したVue.jsのデプロイをしてみましたのでメモとして残し共有させていただきます！

前提条件

AWSアカウントを持っていること
Vue.jsプロジェクトが作成済みであること
Node.jsがインストールされていること

デプロイ手順

S3バケットの作成
AWSマネジメントコンソールからS3を選択
「バケットを作成」をクリック
バケット名を入力（例：vuetutorial）
リージョンを選択
パブリックアクセスのブロック設定を行う
Vue.jsプロジェクトのビルド

bash
プロジェクトのビルド
npm run build

distフォルダが生成される

S3バケットへのアップロード
生成されたdistフォルダの内容をS3バケットにアップロード
index.htmlが正しくアップロードされていることを確認
CloudFrontディストリビューションの作成
CloudFrontコンソールから「ディストリビューションを作成」を選択
以下の設定を行う：
オリジンドメイン：作成したS3バケットを選択
オリジンパス：/dist（重要）
オリジンアクセス：「Origin Access Control settings (recommended)」を選択
新しいOACを作成
S3バケットポリシーの設定

json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::vuetutorial/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::[ACCOUNT-ID]:distribution/[DISTRIBUTION-ID]"
                }
            }
        }
    ]
}

CloudFrontの設定確認
デフォルトルートオブジェクトをindex.htmlに設定
ディストリビューションのデプロイ完了を待つ
重要なポイント

トラブルシューティング

Access Deniedエラーが表示される場合

S3バケットポリシーが正しく設定されているか確認
CloudFrontのOAC設定が正しいか確認
オリジンパスが/distになっているか確認

デプロイ完了後の確認
CloudFrontのドメイン名（例：d1qs4d8vsioks7.cloudfront.net）にアクセスし、アプリケーションが正しく表示されることを確認します。

まとめ

S3とCloudFrontを使用したデプロイは、初回設定こそ複雑ですが、一度設定が完了すれば、その後のデプロイはnpm run buildとS3へのアップロードだけで完了します。
この構成のメリット
グローバルな高速配信
セキュアなコンテンツ配信
コスト効率の良いホスティング

参考にした記事

はじめに

前提条件

デプロイ手順

まとめ

Discussion