Case 2 - 일반 웹 프로젝트 구조에 CI/CD 적용하기 (S3, Cloudfront)

JSCODE 박재성

2025-12-01

✅ 전체적인 흐름

✅ 1. 간단한 웹 프로젝트 생성

<h1>Hello World!</h1>

* {
  margin: 10px;
}

✅ 2. Github Repository 만들고 올리기

✅ 3. S3 셋팅, 웹 호스팅 설정

✅ 4. S3에 프로젝트 파일 업로드하기

✅ 5. Cloudfront 연결

✅ 6. Github Actions를 위한 IAM 생성

✅ 7. Github Actions Secret 값 넣어주기

✅ 8. Github Actions 코드 작성

name: Deploy To S3

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Github Repository 파일 불러오기
        uses: actions/checkout@v4

      - name: AWS Resource에 접근할 수 있게 AWS credentials 설정
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-region: ap-northeast-2
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

      - name: S3 기존 파일들 전체 삭제 후 새로 업로드
        run: |
	        aws s3 rm --recursive s3://instagram-web
		      aws s3 cp ./ s3://instagram-web/ --recursive

      - name: Cloudfront 캐시 무효화
        run: aws cloudfront create-invalidation --distribution-id {cloudfront 배포 ID} --paths "/*"