[AWS] Github Actions로 AWS CI/CD 적용하기

1. CI/CD

CI/CD란?

CI/CD는 Continuous Integration(지속적 통합)과 Continuous Deployment(또는 Delivery, 지속적 배포)의 줄임말이다.

쉽게 말하면, 테스트(Test), 통합(Merge), 배포(Deploy) 과정을 자동화하는 개발 방식을 의미한다.

 

CI는 개발자가 변경한 코드를 지속적으로 통합하고 자동으로 테스트하며,

CD는 테스트를 통과한 코드를 자동으로 운영 환경에 배포하는 과정을 뜻한다.

 

이러한 자동화는 개발 효율을 높이고, 오류를 빠르게 발견하여 더 안정적인 서비스를 제공할 수 있게 한다.

CI/CD 환경을 구축하는 이유

CI/CD 환경을 구축하는 이유는 코드 변경 시 자동 빌드, 테스트, 배포를 통해 오류를 조기에 발견하고,

일관된 배포와 빠른 피드백을 가능하게 하기 위함이다.

CI/CD의 작동 과정

1. 개발자가 코드를 원격 저장소에 푸시하면,
2. CI 서버가 변경 사항을 감지하여 빌드 및 테스트를 수행하고,
3. 테스트를 통과하면 자동으로 지정된 환경(예: S3, EC2 등)에 배포된다.

 

2. 정적 사이트(S3 + CloudFront) 배포에 자주 쓰이는 CI/CD 도구들

도구	특징
GitHub Actions	GitHub과 통합되어 설정이 간편하고 빠름. 개인·소규모 프로젝트에 많이 사용
Jenkins	자체 서버에 설치, 커스터마이징 유리. 엔터프라이즈 환경에서 많이 사용
GitLab CI	GitLab 사용 시 자연스럽게 연동 가능
CircleCI	설정이 간결하고 빠름. 퍼포먼스 높은 팀에 선호
Bitbucket Pipelines	Bitbucket 기반 프로젝트에서 사용
AWS CodePipeline	AWS 생태계 통합에 강점. IAM과 연동해 완전 자동화 가능

• GitHub 기반 프로젝트 → GitHub Actions가 가장 흔하게 사용됨 (S3 배포 포함)
• 사내 인프라 운영 중 → Jenkins나 AWS CodePipeline을 사용하는 경우도 많음
• 대규모 DevOps 체계 → Terraform + CodePipeline + S3 + CloudFront + ECS 등 확장 구조도 사용

 

3. Github Actions

Github Actions란?

Github Actions는 GitHub에서 제공하는 자동화 워크플로우 도구로,

YAML 형식의 설정 파일을 통해 코드 푸시, PR, 이슈 생성 등의 이벤트에 반응하여 빌드, 테스트, 배포 작업을 자동 실행할 수 있다.

 

Github Actions CI/CD 흐름

1. 코드 작성 후 Commit
2. Github에 Push
3. Push를 감지해서 Github Actions에 작성한 로직이 실행
   1. 빌드(Build) 
   2. 테스트(Test)
   3. 서버로 배포(Deploy)
4. 서버에서 배포된 최신 코드로 서버를 재실행(CloudFront 캐시 무효화)

 

4. Github Action 기본 문법 정리

name: Github Actions 실행시켜보기

# 이 워크플로우는 main 브랜치에 푸시될 때마다 실행
on:
  push:
    branches:
      - main

ubuntu-latest 환경에서 실행되는 단일 Job 설정

My-deploy-job이라는 이름의 Job 안에서 간단한 Hello World 메시지를 출력하는 테스트 step을 수행

 

 

commint, push후 github 레파지토리에서 Action탭에서 실행되고있는것이 확인가능

 

Jobs 설정

jobs:
  My-deploy-job:
    # ubuntu-latest: 최신 우분투 버전에서 실행
    runs-on: ubuntu-latest

    # jobs 안에 steps가 들어감
    steps:
      - name: Hello World
        run: echo "Hello, World!"

ubuntu-latest 환경에서 실행되는 단일 Job 설정

My-deploy-job이라는 이름의 Job 안에서 간단한 Hello World 메시지를 출력하는 테스트 step을 수행

 

명령어 여러줄 작성

      - name: 여러 명령어 문장 작성하기
        run: |
          echo "Good"
          echo "Morning"
          pwd 

 

 

