개발하는데 다 이유가 있겠지

React 프로젝트의 빌드 결과는 정적 리소스 파일(`.html`, `.js`, `.css` 등)이다. 정적 리소스 파일은 `AWS S3 버킷`에 올려 baseURL을 index.html로 연결시켜 클라이언트가 baseURL에 접속했을 때 index.html을 받도록 한다. 클라이언트측인 브라우저는 `S3 버킷`에 필요한 리소스를 요청하여 정적 리소스를 전달한다.

1. AWS S3 버킷

⭐️ S3 버킷 생성

버킷 생성

`버킷 만들기` 버튼을 눌러 버킷을 생성할 준비를 한다.

버킷의 이름은 자유롭게 작성하고 `퍼블릭 엑세스 차단 설정`에서 모든 퍼블릭 엑세스 차단을 해제한다.

그리고 버킷 만들기를 클릭하여 버킷을 생성한다.

---

⭐️ 버킷 정책 편집

버킷 권한에서 버킷 정책 편집 클릭

`버킷 정책 편집`에서 새 문 추가를 클릭하여 기존 문을 아래와 같이 알맞게 내용을 채워 변경하고 저장한다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Statement1",
            "Principal": "*", # 특정 사용자에 대해 권한을 제어하고 싶다면 입력한다. (전체 : * / 특정 사용자 : arn:aws:iam:AWS-account-ID:user/IAMID)
            "Effect": "Allow",
            "Action": "s3:GetObject", # Actions : 버킷에 대해 어떤 작업을 허용(또는 거부)할 것인지 선택하는 옵션
            "Resource": "arn:aws:s3:::offfear-fe/*" # 접근 권한을 주고자하는 버킷을 입력한다. (입력 포맷 : arn:aws:s3:::버킷명/*)
        }
    ]
}

 

 

---

 

2. IAM을 활용한 Github Actions이 CLI로 AWS 접속할 사용자를 생성

IAM → 사용자 탭 클릭

`사용자 생성`을 눌러 사용자 생성을 준비합니다.

사용자 이름을 자유롭게 작성하고 다음 버튼을 누릅니다.

권한 옵션을 `직접 정책 연결`로 설정하고 권한 정책에서 `AmazonS3FullAccess`를 선택하고 다음을 누릅니다.

이후 사용자 생성을 눌러 사용자를 생성합니다.

사용자 생성이 완료되면 `시크릿 엑세스 키`와 `엑세스 키`를 발급받아야 합니다.

`Command Line Interface(CLI)`를 선택하고 다음을 누릅니다.

`엑세스 키`와 `시크릿 엑세스 키`발급이 완료되면 .csv 파일을 다운로드 받아 보관합니다.

⭐️ Github Repository에 시크릿 키 등록

Settings → Secrets and Variables → Actions

시크릿 엑세스 키, 엑세스 키, 버킷 이름을 환경변수로 등록하여 Github Actions에서 사용할 수 있다.
(ex : {{ secret.AWS_S3_ACCESS_KEY_ID}} )

AWS_S3_ACCESS_KEY_ID : AWS IAM에서 발급받은 엑세스 키입니다.
AWS_S3_SECRET_ACCESS_KEY_ID : 엑세스 키를 발급받을 때 한 번만 알려주는 secret입니다.
AWS_S3_BUCKET_NAME : S3 버킷 이름

 

---

 

3. Github Actions workflow 파일 생성

프로젝트의 `.github` 폴더에 `workflows`라는 폴더를 만들고 `.yaml` 파일 하나를 생성합니다. Github Actions은 `.yaml` 파일을 인식해 작동한다.

# 워크플로우의 이름 지정
name: Front build workflow

# 워크플로우가 실행될 트리거 설정
# main 브랜치에 push가 발생할 때마다 실행
on:
  push:
    branches:
      - main

# 실행될 작업 정의
jobs:
  # build라는 작업 정의
  build:
    name: react build & deploy
    # Ubuntu 최신 버전에서 실행
    runs-on: ubuntu-latest

    # 작업의 실행 단계들
    steps:
      # GitHub 저장소 체크아웃
      - name: Checkout repository
        uses: actions/checkout@v2

      # Node.js 환경 설정
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'  # Node.js 16 버전 사용

      # npm 패키지 설치
      - name: Install dependencies
        working-directory: ./Off-Fear_FE  # 작업 디렉토리 지정
        run: npm install

      # React 앱 빌드
      - name: Build React app
        working-directory: ./Off-Fear_FE  # 작업 디렉토리 지정
        run: npm run build

      # AWS 자격 증명 설정
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_S3_ACCESS_KEY_ID }}  # AWS 액세스 키
          aws-secret-access-key: ${{ secrets.AWS_S3_SECRET_ACCESS_KEY_ID }}  # AWS 시크릿 키
          aws-region: ap-northeast-2  # AWS 리전 설정 (서울)

      # S3에 빌드된 파일 업로드
      - name: Upload to S3
        env:
          BUCKET_NAME: ${{ secrets.AWS_S3_BUCKET_NAME }}  # S3 버킷 이름
        run: aws s3 sync Off-Fear_FE/dist s3://$BUCKET_NAME  # dist 폴더의 내용을 S3에 동기화

CI/CD 연동 성공..!

---

⭐️ 버킷의 정적 웹사이트 호스팅 활성화

S3 → 버킷 → 속성

`정적 웹 사이트 호스팅`을 활성화하여 index.html을 호스팅한다.

설정을 완료하고 변경 사항을 저장

설정이 끝나면 `버킷 웹 사이트 엔드포인트`를 통해 정적 웹 사이트가 호스팅된 것을 확인할 수 있다.

호스팅 성공

 

❗️ Cloudfront에 대한 내용을 추가로 작성할 예정

 

References
GitHub Actions를 활용해 React를 S3, CloudFront를 사용해 배포하기