[React] Github Action으로 Typescript + React 프로젝트 CI/CD 구축하기 (with S3, CloudFront)

안녕하세요 오늘은 CI/CD를 구축하는 방법을 알아보겠습니다! Github Action을 이용하여 개발하였습니다.

이 글은 다음 블로그들을 참고하였습니다.

 

 https://blog.doitreviews.com/development/2021-08-13-react-automatic-deploy/ 

2021-08-13 Github Action을 이용한 Front 배포 자동화

 

https://velog.io/@eomttt/Github-Actions%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-CICD-%EA%B5%AC%EC%B6%95-Github-Actions-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-React-app-build-Upload-S3#github-secrets-%EC%84%A4%EC%A0%95

Github Actions를 이용한 클라이언트 CI/CD 구축 - Github Actions 사용해서 React app build, Upload S3

---

먼저 CI를 작업해보겠습니다.

( 제가 개발했던 CI에선 테스트 과정이 포함되지 않은 점 양해 부탁드립니다. )

1. .env 파일을 github secrets에 올려줍니다.

2. 개발하고 있는 프로젝트 폴더에 있는 github 폴더에 workflows라는 폴더를 만든 후 CI.yml을 추가합니다. 그 후 코드를 작성합니다.

name: Dotori Client CI

on:
  pull_request:
    branches: [ master, develop ]

jobs:

  build:
    runs-on: ubuntu-latest

    steps:
    - name: Create .env             # .env 파일 설정
      run: |
        touch .env
        echo "${{secrets.ENV}}" >> .env

    - name: Checkout source code.   # Repo checkout
      uses: actions/checkout@v2
      
    - name: Check Node v            # Node v 확인
      run: node -v

    - name: Install Dependencies    # 의존 파일 설치
      run: |
        yarn install
        yarn install --frozen-lockfile

    - name: Build                   # React Build
      run: 
        CI=false yarn run build

    - name: Client CI Success Discord Notification
      uses: sarisia/actions-status-discord@v1
      if: ${{ success() }}
      with:
        title: 🎉 Client CI 🐿
        webhook: ${{ secrets.DISCORD_WEBHOOK_CI }}
        color: 00FF00
    - name: Client CI Fail Discord Notification
      uses: sarisia/actions-status-discord@v1
      if: ${{ failure() }}
      with:
        title: ❌ Client CI 🐿
        webhook: ${{ secrets.DISCORD_WEBHOOK_CI }}
        color: FF0000

 

1. .env파일을 추가해줍니다.

2. repository에서 파일들을 불러옵니다.

3. node 버전을 확인합니다.

4. build를 실행합니다.

5. 디스코드 웹 훅으로 성공, 실패 여부를 판단합니다.

 

저는 디스코드 web hook을 연동해 디스코드 채널로 알람이 가도록 설정했습니다.

(디스코드 web hook을 이용하실 거면 web hook을 secret에 등록하고 사용해주시면 됩니다!)

 

코드가 제대로 작성이 되면 이런 식으로 workflow가 성공을 하고 디스코드에 알람이 옵니다

 

이것으로 CI는 완성이 되었습니다.

---

이제 CD를 작업해보겠습니다.

 

일단 aws로 접속해줍니다. 그 후 콘솔에 있는 S3에 들어가 줍니다.

 

 

버킷 만들기를 눌러주세요

 

버킷 이름과 AWS 리전을 선택해주시고, 모든 퍼블릭 액세스 차단을 꺼주세요.

그 후 버킷 만들기를 눌러주세요. 만든 버킷에 들어가 속성 탭을 눌러주세요.

아래로 내리면 정적 웹 사이트 호스팅이 있습니다. 편집을 눌러주세요!

 

활성화를 누르고, 인덱스 문서, 오류 문서에 index.html을 작성해주세요. 그 후 ARN을 복사해주세요

정책 생성기를 눌러 정책을 생성해줍니다.

이런 식으로 작성해줍니다. 그 후 Add Statement를 누르고, Genereic Policy를 눌러줍니다.

