[Git] GitHub Actions 자동 배포

포트폴리오 정적파일을 S3에 배포했다. 

관련내용은 링크에서 확인할 수 있다. 

 

[AWS] S3 + CloudFront + Route53으로 정적 파일 HTTPS 배포하기

 

포트폴리오는 수정이 잦기 때문에,

매번 수동으로 업로드하지 않고 GitHub에 push만 하면 S3에 자동으로 배포되도록 구성한다. 

---

1. IAM 사용자 생성

나의 경우 IAM 사용자가 이미 생성되어있었다. 

권한에 아래 정책을 연결해준다. 

• AmazonS3FullAccess
• CloudFrontFullAccess

발급받은 AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY 를 확인한다. 

 

2. GitHub Repository에 Secrets 등록

비밀 키(AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY) 는 꼭 GitHub Secrets에 등록해서 사용해야한다.

• GitHub 저장소 → Settings → Secrets and variables > Actions > New repository secret 버튼 클릭
  • AWS_ACCESS_KEY_ID: IAM에서 받은 Access Key
  • AWS_SECRET_ACCESS_KEY: IAM에서 받은 Secret Key
  • AWS_REGION: 예: ap-northeast-2
  • S3_BUCKET: 예: my-portfolio-bucket
  • CLOUDFRONT_DISTRIBUTION_ID: 내 CloudFront ID

 

3. GitHub Actions 워크플로우 파일 생성

.github/workflows/deploy.yml 파일을 만들어 아래 내용을 넣음

 

name: Deploy to S3 and Invalidate CloudFront

on:
  push:
    branches:
      - main # 또는 배포에 사용하는 브랜치

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v3
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      - name: Create dist directory
        run: |
          # dist 폴더 생성
          mkdir -p dist/css dist/images
        
      - name: Copy files to dist directory
        run: |
          # 필요한 파일들을 dist 폴더로 복사
          cp index.html dist/
          cp -r css/* dist/css/
          cp -r images/* dist/images/

      - name: Upload to S3
        run: |
          aws s3 sync ./dist s3://${{ secrets.S3_BUCKET }} --delete

      - name: Invalidate CloudFront cache
        run: |
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
            --paths "/*"

 

구조는 아래와 같다. 

• 트리거: main 브랜치에 push 이벤트 발생 시
• 환경: Ubuntu 가상 머신에서 실행
  • - name : GitHub Actions 워크플로우에서 각 단계(step)의 이름을 정의하는 부분. GitHub Actions의 실행 로그에 표시됨
• dist 라는 배포 전용 파일을 생성 후 배포할 정적 파일들(index.html, css/, images/) 을 모두 dist 폴더로 복사한다. 
• dist 폴더 내의 파일들을 S3에 업로드 하고, CloudFront 캐시 무효화처리 해준다. 
  • -- delete 옵션 : 완전 동기화를 도움. S3 내에 있고 로컬에는 없는 파일들을 삭제해주는 역할
  • /* 경로 지정 -> 모든 경로에 대해 캐시를 무효화해줌

 

4. 배포 테스트

이제 main 브랜치에 push 하면:

• dist 폴더 기준으로
• S3에 업로드되고
• CloudFront 캐시가 무효화돼서
• 자동 배포 완료

 

Github Action 탭에서 - name 으로 지정한 각 단계 별로 순차적으로 잘 실행된 것을 확인할 수 있다. 

이제는 main 브랜치에 push만 하면 자동으로 S3에 파일이 업로드되어 배포 완료된다.