Skip to content

Merge pull request #66 from f-lab-edu/refactoring #31

Merge pull request #66 from f-lab-edu/refactoring

Merge pull request #66 from f-lab-edu/refactoring #31

# .github/workflows/deploy-optimized.yml
name: Deploy to S3 (Optimized)
on:
push:
branches: [main]
env:
AWS_REGION: ap-northeast-2
BUILD_DIR: ./apps/watcha_clone_coding/dist
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '22.13.0'
- name: Setup pnpm
uses: pnpm/action-setup@v4
with:
version: '10.15.1'
- name: Get pnpm store directory
shell: bash
run: |
echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
- name: Setup pnpm cache
uses: actions/cache@v4
with:
path: ${{ env.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Build workspace packages
run: |
echo "=== 워크스페이스 패키지들 빌드 ==="
pnpm --filter @watcha/carousel build
# CSS 파일 복사 (TypeScript가 복사하지 않는 경우)
if [ -d "packages/carousel/src/styles" ]; then
echo "=== CSS 파일 복사 ==="
mkdir -p packages/carousel/dist/src/styles
cp -r packages/carousel/src/styles/* packages/carousel/dist/src/styles/ || echo "CSS 파일 복사 실패"
fi
- name: Run type check
run: pnpm type-check
- name: Build for production
env:
VITE_TMDB_API_KEY: ${{ secrets.VITE_TMDB_API_KEY }}
VITE_TMDB_BASE_URL: https://api.themoviedb.org/3
VITE_TMDB_IMAGE_URL: https://image.tmdb.org/t/p/w500
run: |
# ES Modules 이슈 해결을 위한 임시 조치
cd apps/watcha_clone_coding
# package.json에서 type: module 임시 제거
sed -i 's/"type": "module",//g' package.json
# 빌드 실행
pnpm build
# type: module 복원
sed -i 's/"version": "1.0.0",/"version": "1.0.0",\n "type": "module",/g' package.json
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v5
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ env.AWS_REGION }}
- name: Deploy to S3 with optimized settings
env:
S3_BUCKET: ${{ secrets.S3_BUCKET_NAME }}
run: |
# HTML 파일 업로드 - 캐시 비활성화
aws s3 sync ${{ env.BUILD_DIR }} s3://$S3_BUCKET \
--exclude "*" \
--include "*.html" \
--cache-control "max-age=0,must-revalidate,public" \
--content-type "text/html; charset=utf-8" \
--delete
# CSS 파일 업로드 - 1년 캐시
aws s3 sync ${{ env.BUILD_DIR }} s3://$S3_BUCKET \
--exclude "*" \
--include "*.css" \
--cache-control "max-age=31536000,public" \
--content-type "text/css; charset=utf-8"
# JS 파일 업로드 - 1년 캐시
aws s3 sync ${{ env.BUILD_DIR }} s3://$S3_BUCKET \
--exclude "*" \
--include "*.js" \
--cache-control "max-age=31536000,public" \
--content-type "application/javascript; charset=utf-8"
# 기타 파일들 업로드 - 1년 캐시
aws s3 sync ${{ env.BUILD_DIR }} s3://$S3_BUCKET \
--exclude "*.html" \
--exclude "*.css" \
--exclude "*.js" \
--cache-control "max-age=31536000,public"
- name: Invalidate CloudFront
env:
DISTRIBUTION_ID: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}
run: |
if [ -n "$DISTRIBUTION_ID" ]; then
echo "CloudFront 무효화 시작..."
aws cloudfront create-invalidation \
--distribution-id $DISTRIBUTION_ID \
--paths "/*.html" "/*.css" "/*.js"
echo "CloudFront 무효화 완료"
else
echo "CloudFront Distribution ID가 설정되지 않았습니다. 무효화를 건너뜁니다."
fi