VueアプリをS3 + CloudFrontにデプロイするシェルスクリプト

概要

Vueの静的コンテンツをS3にアップロードし、CloudFrontで配信する環境において、ローカルで変更を加えた際にスムーズにデプロイできるようにする

環境

• S3: Vueの静的コンテンツを格納
• CloudFront: S3のコンテンツをキャッシュし、高速配信
• AWS CLI: デプロイスクリプトで使用
• Vue: npm run build で静的ファイルを生成

デプロイの流れ

1. Vueプロジェクトをビルド
2. S3にアップロード
3. CloudFrontキャッシュを無効化

デプロイスクリプト

以下のシェルスクリプトを作成し、ローカルからデプロイできるようにする

deploy.sh

#!/bin/bash

# 設定
S3_BUCKET="your-s3-bucket-name"
DISTRIBUTION_ID="your-cloudfront-distribution-id"

# Vueプロジェクトのビルド
echo "Building Vue project..."
npm run build

# VueのリソースをS3へアップロード（dynmapフォルダは削除しない）
echo "Uploading Vue files to S3..."
aws s3 sync dist/ s3://$S3_BUCKET --delete --exclude "削除から除外したいディレクトリ"

# CloudFrontキャッシュ無効化
echo "Invalidating CloudFront cache..."
aws cloudfront create-invalidation --distribution-id $DISTRIBUTION_ID --paths "/*"

echo "Deployment completed!"

実行方法

1. deploy.sh に実行権限を付与

   chmod +x deploy.sh
   

2. スクリプトを実行

   ./deploy.sh
   

• aws s3 sync は増分アップロードを行うため、無駄なデータ転送が発生しない
• aws cloudfront create-invalidation でキャッシュを即時無効化することで、最新のコンテンツを配信可能