
첫 배포 기록
드디어 블로그 프론트를 처음 배포했다.
이번 배포는 단순히 화면을 올리는 수준이 아니라, 백엔드 EC2와 연결하고, 도메인을 붙이고, 실제 운영 URL에서 동작을 확인하는 과정까지 포함됐다.
배포 환경
- Frontend: Next.js
- Backend: FastAPI on EC2
- Frontend Hosting: Vercel
- Domain:
hahbr88.site - Main URL:
www.hahbr88.site
왜 Vercel을 선택했는가
처음에는 프론트도 EC2에 같이 올릴지 고민했다.
하지만 이번 목표는 인프라를 복잡하게 만드는 게 아니라, 빠르게 배포하고 실제 사용자 관점에서 동작 여부를 확인하는 것이었다.
Vercel을 선택한 이유는 아래와 같다.
- Next.js 배포가 간단하다
- HTTPS가 자동으로 붙는다
- 커밋 후 재배포 흐름이 편하다
- 개인 프로젝트 기준으로 부담이 적다
처음 부딪힌 문제들
배포가 한 번에 끝나지는 않았다.
1. 로컬 변경사항이 배포에 반영되지 않음
처음에는 로컬에서만 수정하고 커밋하지 않은 상태로 배포를 눌렀다.
당연하지만 Vercel은 GitHub에 올라간 커밋 기준으로 배포한다. 즉, 로컬에서만 바꾼 내용은 전혀 반영되지 않았다. (멍청이슈)
2. next.config.ts 타입 오류
이미지 호스트 설정을 손보다가 remotePatterns 타입 오류가 발생했다.
빌드 로그에는 대략 이런 형태의 에러가 찍혔다.
원인은 protocol 값을 일반 문자열로 넣었기 때문이었다.
이 문제는 http: / https:를 명시적으로 좁혀서 해결했다.
3. /posts 페이지 서버 에러
배포 후 /posts가 열리지 않고 서버 에러 화면이 나왔다.
처음에는 프론트 문제처럼 보였지만, Vercel 로그를 확인해보니 실제 원인은 백엔드 연결 타임아웃이었다.
즉, 프론트 렌더링 문제가 아니라 Vercel 서버가 백엔드 EC2에 접근하지 못하고 있었다.
이후 백엔드 쪽 네트워크 설정을 다시 확인한 뒤,
결국 /posts 페이지는 정상적으로 열리게 됐다.
도메인 연결
가비아에서 구매한 hahbr88.site 도메인을 Vercel에 연결했다.
Vercel에도 dns 가 따로 있는걸 처음 알았다. 물론 난 가비아에 설정하긴 했지만..
www.hahbr88.site→ 실제 서비스 도메인
현재 상태
- 프론트 배포 완료
- 커스텀 도메인 연결 완료
- SSL 발급 진행 및 적용
/posts페이지 정상 오픈
이제 남은 건 아래 항목을 더 점검하는 것이다.
- 포스트 상세
- 관리자 로그인
- 세션 유지
- 포스트 생성/수정/삭제
- 이미지 업로드 오류 확인
- 브라우저 네트워크 에러 여부
아직 할일이 많다. 꾸준히 해야겠다.
아무튼 내 블로그 드디어 GRAND OPEN