Vite 프로젝트를 AWS S3 정적페이지로 배포해보자!

김강민·2024년 10월 7일

개발

목록 보기

12/16

매번 EC2를 활용해 Nginx로 배포하기는 방법이 번거롭기도 하고, 배포할때마다 직접 접속해서 pull 땡겨오고.. build 하고.. Nginx 껐다 키고 하는 과정이 불편해서 또다른 배포방법을 알아보았다.

S3가 뭔데?

S3는 AWS (Amazon Web Service) 에서 제공하는 인터넷 스토리지 서비스이다.
여기서 S3는 Simple Storage Service 를 의미하며, 버킷에서 직접 정적인 웹사이트를 호스팅 할 수 있게끔 도와준다고 한다.

S3의 장점

높은 내구도를 자랑하며 정보를 안전하게 저장할 수 있다.

저렴한 비용으로 사용이 가능하다.

보안성이 뛰어나다.

속도가 빠르다.

1. 버킷 만들기

먼저 S3 콘솔에 진입하여 버킷 만들기를 눌러준다.

주의해야할 것은 이 버킷은 전역에서 교유해야 한다는 점이다. 즉, 게임 ID 처럼 모든 영역에서 겹치지 않아야 한다.
이름을 정할때는 대문자와 공백은 허용되지 않기때문에 케밥케이스의 형태로 명명해보자!
예: s3-bucket-test

AWS리전은 각자의 리전으로 해도 무관하지만, 나중에 과금이 발생할때 찾기 쉽게 서울로 지정하자.

아래 ACL의 경우 해당 S3를 다른 AWS 계정에서 소유할 수 있게 설정하는 것이다. 지금은 이 계정으로만 관리를 할 예정이기 때문에 권장사항인 비활성화를 선택하였다.

암호화는 무엇을 하든 상관이 없기때문에 기본 세팅값인 Amazon S3 관리형 키(SSE-S3)를 사용한 서버 측 암호화로 선택한다.

고급설정 부분 또한 따로 설정사항이 없기 때문에 '버킷 만들기'를 눌러준다.

2. build 파일 올리기

build 파일을 올리기 전에 내 프로젝트는 React+Vite+typescript+Pnpm 환경임을 미리 알린다!
pnpm run build

이렇게 떴다면 정상적으로 build가 진행되었음을 알 수 있다!

이후 해당 경로로 이동하면 dist 라는 폴더가 생성되었음을 알 수 있다.

dist 폴더안에 위치한 파일들을 모두 업로드 해보자!

업로드!

3. 업로드한 파일 호스팅하기

업로드 했던 파일 중 html 파일을 호스팅 해야한다.

속성에서 쭉~~~ 내려가면 "정적 웹 사이트 호스팅" 이 있다. "편집"을 눌러보자.

현재 '비활성화'가 되어있는데, '활성화'를 눌러보자.

React 프로젝트가 build 될때 index.html 파일에서 모든 javscript 파일과 css 파일을 가져와서 보여주기 때문에 index.html 파일만 바라보게 설정하면 된다!

"인덱스 문서" 와 "오류 문서 - 선택 사항" 둘다 index.html로 작성해준다.

변경 사항 저장을 눌러준다.

다시 "속성" 탭의 맨 아래로 이동하여 "정적 웹 사이트 호스팅" 부분을 보면 주소가 나온다.

하지만 아직 권한 설정이 안되어있기 때문에 이렇게 뜨게된다.

PTSD가 올 것 같으니 빠르게 닫고, "권한"탭으로 가보자..

버킷 정책에서 '편집'을 눌러보자!

정책 생성기를 누른다.

이런 못생긴(?) 사이트로 이동하게 되는데, 아래 사진처럼 세팅해보자.

Select Type of Policy 에서 S3 Bucket Policy,
Principal에서 * 입력, Action 에서는 Get Object 를 선택하자.
ARN은 아까 봤던 버킷 저액 편집에서 찾아볼 수 있다.

