[UMC 8th] Moamoa FE 배포 (Vercel / AWS) (1)

UMC 8th Moamoa 프로젝트에서 다양한 배포 경험을 쌓고 싶었던 나는 FE 배포를 2가지 버전(AWS 이용, Vercel 이용)으로 해보기로 결심한다.

 

여기서 AWS 배포와 Vercel 배포의 차이를 짚고 넘어가자.

	Vercel	AWS (S3/EC2 등)
설정 난이도	매우 쉬움 (CLI/웹으로 자동)	중간~높음 (서버, 보안, 빌드 직접 구성)
성능 최적화	CDN 기본 제공 (빠름)	설정 따라 다름 (직접 CDN, 캐시 구성 필요)
확장성	제한적 (Vercel 플랫폼에 종속)	매우 높음 (Auto Scaling, Load Balancer 등 활용 가능)
보안 구성	내부적으로 자동 처리	HTTPS, 인증서, 방화벽, IAM 등 직접 구성 가능
커스터마이징	제한적 (정적 + Next.js에 최적화)	무제한 (모든 언어/프레임워크 가능)
실무 적합성	MVP/개발 편의성 중심	실서비스, 기업용 환경에 적합
비용 구조	무료 티어 존재, 사용량 제한	세밀한 요금 정책, Free Tier도 존재하지만 초과 시 과금 발생
CI/CD	GitHub 연동 자동화 (쉬움)	GitHub Actions, CodeDeploy 등으로 직접 구성
로그/모니터링	대시보드 중심, 제한적	CloudWatch, Grafana 등 전문 모니터링 가능

 

즉, Vercel은 빠르게 배포해서 확인하기 좋은 플랫폼이고,

AWS는 직접 인프라를 설계하고 운영하는 데 적합한 플랫폼이다.

 

 

먼저 다들 빠르게 해낼 수 있다고 자부하던 Vercel 로 배포를 시작해 보겠다.

 

프로젝트 개요

• 프로젝트명: MoaMoa (모아모아)
• github : https://github.com/UMC-8th-Moamoa
• 기술 스택: React + TypeScript + Tailwind CSS
• 배포 목적: 초기 프론트엔드 구현 결과를 신속하게 배포하고 피드백 받을 수 있도록 Vercel 기반 정적 배포 진행

 

목표

• main 브랜치: Production 자동 배포
• develop 브랜치: Preview 자동 배포

>> 였으나, 시간이 촉박한 프로젝트였던만큼 develop 브랜치를 production으로 설정하여 배포하게 되었고 또 후반부 에러로 다른 브랜치였던 feat/demoday를 새 플젝을 파 정적 배포하게 되었다. 원칙은 develop이 preview, main 이 production 이 맞습니다..ㅎㅎ

 

 

다양한 트러블슈팅 preview

 

1. develop폴더에 아무리 커밋 푸쉬해도 자동 배포가 안 됨!! -> 강제 명령어 npx vercel --prod 로 로컬에서 직접 배포

 

2. 직접 배포했으나 수많은 import 오류들로 인해 (아니, import 해 왔는데 제대로 사용하지 않은 애들도 다 오류가 나서 이게 깐깐쟁이 typescript의 장점이라고는 한다. 도저히 오류를 하나하나 해결할 수 없는 상황이었다. 결국 dist폴더를 정적배포하게 되었다. (자세한 설명은 아래에서)

 

3. develop 브랜치에 다른 브랜치를 머지했더니 해당 브랜치에 preview vercel 배포 설정해놓은 게 덮어씌워져서?

그거 삭제하고 다시 재배포하려니까, 머지에 의해 버전설정도 다 꼬여서,

기존에 배포해놨던 develop 브랜치에 오류가 났다.

결국 데모데이용 브랜치였던 feat/demoday 를 새로 프로젝트 만들어서 배포 ! ...

 

Vercel 기본 배포 흐름

브랜치	배포 대상	URL	비고
main	Production	http://front-end-final-sand.vercel.app/	기본설정 되어있음
develop	Production	https://moamoa-front-3s47b6jsr-hyejun-koos-projects.vercel.app/	에러나서 임시페이지 배포..
feat/demoday	Production	http://front-end-demo-coral-iota.vercel.app/	final 배포버전!

 

---

1) Vercel 배포 설정 과정 (처음 1회만)

1. https://vercel.com/import/git 에서 GitHub 레포 연동
2. 기본 브랜치는 main → 자동으로 Production 배포 설정됨
3. 배포 옵션 설정
   • Build Command: pnpm build 
   • Output Directory: dist
   • Framework Preset: Vite, React 

---

2) develop 자동 배포가 안 됨 → 수동 강제 배포로 우회

• 증상
  • develop에 커밋/푸시해도 자동 배포가 트리거되지 않음.
  • Vercel 대시보드(Project Settings)에선 Branch Tracking = develop로 보이지만 실제로는 배포가 안 돌았음.
  원인 (내가 파악/경험한 것)
  • 초기에 Vercel GitHub App 권한/설치 이슈(조직 오너 승인 필요)로 레포가 제대로 연결되지 않았던 시점이 있었음.
  • 로컬에 남은 .vercel 링크 설정이 다른 프로젝트로 묶여 배포가 기대한 프로젝트로 가지 않는 경우도 있었음.

내가 한 해결

• 바로 결과가 필요해서 자동 배포 기다리지 않고 CLI로 강제 배포:

npx vercel --prod

+ 로컬 프로젝트가 엉뚱한 Vercel 프로젝트에 연결됐을 가능성이 있어, 링크 재설정도 수행했다:

Remove-Item -Recurse -Force .vercel
npx vercel link --project <프로젝트명> --yes

배운 점: 자동 배포가 막힐 땐 원인 파악과 별개로 즉시 CLI 강제 배포로 우회하고, 이후에 링크/권한을 차분히 바로잡는 게 효율적.

 

3) 수동 배포 후 TypeScript import 오류 폭탄 → dist 정적 배포로 전환

 

증상

• 수동 배포 과정에서 import 관련 TS 오류가 대량 발생.
  • 사용은 안 했지만 import만 해 온 심볼도 오류가 났음(“깐깐한 TS” 설정).
• 또한 @types/node 누락/타입 설정 문제로 

Cannot find type definition file for 'node'

 

류의 에러도 확인.

 

원인

• 프로젝트에 엄격한 TS 규칙(예: noUnusedLocals) 및 타입 정의 미정리가 쌓여 있었음.
• CI 환경(Vercel)에서 빌드 시 로컬과 다른 Node/타입 환경이 적용되어 오류가 더 도드라짐.

내가 시도한 것

• 일부는 @types/node 설치, tsconfig 보정 등으로 해결 가능하지만, 오류 개수가 너무 많아 데모 일정상 위험하다고 판단.

최종 해결 (정적 빌드 업로드)

“로컬에서 먼저 빌드 성공 → 빌드 산출물만 올리자”로 전략 전환.

1.  

[시도 2] 수동 배포 (CLI 사용)

npx vercel

 

 

질문 응답 요약:

Set up and deploy?	yes
Scope	본인 팀 또는 개인
Link to existing project?	yes
Project name	moamoa_front-end
Directory	.
Build command	pnpm build
Output dir	dist
Override?	n

 

→ Preview 배포 성공

→ URL : https://moamoafront-82dn298a0-hyejun-koos-projects.vercel.app/

 

현재 결과임니다~~

 

 

 

AWS 적용 배포도 서둘러 정리해서 올리겠어요~~