나온 JSON 파일을 넣어주고 Action에 있는 s3:* 을 s3:GetObject로 바꿔주고 Resource 맨 뒤에 /*을 달아줍니다.

 

이제 IAM에 접속해줍니다.

 

사용자 추가를 눌러주세요

 

이름을 작성하고 AWS 자격 증명 유형을 프로그래밍 방식 액세스로 선택하고 넘어가 주세요.

기존 정책 직접 연결을 선택하고 AmazonS3FullAccess, CloudFrontFullAccess를 검색해 선택해주세요.

사용자 만들기를 눌러주세요. 이제 IAM 생성되었습니다!

여기서 나온 secret access key, access key를 github secrets에 저장해주세요.

 

이제 CloudFront에 접속합니다.

배포 생성을 눌러주세요.

원본 도메인을 누르면 S3 bucket access 항목이 새롭게 나타납니다.

S3 bucket access에서는 OAI(Origiin Access Identity) 사용 여부를 선택할 수 있어요.

OAI를 설정하면 사용자가 S3 버킷에 직접 접근하지 않고 CloudFront를 통해서만 S3의 파일에 접근할 수 있습니다!

뷰어 프로토콜 정책을 Redirect HTTP to HTTPS로 바꿔주시고, 허용된 HTTP 방법을 GET,HEAD,OPTIONS,PUT,POST,PATCH,DELETE로 설정해주세요.

마지막 설정에서  Alternate domain name (CNAME)에 원하는 도메인을 넣고, 인증서를 선택하고, Description 정도를 설정합니다.

Create distribution 버튼을 클릭한 후 S3의 Bucket policy를 확인하면 다음과 같은 정책이 저장되어 있습니다.

 

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity [CloudFront Distribution ID]"
            },
            "Action": "s3:GetObject",
            "Resource": [S3 ARN]
        }
    ]
}

이렇게 다 완성이 됐으면 다시 github secrets에 cloud distribution id를 만들어줍니다.

다 만들었으면 이제 workflows 폴더에 CD.yml을 작성해줍니다.

 

name: Dotori Client CD

on:
  push:
    branches: [ master ]

jobs:
  
  build:
    runs-on: ubuntu-latest


    steps:
      - name: Checkout source code.   # Repo checkout
        uses: actions/checkout@v2
      
      - name: Create .env             # .env 파일 설정
        run: |
          touch .env
          echo "${{secrets.ENV}}" >> .env
          
      - name: Check Node v            # Node v 확인
        run: node -v

      - name: Install Dependencies    # 의존 파일 설치
        run: yarn install --frozen-lockfile

      - name: Build                   # React Build
        run: 
          CI=false yarn build

      - name: Configure AWS Credentials # AWS 자격 증명 
        uses: aws-actions/configure-aws-credentials@b8c74de753fbcb4868bf2011fb2e15826ce973af
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      - name: mv .env to S3
        run: mv .env ./build

      - name: Upload to S3            # Upload build file to S3
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          aws s3 sync --region ap-northeast-2 build/ s3://{버킷 이름} --delete

      - name: Invalidate CloudFront Cache       # CloudFront에서 캐시를 갱신하기 위해 invalidation을 실행
        run: aws cloudfront create-invalidation --distribution-id ${{secrets.AWS_DISTRIBUTION_ID}} --paths "/*"

      - name: Dotori Client CD Success Discord Notification
        uses: sarisia/actions-status-discord@v1
        if: ${{ success() }}
        with:
          title: 🎉 Dotori Client CD 🐿
          webhook: ${{ secrets.DISCORD_WEBHOOK_CD }}
          color: 00FF00
        
      - name: Dotori Client CD Fail Discord Notification
        uses: sarisia/actions-status-discord@v1
        if: ${{ failure() }}
        with:
          title: ❌ Dotori Client CD 🐿
          webhook: ${{ secrets.DISCORD_WEBHOOK_CD }}
          color: FF0000

1. 레포지터리에서 파일들을 다 불러옵니다.

2.. env 파일을 추가합니다.

3.  node 버전을 만들어줍니다.

4. 의존성 파일을 설치합니다.

5. 빌드를 실행합니다.

6. s3에 .env 파일을 올려줍니다.

7. 빌드가 성공하면 S3에 업로드를 해줍니다.

8. 업로드 후 CloudFront에서 캐시를 갱신하기 위해 invalidation을 실행해줍니다.

코드가 제대로 작성이 되면 이런 식으로 workflow가 성공을 하고 디스코드에 알람이 옵니다

 

이것으로 CD는 완성이 되었습니다.

---

이렇게 CI/CD를 만들어보았습니다. 긴 글 읽어주셔서 감사합니다!