Secret 변수 사용

      - name: Github Actions Secret 변수 사용해보기
        run: |
          echo ${{ secrets.MY_SECRET }}
          echo ${{ secrets.MY_HOBBY }}

 

아무런결과가 나오지 않음

왜냐면 해당변수에 값을 지정하지 않았기때문에

 

 

https://github.com/[githubID]/[repositoryName]/settings/secrets/actions

레파지토리 - Settings - Secrets and variables - Action - New repository secret

환경변수는 위에서 설정가능한듯

 

 

secret 변수 만들고 다시 git actions push

사실...! 보안때문에 출력되지 않음.

.env에 있는 값을 쓸때 사용한다.

 

Github Actions 전체 구조 확인하기

 

 

5. React 프로젝트에 CICD 적용하기(S3, CloudFront)

이런 순서로 CI/CD가 이루어질 것임.

IAM (Identity and Access Management)?

AM은 AWS의 인증 및 권한 관리 서비스로,

S3, CloudFront 등 각 서비스에 대해 세밀한 권한을 가진 사용자 또는 역할을 설정하여

CI/CD 도구가 안전하게 리소스에 접근할 수 있도록 한다.

 

IAM 설정하기&Github Secret 추가

 

액세스관리-사용자-사용자 생성

 

 

사용자이름을 입력 - 다음

 

 

AmazonS3FullAccess, CloudFrontFullAccess 정책을 검색하여 추가(선택) - 다음

(외부(깃헙액션)에서 캐시무효화, 웹페이지 최신 동기화를 하기 위해서 필요)

사용자 설정사항 확인 - 사용자 생성

 

 

생성된 사용자 링크 클릭 - 보안 자격 증명 - 액세스 키 - 액세스 키 만들기

 

 

 

AWS 외부에서 실행되는 애플리케이션 선택 - 다음

 

 

액세스 키 만들기

 

액세스 키와 비밀 액세스 키 저장 - 완료

 

 

다시 깃헙 세팅에서 시크릿 추가

(레파지토리 - Settings - Secrets and variables - Action - New repository secret)

AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY로 생성

 

 

Github 저장소 파일 불러오기

name: Deploy To S3 And Invalidate CloudFront

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Github Repository 파일 불러오기
        # 라이브러리 actions/checkout@v4를 사용하여 GitHub 저장소의 파일을 불러옵니다.
        uses: actions/checkout@v4

      - name: Repository 파일 목록 출력
        # 불러온 파일 목록을 출력합니다.
        run: ls -la

Github 파일 불러와짐

 

의존성 설치&빌드&빌드확인

      - name: 의존성 설치
        run: npm install
        
      - name: 빌드하기
        run: npm run build

      - name: debugging
        run: |
          ls
          cd dist
          ls

dist 폴더도 생기고, 빌드 잘된것 확인가능

 

 

AWS 자격증명 & S3 기존파일 전체 삭제

      # AWS 리소스에 접근하기 위해 AWS 자격 증명을 설정
      - name: AWS Resource
        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://facebook-web-page3
          aws s3 ls s3://facebook-web-page3

삭제 잘됨!

 

S3에 빌드된 파일 업로드

      - name: S3에 빌드된 파일 업로드
        run: aws s3 cp ./dist s3://facebook-web-page3/ --recursive 

 

CloudFront 캐시 무효화

      - name: CloudFront 캐시 무효화
        run: |
          aws cloudfront create-invalidation --distribution-id E38X7E0K14AMD4 --paths "/*"
        # E38X7E0K14AMD4는 CloudFront 배포 ID로, 실제 배포 ID로 변경해야 합니다.

CF 캐시 무효화해서 CF에도 잘 반영된것을 볼 수 있다!

 

6. 비용 나가지 않게, 사용한 AWS 서비스들 정리하기

버킷 → 파일 삭제, 버킷 다 삭제

CF → 비활성화, 삭제

IAM → 안쓰는거 보안을 위해 삭제

계정→ 청구 및 결제 → 청구서 → 어디서 비용이 나갔는지 확인할 수 있음

 

혹시 AWS키가 노출돼서 큰비용이 청구 되었을 때,

실수로 나간것이 확인이 되면 AWS에 환불 요청을 하는 방법이 있다.