React 프로젝트에 Github Actions + AWS IAM로 CI/CD 구축하는 방법

CI/CD와 관련된 요소들의 개념과 작동 과정

• CI/CD
  • 내가 수동으로 commit하고 push하고 build하고 deploy했던걸 자동화하는 것이다.
• CI/CD 환경을 구축하는 이유
  • 코드의 수정이 일어날 때마다 S3의 파일들을 바꿔주고 클라우드 프론트에 가서 캐쉬 무효화 작업을 해주는 귀찮은 과정을 반복하지 않기 위해 CI/CD 환경을 구축하는 것
• CI/CD의 작동과정

            Github Actions는 현업에서도 많이 쓰이고 무료로 사용할 수 있고,

            빌드용 서버가 따로 필요없기 때문에 CI/CD 구축할 때 자주 쓰인다.

            Github ActionsJenkins는 빌드용 서버를 따로 구축해야하기 때문에 패쓰~ 자세한 차이점은 추후 알아보기

           

            즉 Github Actions는 빌드와 배포 로직을 실행시킬 수 있는 일종의 컴퓨터라고 생각하면 된다.

            

Github Actions를 사용한 CI/CD의 아키텍처와 흐름

             1.코드 작성 후 Commit

 

             2.Github에 Push

 

             3.Push를 감지해서

            Github Actions에 작성한 로직이 실행

                          a.빌드

                          b.테스트

                          c.서버로 배포

                          b.테스트4.서버에서 배포된 최신 코드로 서버를 재실행

 

             4.서버에서 배포된 최신 코드로 서버를 재실행

 

# Workflow
name: Github Actions 실행시켜보기

on:
  push:
    branches:
      - main

# Workflow는 여러개의 job으로 이루어질 수 있고
jobs:
  #jobs밑 이름은 아무거나 설정해도 됨
  deploy:
    runs-on: ubuntu-latest
    # 하나의 job은 여러개의 step으로 이루어질 수 있다
    steps:
      - name: Hello World 출력하기
        run: echo "Hello World"

      - name: 여러 명령어 문장 작성하기
        #  | 을 이용해 여러 명령어 문장을 작성할 수 있다. pwd는 경로표시 명령어
        run: |
          echo "Good"
          echo "Morning"
          pwd

      - name: Github Actions 자체 저장되어 있는 변수 사용해보기
        run: |
          echo $Github_REPOSITIORY
          echo $Github_SHA
          echo ${{ secrets.MY_HOBBY }}
          echo ${{ secrets.MY_NAME }}

.github 폴더를 생성 후 그 안에 workflows 폴더를 생성 후 deploy.yml 파일을 생성 후 위의 코드를 쳐준다

(git push 를 해서 main branch에 코드가 업데이트 될 때마다 자동화를 시켜준다는 의미이다)

 

 github action은 일종의 컴퓨터라고 생각하면 된다고 위에서 말했습니다.

그래서 ubuntu LTS를 쓰겠다고 설정한겁니다.

 

echo는 리눅스에서 쓰는 console.log 같은 역할

즉 메인이라는 브렌치에 푸쉬가 되면 echo 부분을 실행시켜줘 라는 코드 의미이다

 

마지막 $부분은 Github에 비밀키가 노출되면 안되기 때문에

이런식으로 변수명으로 호출해 비밀키 노출을 막는다.

---

 

IAM

Github Action은 외부 프로그램이기 때문에 사용하려면 출입증을 받아야 하기 때문에 

AWS의 IAM 서비스를 사용한다.

 

외부에 있는 사람이 S3에 접근해야해서 해당 권한 체크

 

Cloud Front에도 캐시 무효화를 명령해야 함으로 해당 권한 체크

 

사용자 생성 클릭

생성되면 생성된 것을 누르고 보안자격증명 클릭

다음 누르고 설명칸은 건너뛰기 해 엑세스 키를 생성하면 된다

엑세스 키의 비밀키는 외부에 노출하면 안되니 잘 저장해서 갖고있는다~!

 

---

깃허브로 돌아와서 키 값을 넣어줘야 합니다.

 

NAME은 변수명 Secret은 비밀키 값을 넣으면 비밀키 값은 안 보이게된다.

저는 AWS 엑세스 키와 키값을 넣어줬습니다.

 

---

 

이제 배포 자동화를 할 프로젝트 VisualCode 폴더로 돌아온다

 

.github 폴더를 생성 후 그 안에 workflows 폴더를 생성 후 deploy.yml 파일을 생성 후 아래 코드를 쳐준다.

# Workflow
name: Github Actions 실행

on:
  push:
    branches:
      - master

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

      - name: 의존성 설치
        run: npm i

      - name: Repository 파일 확인해보려고 출력하기
        run: ls

      - name: 빌드하기
        run: npm run build

      - name: Debugging
        run: |
          ls
          echo "---------------"
          cd build
          ls

      - name: AWS Resource에 접근할 수 있게 AWS 인증 설정
        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 기존 파일들 전체 삭제 # //뒤에 S3 버킷명 적기
        run: aws s3 rm --recursive s3://dogsnackinfo

      - name: S3에 빌드된 파일 업로드하기
        run: aws s3 cp ./build s3://dogsnackinfo/ --recursive

      - name: Cloudfront 캐시 무효화
        run:
          aws cloudfront create-invalidation --distribution-id E27HZ~~~~~
          --paths "/*"

 

저는 build 폴더로 설정했는데

VITE 쓰신분은 꼭 dist로 변경해서 올려야합니다!!!

++ main인지 master인지 확인하시고 변경 부탁드립니다.

++ S3 기존 파일들 전체삭제 부분 // 뒤에 자신의 S3 버킷명을 입력하셔야합니다!

++ S3에 빌드된 파일 업로드하기 부분 // 뒤에 자신의 S3 버킷명을 입력하셔야합니다!

++ Cloudfront 캐시 무효화 부분 id 뒤에 자신의 Cloudfront id를 입력하셔야합니다!

 

 

uses 에 쓴 기능들 궁금하면 아래 링크 들어가서 검색하셔서 문서 읽어보시기 바랍니다!

https://github.com/marketplace

 

 

 

이제 다 끝났으니

add commit 하고 main이나 master로 push하면 자동으로 배포가 되는 것을 확인할 수 있습니다.

실수로 S3 빌드된 파일 업로드하기를 두 번 적었네요 ㅎㅎ^^ 코드는 이미 수정했으니 넘어가주세요!

 

 

 

정상 배포가 되었으니 확인 용도로 작성한 코드를 지워주겠습니다 ( 선택사항입니다 )

# Workflow
name: Github Actions 실행

on:
  push:
    branches:
      - master

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

      - name: 의존성 설치
        run: npm i

      - name: 빌드하기
        run: npm run build

      - name: AWS Resource에 접근할 수 있게 AWS 인증 설정
        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://dogsnackinfo

      - name: S3에 빌드된 파일 업로드하기
        run: aws s3 cp ./build s3://dogsnackinfo/ --recursive

      - name: Cloudfront 캐시 무효화
        run:
          aws cloudfront create-invalidation --distribution-id E27HZBOHMBCFR2
          --paths "/*"

 

 

이제 CI/CD 설정 끝끝~!!