[UMC] Moamoa FE 배포 (Vercel / AWS) (2)

 

이번에는 AWS 배포과정을 정리해보려 한다!

이왕이면 배포하는 김에 AWS도 활용하여 지식을 확장하자는 목표를 갖고 도전해본다.

 

S3를 활용한 React + Vite + TypeScript 프로젝트 배포 일지 (Feat. 트러블트러블트러블...)

1. Vercel의 배신

처음에는 Vercel로 배포했었지만, 협업 계정 한 명 제한이 발목을 잡았다. Hobby 플랜에서는 외부 콜라보레이터를 한 명만 설정할 수 있어서, 팀원들이 프리뷰 링크를 직접 확인하기 어렵다는 현실적인 제약이 있었다. 그래서 차선책으로 AWS S3 + 정적 웹 호스팅 방식을 고려하게 되었다.... (근데 다들 Vercel로 잘만 배포했다길래 방법 알아보는 중! - 아니 생각보다 간단한 문제였자나! 알고보니 Preview Deployment protection 설정이 되어있어서 제한이 있었던 것! settings에서 권한 해제하면 모두가 볼 수 있는 preview링크가 열린다~~!!)

---

2. S3 버킷 구성: develop와 main 나누기

처음부터 develop 브랜치 배포용 버킷과 main 브랜치 배포용 버킷을 따로 만들기로 결정했다.

• moamoa-front-bucket → develop 전용
• moamoa-front-main-bucket → main 전용

버킷 생성 시 다음 설정을 적용함:

• 정적 웹 호스팅 활성화 (index.html 설정)
• 퍼블릭 엑세스 차단 해제
• 권한 > 버킷 정책 아래 코드 붙여넣기:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::moamoa-front-main-bucket/*"
    }
  ]
}

 

이 정책을 통해 모든 사람이 버킷 내부의 파일을 읽을 수 있도록 설정했다.

---

3. Vite 빌드 후 경로 문제 발생

Vite + React + TypeScript 프로젝트에서 npm run build를 통해 dist 폴더가 생성되었고, 그 안의 파일들을 S3 콘솔에서 수동 업로드했다. 하지만 접속하자마자 아래와 같은 에러가 터졌다.

GET /assets/index-xxxxx.js 404 (Not Found)
GET /assets/index-xxxxx.css 404 (Not Found)

---

4. 원인 분석: 절대 경로 vs 상대 경로

확인 결과, dist/index.html 내부 링크들이 모두 **절대 경로(/)**로 되어 있었다.

<script type="module" crossorigin src="/assets/index-xxxxx.js"></script>

 

이건 로컬 서버에선 작동하지만, S3의 루트 기준에서는 assets/ 폴더가 없기 때문에 404가 발생한다.

---

5. 해결: 상대 경로로 직접 수정

로컬 VS Code에서 dist/index.html을 열고, 아래와 같이 ./로 시작하는 상대 경로로 수정했다.

<script type="module" crossorigin src="./index-xxxxx.js"></script>
<link rel="stylesheet" href="./index-xxxxx.css">
<link rel="icon" href="./vite.svg">

 

그리고 다시 S3 콘솔에서 같은 이름으로 덮어쓰기 업로드를 진행했다.

---

6. 그 외 문제들

-  /favicon.ico 403 or 404 에러

이건 favicon이 없거나 퍼블릭 액세스 권한이 없을 때 발생한다. 내 경우엔 favicon 자체가 존재하지 않았기 때문에 그냥 무시해도 됐다.

-  파일 누락 실수

처음에는 js/css/svg 파일들을 누락한 채 index.html만 올리는 실수를 저질렀다. 에러 메시지를 바탕으로 누락된 파일 이름을 확인하고, dist/ 폴더에 있는 모든 파일을 정확한 이름 그대로 업로드해서 해결했다.

---

7. 마지막 정리: 내가 배포를 위해 한 일

- Vite 프로젝트 빌드
- dist/index.html 경로 수정 (/ → ./)
- AWS S3 버킷 2개 생성 (develop용, main용)
- S3 정적 웹 호스팅 활성화 및 퍼블릭 정책 설정
- dist/ 폴더 내 모든 파일 수동 업로드
- 퍼블릭 URL 접속 성공 ~!!

---

배운 점

• S3는 절대경로를 절대 안 봐준다. 상대경로가 생명이다.
• Vite 빌드시 vite.config.ts에 base: './' 설정을 미리 해두면 이후 빌드에서도 자동으로 상대 경로로 생성된다.
• 정적 웹 호스팅은 생각보다 빠르고 유연하지만, 수동 업로드 과정이 반복되면 자동화(CI/CD)를 꼭 고려해야 한다.

---

이제 develop과 main 각각 따로 퍼블릭 URL이 존재하고, 팀원들에게 링크 공유도 문제없이 가능하다. 다음 단계는 GitHub Actions 기반 S3 자동 배포 파이프라인을 만드는 것!