[트러블슈팅] 운영/테스트 환경 분리, 테스트 환경 구축하기

jade·2025년 9월 7일

스팟잇에서는 기존 운영/로컬환경에서 개발 환경을 추가하여 운영/테스트(개발)/로컬 환경으로 구성하는 중이였고,프론트엔드의 배포는 vercel을 사용하고 있었습니다.

🤔 잠깐, 왜 Vercel을 사용하였나요?

프로젝트는 Next.js 15.3.3 버전으로 구성되있는데, Next.js 에서는 15.1.8 버전 이상부터 메타데이터 스트리밍을 도입하였습니다.

이것은 메타데이터(title, description, opengraph 등)를 기존처럼 HTML <head> 태그에 직접 렌더링 하는 것이 아니라 초기의 페이지 로딩이후 별도의 스트리밍 방식으로 전송하도록 변경된것입니다. 이 때문에 javascript를 실행하지 않는 검색엔진은 metadata를 읽지 못하고 결국 seo에 악영향을 줍니다.

vercel에서는 크롤러를 감지하는 기능으로 예외처리가 되어있지만(htmlLimitedBots) 다른 클라우드 환경에서는 대로 동작하지 않거나 크롤러 감지로직을 직접 구현해야합니다.

그렇다고 구 버전을 사용하게 되면 심각한 보안 취약점에 노출되수 있습니다.

즉,Next.js 자체가 Vercel 에 종속성이 심한 프레임워크입니다.
원글

요구사항

✔️ 운영환경 : main 브랜치에 푸시하면 Production Deployment가 생성되고, 이는 spotit.co.kr 도메인에 연결된다.
✔️ 테스트환경 :main 브랜치에 푸시하면 Preview Deployment가 생성되고, 이는 dev.spotit.co.kr 도메인에 연결된다.
✔️ 각 환경별 환경변수를 분리한다.
- 운영환경에서는 운영 서버주소를, 테스트 환경에서는 개발 서버 주소로 요청한다.
- 테스트 환경에서만 에러메세지가 콘솔에 로깅된다.
✔️ 모든 팀원이 QA할 수 있도록, vercel 계정에 로그인하지 않아도 외부에서 테스트 환경에 접근이 가능해야한다.

문제상황

develop 브랜치를 preview로 연결했고, 커스텀 도메인인 dev.spotit.co.kr도 일단을 연결해뒀습니다. 이 과정까지는 3번재 요구사항까지 모두 만족되었습니다.

그런데, 해당 테스트환경으로 접속하면 버셀이 로그인되어 있는 브라우저에서는 잘 열리는데, 로그인이 안된 브라우저(사파리)로 접속하면 https://vercel.com/login?next...로 리다이렉트 돼는 현상이 발생했습니다.

원인

찾아보니 이 상황은 vercel 프로젝트 preview development 접근제한이 걸려있는 상태라고 합니다. Vercel에서 Preview 환경은 기본적으로 프로젝트 멤버전용 접근이 기본설정일 때가 많은데, 그래서 dev 도메인을 붙였어도, 외부 브라우저에서는 vercel sso 로그인으로 튕겨버렸던 것이였습니다. 😅

그래서 vercel에 로그인하지않은 팀원도 접근가능하게하려면 Enterprise 전용 계정에서 "Preview Deployment Protection"을 비활성화 해주면 된다고 하는데, 현재 프로젝트 계정을 여건상 hobby 플랜을 사용중이여서 이 방법은 쓸수 없었습니다.

해결 방법 찾기

1. 도메인을 Production 환경에 연결

dev.spotit.co.kr을 develop에 연결하되 'production'모드로 배포한다.
dev.spotit.co.kr도 일반 공개 URL처럼 접근 가능
❌ hobby 플랜에서는 환경 변수의 적용범위를 production/preview/development로 구분하기 때문에 production에 연결하면 main/develop 브랜치의 환경변수를 따로 설정할 수 없다.

2. 그대로 Preview로 두기

❌ 사실상 문제 해결이 되지않음

3. vercel이 자동생성해주는 Preview URL

develop 브랜치에 코드를 푸시할 때마다 [project-name]-xxxxxx-[username].vercel.app와 같은 형태의 새로운 Preview URL이 생성되는데 해당 url은 로그인 없이도 누구나 접근이 가능하다.
❌ 매번 배포마다 url이 고정되어있지않고 바뀐다.
❌ 쿠키의 Domain 속성과 preview url이 달라서 쿠키가 저장이 안되고 요청시 전송도 안되는 문제가 발생한다.