[FE] 프론트엔드 배포 파이프라인 workflow 추가

[lee0jae330]

#️⃣ 변경 사항

• 프론트엔드 지속적 배포(CD)를 위한 GitHub Actions 워크플로우 추가

#️⃣ 작업 상세 내용

• GitHub Actions 기반의 프론트엔드 배포 파이프라인(.github/workflows/fe-cd.yml) 구축
  • main브랜치에 push되고, frontend 디렉토리에 변경점이 있을 경우 동작함
  • Node.js 24 및 pnpm 10 환경에서 빌드 수행 및 frozen-lockfile을 통한 의존성 설치 보안 강화
• Google Cloud Platform(GCP) 통합
  • Workload Identity Federation을 사용하여 보안이 강화된 방식(Secret Key 미사용)으로 GCP 인증 수행
  • Google Cloud Storage(GCS) 버킷(gs://checkmate-03/)에 빌드 결과물 업로드 자동화
• 배포 최적화 및 캐시 전략 수립
  • GCS 업로드 시 이전 빌드 파일 삭제 로직 포함
  • 정적 자산(assets)에 대해 브라우저 캐시 극대화를 위해 max-age=31536000, immutable 설정
  • index.html에 대해 최신 상태 유지를 위한 no-cache 정책 적용
  • Cloud CDN 캐시 무효화(Invalidation) 명령을 수행하여 즉시 배포 반영

CD 워크플로우 관련 설명

name: Frontend CD
on:
	# main 브랜치에 push && frontend 디렉토리에 변경사항이 있을 때만 실행
  push:
    branches:
      - main
    paths:
      - "frontend/**"

jobs:
  build:
	  # GCP 관련 권한 설정
    permissions:
      contents: 'read'
      id-token: 'write'
    runs-on: ubuntu-latest
    # frontend 디렉토리를 기본 디렉토리로 설정
    defaults:
      run:
        working-directory: frontend
    strategy:
      matrix:
        node-version: [24]
    steps:
	    # pnpm 설치 및 캐싱 설정
      - uses: actions/checkout@v4
      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 10
      - name: Use Node.js ${{matrix.node-version}}
        uses: actions/setup-node@v4
        with:
          node-version: ${{matrix.node-version}}
          cache: "pnpm"
          cache-dependency-path: frontend/pnpm-lock.yaml
      # pnpm-lockfile 기준으로 패키지 설치
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      - name: Build Project
        run: pnpm build

      # GCP 계정 인증 진행
      - id: 'auth'
        name: Authenticate to Google Cloud
        uses: 'google-github-actions/auth@v2'
        with:
          workload_identity_provider: 'projects/1022464522377/locations/global/workloadIdentityPools/github-actions-pool/providers/github-provider'
          service_account: 'github-actions-sa@checkmate-485008.iam.gserviceaccount.com'
          create_credentials_file: true
       # GCP cli 설치 (Github Action 환경)
      - name: Set up Cloud SDK
        uses: 'google-github-actions/setup-gcloud@v2'
       # 배포 관련 디버깅 코드
      - name: Verify Authentication
        run: |
          echo "=== Auth List ==="
          gcloud auth list
          echo "=== Current Project ==="
          gcloud config get-value project
          echo "=== Test GCS Access ==="
          gsutil ls gs://checkmate-03/ || echo "GCS access failed"
          
       # rsync: 프로젝트 빌드 파일과 GCS 버킷을 비교해서 변경사항을 변경함
       # 파일의 내용이 바뀐 경우 -> 내용 업데이트
       # 파일이 없으면 -> 삭제
       # 파일이 새로 생겼으면 -> 업로드
      - name: Deploy to GCS (Sync)
        run: |
          gsutil -m rsync -d -r ./dist gs://checkmate-03/dist
          
      # 버킷에 업로드한 파일 캐시 설정
      # 빌드 파일 -> 파일명(해시값)이 계속 달라져서 TTL을 1년으로
      # index.html -> 파일며이 안바뀌므로 캐시 설정 x
      - name: Set Cache Policies
        run: |
          gsutil -m setmeta -h "Cache-Control:public, max-age=31536000, immutable" gs://checkmate-03/dist/assets/**
          gsutil -m setmeta -h "Cache-Control:no-cache" gs://checkmate-03/dist/index.html
          
      # CDN 캐시 무효화 진행
      - name: Invalidate CDN Cache
        run: |
          # CDN 캐시 무효화 진행
          gcloud compute url-maps list --format="value(name)" | while read urlmap; do
            gcloud compute url-maps invalidate-cdn-cache $urlmap --path "/dist/*" --async
          done

#️⃣ 관련 이슈

• Closes [FE] CD 파이프라인 구축 #18
• Related to [FE] CD 파이프라인 구축 #18

📸 스크린샷 (선택)

변경 전

변경 후

📎 참고할만한 자료 (선택)

https://brownbears.tistory.com/602
https://github.com/google-github-actions/upload-cloud-storage
https://coduking.tistory.com/entry/%EA%B9%83%ED%97%88%EB%B8%8C-%EC%95%A1%EC%85%98-GCP-%EC%97%B0%EB%8F%99-%EB%B0%A9%EB%B2%95

[lee0jae330]

/gemini review

[lee0jae330]

/gemini review

[gemini-code-assist]

Code Review

코드 변경 사항 검토 결과, 웹 접근성 관련 개선 사항 1건을 제안합니다.

[gemini-code-assist]

웹 접근성 및 SEO 향상을 위해 페이지 당 하나의 <h1> 태그만 사용하는 것이 좋습니다. 이 페이지에는 이미 23번째 줄에 또 다른 <h1> 태그가 정의되어 있습니다. 문서의 의미 구조에 맞게 이 헤더나 다른 헤더의 레벨을 <h2> 등으로 조정하는 것을 고려해 보세요.

Suggested change

	<h1>Checkmate</h1>
	<h2>Checkmate</h2>

[Copilot]

Pull request overview

This PR adds a GitHub Actions-based continuous deployment (CD) pipeline for the frontend application, enabling automated deployment to Google Cloud Storage with CDN cache invalidation. The workflow uses Workload Identity Federation for secure GCP authentication and implements caching strategies for optimal asset delivery.

Changes:

• Added .github/workflows/fe-cd.yml workflow file that triggers on pushes to main branch affecting the frontend directory
• Implemented automated build and deployment process using Node.js 24 and pnpm 10
• Configured GCP integration with GCS upload, cache policies, and CDN invalidation
• Added test heading "Checkmate" to App.tsx (likely for testing the deployment pipeline)
• Minor formatting improvement in browser.ts mock setup

Reviewed changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 8 comments.

File	Description
.github/workflows/fe-cd.yml	Complete CD pipeline implementation with GCP authentication, build process, GCS deployment, cache configuration, and CDN invalidation
frontend/src/App.tsx	Added "Checkmate" heading, likely for testing deployment
frontend/src/mocks/browser.ts	Added blank line for formatting consistency
.DS_Store	macOS system file that should not be committed

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[lwjmcn]

[P5] 룩굿투미, DDoS도 막아주고~ 캐싱도 해주는~ CDN 아주 좋네요 ^^