그대로 복사하고, 뒤에 /* 를 꼭 붙여주자!
예: arn:aws:s3:::zzansuni-test/*

이후 Add Statement를 누른다.

Generate Policy 클릭

이런식으로 잘 떴는지 확인하고, 전체 복사를 해서 정책에 붙여넣자.

변경 사항 저장 클릭

다시 주소로 들어가면 정상적으로 나오게된다!
'속성'탭으로 가서 쭈우우욱 내리고,

4. Github Action 활용하기

배포한 사이트에 매번 build해서 파일을 올리면 s3를 쓰는 이유가 있을까...?
Github Action을 활용해서 main branch에 push 했을 경우 알아서 build하고, 배포를 진행해준다!
CI / CD를 활용하여 배포자동화를 구현해보자!

CI / CD ?

https://velog.io/@dobby_min/CI-CD

01. IAM 을 통해 사용자 생성하기

IAM (Identity and Access Management)

AWS 리소스에 대한 접근을 제한하여 보안 위협을 최소화
S3 버킷을 생성하면 기본적으로 해당 버킷과 그 안의 파일들은 아무도 접근할 수 없기 때문에 특정 사용자나 서비스에게 해당 버킷이나 파일에 접근을 허용하려면 IAM 을 통해 권한 부여
필요한 최소한의 권한만 부여하여 리소스를 안전하게 관리
특정 조건 (시간, IP 주소 등) 에 따른 접근 권한 설정이 가능

IAM에서 좌측의 사용자 탭을 클릭하고, 사용자 생성 버튼을 눌러보자.

사용자 이름을 규칙에 맞게 작성하고, AWS Management Console에 대한 사용자 액세스 권한 제공에 체크를 한다.
그리고 아래에서 IAM 사용자를 생성하고 싶음을 선택해준다.

콘솔 암호 부분에서는 '자동 생성된 암호'를 선택하고, '사용자는 다음 로그인 시 ~~ ' 를 선택한 후 다음 버튼을 누르자

권한 옵션에서는 직접 정책 연결을 선택한다.

권한 정책에서는 AmazonS3FullAccess를 선택한다. 권한 경계 설정은 따로 설정하지 않고, 다음을 눌러준다.

다시한번 잘 살펴보고, 사용자 생성을 눌러준다.

나는 이걸 다 못외우기 때문에 .csv 파일을 다운로드 했다.. 복사해서 카카오톡 나에게 보내기 또는 메모장에 저장해도 좋을 것 같다.

02. IAM Acess Key 생성

보안 자격 증명을 눌러서 아래로 내려보자

액세스 키가 나오면, 액세스 키 만들기를 눌러준다.

Command Line Interface(CLI) : AWS CLI 또는 AWS Tools for PowerShell을 사용하여 AWS 서비스에 명령 줄에서 액세스합니다. AWS CLI 또는 PowerShell을 사용하여 AWS 서비스를 관리하거나 조작할 예정인 경우

로컬 코드 : 로컬 컴퓨터에서 실행되는 애플리케이션을 통해 AWS 서비스에 액세스합니다.
개발 환경에서 애플리케이션 코드를 실행하여 AWS 서비스를 테스트하거나 사용할 경우

AWS 컴퓨팅 서비스에서 실행되는 애플리케이션 : EC2, Lambda, ECS와 같은 AWS의 컴퓨팅 서비스에서 실행되는 애플리케이션을 통해 AWS 서비스에 액세스합니다.
AWS 컴퓨팅 서비스에서 호스팅되는 애플리케이션에 액세스 권한이 필요할 때

서드 파티 서비스 : AWS 파트너 솔루션, 매니지드 서비스 등 서드파티 서비스를 사용하여 AWS 리소스에 액세스합니다.
외부 서드파티 솔루션을 사용하여 AWS 리소스를 관리하거나 조작할 경우

AWS 외부에서 실행되는 애플리케이션 : AWS 인프라 외부에서 실행되는 애플리케이션(예: 온-프레미스 데이터 센터의 애플리케이션)을 통해 AWS 서비스에 액세스합니다.
온-프레미스나 다른 클라우드 환경에서 실행되는 애플리케이션에서 AWS 서비스에 액세스할 경우

기타 : 위에 언급된 사용 사례에 해당하지 않는 다른 시나리오에서 AWS 서비스에 액세스합니다.

S3 배포를 위해 IAM 계정을 생성했다면, 보통 Command Line Interface(CLI) 와 로컬 코드 사용 사례가 가장 관련성이 높습니다. 하지만 구체적인 배포 방식과 사용 사례에 따라 다를 수 있으니, 본인의 시나리오에 가장 잘 맞는 항목을 선택해주세요.

... 그렇다고 합니다.

CLI를 선택하고 다음!

대충 입력하고 액세스 키 만들기 누르기

액세스 키가 발급되었는데, 액세스 키와 비밀 엑세스 키를 복사하고 메모장에 저장하거나 .csv 파일 다운로드를 눌러 다운받는다.

03. Github Action 사용을 위한 Script 작성

Github Action으로 자동으로 배포가 될 수 있도록 script를 작성해보자.
먼저 프로젝트의 root 경로에 .github 라는 폴더를 생성해주고, 하위 폴더에 workflows를 생성해준다.
workflow 폴더에 deploy.yml 파일을 생성해준다. 이름은 무관하지만, 확장자인 .yml 는 지켜주어야 한다.

파일 경로 : .github > workflows > deploy.yml

이후 아래 내용을 복사 후 붙여넣어 준다.

name: S3 deploy

on:
  push:
    branches: ['main'] # main으로 push되었을 때 실행
env:
  AWS_REGION: ap-northeast-2
  S3_BUCKET_NAME: zzansuni-test
permissions:
  contents: read

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    steps:
      - name: Checkout source code.
        uses: actions/checkout@master

      - name: Cache node modules
        uses: actions/cache@v4
        with:
          path: node_modules
          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-build-
            ${{ runner.OS }}-

      - name: Install pnpm # package manager 설치
        run: |
          npm install -g pnpm

      - name: Create .env file # 환경변수 넣기
        run: |
          echo "VITE_APP_BASE_URL=${{ secrets.VITE_APP_BASE_URL }}" >> .env
          echo "VITE_APP_KAKAO_AUTH_CLIENT_ID=${{ secrets.VITE_APP_KAKAO_AUTH_CLIENT_ID }}" >> .env
          echo "VITE_APP_KAKAO_AUTH_REDIRECT_URI=${{ secrets.VITE_APP_KAKAO_AUTH_REDIRECT_URI }}" >> .env
          echo "VITE_ENV"=${{ secrets.VITE_ENV }} >> .env

      - name: Install Dependencies
        run: pnpm install --no-frozen-lockfile --force

      - name: Lint Code # ESLint 실행하기
        run: pnpm lint

      - name: Build # Build 실행하기
        run: CI='' pnpm run build

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ env.AWS_REGION }}

      - name: Upload to AWS S3
        run: |
          aws s3 cp \
            --recursive \
            --region ap-northeast-2 \
            ./dist s3://${{env.S3_BUCKET_NAME}}

저장하고, 해당 프로젝트의 Github Repository로 이동해보자.

Setting - Secrets and variables - Actions에서 New reposiroty Secret을 눌러보자

이곳에서 아까 IAM 에서 발급받은 Access Key와 Secret Key 를 넣어보자.

이런식으로 넣어주면 된다.