[React] React + S3 + Github Action+ 가비아 + Route53 + ACM + CloudFront 배포

Narcoker·어제

React

목록 보기

33/33

AWS S3

AWS 로그인을 하고 오른쪽 상단의 Region에서 웹서비스를 하려는 지역을 선택한다.

검색챙에 S3를 검색하여 S3에 들어간다.

오른쪽 상단의 "버킷 만들기" 버튼 클릭

버킷 이름 작성

객체 소유권에서 "ACL 활성화됨" 선택

이 버킷의 퍼블릭 액세스 차단 설정에서 "모두 해제"

"버킷 만들기" 버튼 클릭

버킷 생성 완료

생성한 버킷 이름을 누르고 속성 탭으로 이동

하단으로 내려와서 "정적 웹 사이트 호스팅" 의 편집 클릭

정적 웹 사이트 호스팅을 활성화로 변겅

인덱스 문서와 오류 문서에 index.html 입력

"변경 사항 저장" 버튼 클릭

권한 탭으로 이동

버킷 정책 설정 -> daitgym 자리에 생성한 버킷 이름 으로 변경
2.1 정책 복사해서 사용할 경우, 주석 반드시 제거
{
    "Version": "2012-10-17",
    "Id": "Policy1684149724250",
    "Statement": [
        {
            "Sid": "Stmt1684149718410",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::daitgym/*" // 본인 버킷 이름 설정
        }
    ]
}

AWS IAM 설정

AWS IAM(Identity and Access Management)이란
AWS 리소스에 대한 액세스를 안전하게 제어할 수 있는 웹 서비스이다.
IAM으로 리소스의 인증 및 권한 부여된 대상을 제어한다.

AWS 홈 검색에서 IAM 검색 후 클릭

왼쪽 탭에서 "사용자" 클릭

"사용자 생성" 버튼 클릭

사용자 이름 입력 후 다음 버튼 클릭

권한 옵션에서 "직접 정책 연결" 선택

권한 정책 검색에서 "AmazonS3FullAccess" 검색 후 선택

"사용자 생성 버튼" 클릭

추가 설정을 위해서 생성된 IAM 클릭

액세스 키에서 "엑세스 키 만들기" 클릭

Command Line Interface(CLI) 선택
"위의 권장 사항을 이해했으며 액세스 키 생성을 계속하려고 합니다."를 체크 후 "다음" 클릭

액세스 키 만들기 클릭
설명 태그 값 입력 안해도됨

엑세스 키의 정보가 담긴 .csv를 파일을 다운 후 사용

Github Action 설정

CI(Continuous Integration, 지속 통합)와
CD(Continuous Deployment, 지속 배포)를 위한 Github 서비스

배포하고자하는 프로젝트 리포지토리에서 Settings 탭 클릭

왼쪽 탭에서 Secrets and variables 클릭

New repository secret 클릭

AWS_ACCESS_KEY_ID 생성
AWS_SECRET_ACCESS_KEY 생성
Secret에는 각각 AWS IAM 설정에서 만들었던 키의 정보를 입력(CSV 파일에서 확인)

생성 완료

상단 Actions 탭으로 이동

"set up a workflow yourself" (파란 글자) 클릭

name: React build
on: 
  push: # main Branch에서 push 이벤트가 일어났을 때만 실행
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    if: github.event.pull_request.head.repository.fork == false  # Fork된 레포지토리에서 실행되지 않도록 설정
    steps:
      - name: Checkout source code. # 레포지토리 체크아웃
        uses: actions/checkout@main

      - name: Cache node modules # node modules 캐싱
        uses: actions/cache@v1
        with:
          path: node_modules # 프로젝트의 node_modules가 있는 경로로 설정
          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-build-
            ${{ runner.OS }}-
      - name: Install Dependencies # 의존 파일 설치
        run: npm install # npm install을 실행할 경로로 설정

      - name: Create .env file # 환경 변수 파일 생성
        run: |
          echo "VITE_KAKAO_ADMIN_API=${{ secrets.VITE_KAKAO_ADMIN_API }}" >> .env
          echo "VITE_KAKAO_JS_API=${{ secrets.VITE_KAKAO_JS_API }}" >> .env
          echo "VITE_KAKAO_REST_API=${{ secrets.VITE_KAKAO_REST_API }}" >> .env
          echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" >> .env
          echo "VITE_SITE_URL=${{ secrets.VITE_SITE_URL }}" >> .env
      - name: Build # React Build
        run: npm run build # npm run build를 실행할 경로로 설정

      - name: Deploy # S3에 배포하기
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          aws s3 cp \
            --recursive \
            --region ap-northeast-2 \
            dist s3://daitgym