React 프로젝트 github action 이용 S3 정적 배포 CICD 구축

React 프로젝트를 Amazon S3에 배포하는 CI/CD 파이프라인을 설정하기 위해 GitHub Actions를 사용하는 방법을 소개해 보려고 합니다.

S3 버킷 설정

S3 정적 배포 시도

기본 S3 설정

ACL 활성화(선택)
ACL을 비활성화하면 CloudFront에서 버킷으로 로그 파일을 전송하지 못하게 됩니다.

웹 서비스 배포를 하기위해서 퍼블릭 엑세스 차단을 풀어줍니다.

버킷을 생성합니다.
그다음 버킷에 들어가서 속성탭 맨아래의 정적 웹 사이트 호스팅의 옵션을 변경해 줍시다.

index.html 적어줍시다.

테스트 해보기

간단히 코드를 만들고 업로드 해봅니다.

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>간단한 테스트 페이지</title>
</head>
<body>
    <h1>안녕하세요, 이것은 간단한 테스트 페이지입니다.</h1>
    <p>이 페이지는 HTML을 사용하여 만들어졌습니다.</p>
</body>
</html>

S3 업로드
업로드 전 아래 ACL 설정

주소 확인
아까 들어갔던 속성 - 정적 웹 사이트 호스팅 부분을 보면 주소가 나와있는것을 볼 수 있습니다.

잘 동작하는것을 확인합니다.

S3 CLI 환경용 IAM 권한 생성

사용자 생성

IAM 에 들어가고 사용자를 생성합니다.

직접 정책 연결(선택)
간편한 설정을 위해 S3FullAccess 권한을 주도록 하였습니다.

생성한 사용자에 들어가 (보안자격증명) 액세스 키를 만들어 주도록 합니다.

액세스 키를 만들고 키, 비밀키 두가지를 잘 저장해 놓습니다.

CLI 테스트

// 각종 설정 (리전 꼭 맞춰주어야 합니다!)
aws configure

// S3 버킷목록을 조회하려면 다음 명령을 실행합니다
aws s3 ls

// S3 버킷을 조회하려면 다음 명령을 실행합니다 ([bucket-name] 변경)
aws s3 ls s3://[bucket-name]

// 로컬 시스템에서 index.html 파일을 버킷에 업로드하려면 다음 명령을 사용합니다
aws s3 cp index.html s3://[bucket-name]/index.html

GITHUB 설정

레포지토리 Secrets 설정

리액트 프로젝트 코드가 있는 레포지토리 설정에 들어갑니다.

왼쪽 바 액션 누르고 초록색 New repository secret 선택

AWS_ACCESS_KEY_ID 및 AWS_SECRET_ACCESS_KEY 라는 두 개의 새 시크릿을 추가합니다.
위에서 생성한 IAM 사용자의 자격 증명을 입력합니다.
* AWS_S3_BUCKET 도 지정할 수 있습니다. (저는 지정하고 사용하도록 하겠습니다.)

참고로 빌드 시에 .env 파일의 변수를 넣어 줄 수 있기에 react의 변수도 secret 에 넣을 수 있습니다.

GitHub Actions Workflow 만들기

프로젝트 루트에 .github/workflows/deploy.yml 파일을 만듭니다. 다음은 제 repo 에서 사용하는 워크플로우 내용입니다

.github/workflows/deploy.yml

name: React CI/CD to S3

on:
  push:
    paths:
      - 'front/limited-edition-market/**'
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'

      - name: Install Dependencies
        run: |
          cd front/limited-edition-market
          yarn install

      - name: Build
        run: |
          cd front/limited-edition-market
          yarn build
        env:
          REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }}
          REACT_APP_CLIENT_KEY: ${{ secrets.REACT_APP_CLIENT_KEY }}
          REACT_APP_CUSTOMER_KEY: ${{ secrets.REACT_APP_CUSTOMER_KEY }}

      - 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: ${{ secrets.AWS_REGION }}

      - name: Sync with S3
        run: aws s3 sync front/limited-edition-market/ s3://${{ secrets.AWS_S3_BUCKET }} --delete

커밋을 하게 되면

repo action 탭에서 이렇게 볼 수 있습니다.

파일도 잘 올라가 있는것을 확인할 수 있습니다.
웹 서비스도 잘 들어가집니다.

주의 workflows
--acl public-read
public-read를 사용하면 S3 버킷의 모든 객체가 공개적으로 인터넷에 노출됩니다.
이 설정이 필요한지, 그리고 보안 상황에 적합한지 반드시 확인해야 합니다.

*참고

AWS CloudFront으로 S3 버킷의 콘텐츠를 캐싱하고, 엣지 로케이션에서 정적 웹 페이지의 빠른 전송을 위해 사용하고
AWS Route 53 으로 도메인 이름을 관리하고 CloudFront 분산 서버로 연결하며
Amazon CloudWatch 를사용하여 웹 페이지의 성능을 모니터링하고, S3, AWS CloudFront, AWS Route 53 의 여러 지표들을 모니터링할 수 있습니다.
이 같은 서비스들을 추가한다면 더욱 좋은 아키텍쳐를 간편하게 구성할 수 있는 장점이 있습니다.

'DevOps' 카테고리의 다른 글

PLG (Promtail + Loki + Grafana) Stack 간단 실험용 구성하기 (1)	2023.10.31
github action Dockerizing - > AWS ECR push (CICD) feat go echo framework (0)	2023.10.30
Terraform을 이용한 Oracle cloud 인스턴스 생성 (0)	2023.05.07
Kubernetes Dashboard (0)	2023.05.07
k8s 지속적 제공(Continuous Delivery) argoCD (2) git 연동 (0)	2023.05.07