React ci/cd pipeline 아키텍처

목차

---

• 아키텍처
• 코드 설명

아키텍처

---

과정

---

1. local에서 add, commit, push 진행

2. push를 하게 되면 github actions에서 ci.yml, cd.yml 실행

3. ci.yml에선 먼저 runner에서 ci/cd 하려는 레포에 접근

4. npm ci를 통해 의존성 설치 후 npm run build를 통해 build 파일 생성

5. cd.yml에서도 똑같이 레포 접근, 의존성 설치, build

6. aws-actions/configure-aws-credentials@v1를 통해 aws에 접속할 사용자 등록

7. 자격 증명이 끝나면 S3, CloudFront에 배포 완료

코드 설명

CI.yml

name: CI
on:
  push:
    branches: ["main"]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Install dependencies
        run: npm ci

      - name: build
        run: npm run build

• on - main branch에서 push 이벤트가 발생할 때 trigger된다는 뜻
• runs-on - runner가 ubuntu 환경에서 실행
• uses - runner에 내 레포를 clone 및 checkout
• run - npm ci, npm run build를 통해 의존성 설치 및 빌드 파일 생성

CD.yml

name: CD
on:
  push:
    branches: ["main"]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v3

      - name: Install dependencies
        run: npm ci

      - name: build
        run: npm run build

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-2

      - name: Deploy to S3
        run: aws s3 sync ./build s3://${{ secrets.DEV_AWS_S3_BUCKET }} --delete

      - name: Invalidate CloudFront Cache
        run: aws cloudfront create-invalidation --distribution-id ${{secrets.DEV_AWS_DISTRIBUTION_ID}} --paths "/*"

• aws-actions/configure-aws-credentials@v1 - aws에 접속할 사용자를 등록
• ${{secrets.~}}로 되어있는 것은 settings -> secrets -> actions -> new repository secret에서 생성
• access-key-id, secret-access-key는 aws iam에서 permission 추가 해줘야 함
• iam -> 기존 정책 직접 연결 -> AmazonS3FullAccess, CloudFrontFullAcess 체크 후 생성

run: aws s3 sync ./build s3://${{ secrets.DEV_AWS_S3_BUCKET }} --delete

• 다음의 명령어를 통해 빌드 파일을 s3의 버킷에 동기화 시키겠다는 의미 -> 배포
• ./build는 현재 프로젝트의 빌드 파일 경로를 의미
• delete 옵션을 통해 신규 번들링에 생성되지 않은 파일이 S3에서 삭제 됨

secrets

• AWS_ACCESS_KEY_ID: 배포를 위해 이번에 생성한 IAM 유저의 Access key ID
• AWS_REGION: S3의 region
• AWS_SECRET_ACCESS_KEY: 배포를 위해 이번에 생성한 IAM 유저의 Secret access key
• DEV_AWS_DISTRIBUTION_ID: CloudFront Distribution Id
• DEV_AWS_S3_BUCKET: S3 버킷 이름

레퍼런스

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

https://kukim.tistory.com/144