👩🏻🚀 moonshot 👩🏻🚀 사이트의 프론트엔드를 배포하면서
React 프로젝트를 배포하고, 커스텀 도메인을 붙이고, 개발(테스트)환경과 운영 환경을 분리하여 배포하기까지의 과정을 경험할 수 있었습니다.
위 시리즈들을 통해 프론트엔드 배포를 위한 A-Z의 전반적인 과정들을 기록하면서 제가 겪었던 경험들을 공유하고자 합니다.
1️⃣ 개발 환경 vs 운영 환경
▷ 1. 개발 환경, 운영 환경 분리의 필요성
-
현재 moonshot은 프론트엔드, 백엔드 모두 개발 환경과 운영 환경을 분리해서 서비스를 운영하고 있습니다.
-
개발 환경과 운영 환경을 분리하는 가장 이유는 서비스의 안정성을 위해서입니다.
➡️ 새로운 기능이나 QA 등으로 인한 수정 사항이 있을 때, 개발 및 수정 사항들의 반영과 병렬적으로 서비스를 운영할 수 있습니다.
➡️새로운 기능 및 수정 사항들을 개발 환경에서 테스트 및 확인하고, 최종적으로 운영 환경으로 반영하여 보다 안정적인 서비스 운영이 가능합니다.
➡️ ex. 운영 환경(실제 서비스)에서는 UT를 진행하면서, 개발 환경(테스트 사이트)에서는 QA 및 추가 기능 구현을 동시에 반영할 수 있습니다.
-
moonshot의 프론트엔드 팀은 Git Flow 전략(
main -> develop -> feat/~)을 사용해 개발하고 있는데, 이 중main브랜치에서 분기 되는 배포 사이트를운영 사이트로,develop에서 분기 되는 배포 사이트를개발(테스트) 사이트로 사용하고 있습니다.
📌 정리하자면 !
(1)main: 언제든 사용자에게 출시 될 수 있는, 실제 서비스가 운영되고 있는 브랜치
=== 운영 브랜치(환경) === production 브랜치
(2)develop: 다음 release의 기능들 및 수정 사항들이 반영되고 있는, 개발 중인 사항들이 모이는 브랜치
=== 개발 브랜치(환경) === preview 브랜치
▷ 2. Vercel의 production, preview 기능
-
Vercel에서는 자체적으로 preview 배포, production 배포라는 서로 다른 환경의 배포 모드를 제공합니다. 따라서 이를 활용하여 간편하게 개발 환경과 운영 환경 분리를 할 수 있습니다.
-
⓵
production: 배포 시 가장 기본적으로 만들어지는, main에 연결 되는 환경 -
⓶
preview: preview 환경은 총 두가지로 활용할 수 있습니다.
📍 (1) main이 아닌 다른 분기 된 브랜치에서 push 되면 배포가 진행 되는, 임시 미리보기 환경
-> 즉, main(production)으로 머지하기 전 다른 브랜치에서 push나 pull-request와 같은 변동 사항의 action이 발생되면 임시로 매번 새로 생겨 production에 반영 전 미리 확인을 하기 위한 목적의 배포 환경
📍 (2) 다른 브랜치로 preview 배포를 설정 해, 일종의 개발 환경으로 사용할 수 있는 배포
-> 필자는 develop 브랜치와 연결 후, 서브 도메인을 부여 해 개발 환경으로 사용하고 있습니다. (설정 방식은 다음에서 보다 자세히 적어보겠습니다.)
2️⃣ Preview 기능을 활용 해 개발 환경 만들기
- 앞서 언급 했듯이, vercel에서 제공하는 production, preview 모드를 활용하여 각각 다른 브랜치에 연동하면 간단하게 운영-개발 환경이 분리된 배포 세팅을 할 수 있습니다.
⓵ Step 1 : Preview 환경으로 쓸 sub domain 추가하기
-
Project > Settings > Domains로 들어갑니다 -
배포를 진행한 직후, 초기에는 production 모드 하나만 생성되어 있습니다.
-
개발 사이트의 sub domain 만들기: 위 도메인을 입력할 수 있는 input에 개발 환경으로 사용하고 싶은 도메인을 입력한 후 (ex. moonshotyou-dev.vercel.app)Add버튼을 누릅니다.
- ➡️ 위 과정으로 같은 배포 설정이지만, 다른 URL(도메인)을 가지는, 서브 도메인 사이트를 간편하게 만들 수 있습니다.
- ➡️ ✨ 주의) 커스텀 도메인(직접 구매한 도메인)이 아닌, vercel이 제공하는 도메인을 사용하고 있기 때문에 도메인의 엔드포인트가 반드시
vecel.app으로 끝나야 설정이 가능합니다.
⓶ Step 2 : 생성한 sub domain을 새로운 브랜치와 연결하기
-
⓵에서 생성한 sub domain을 가지는 배포본의 'Edit' 버튼을 눌러, production 환경이 아닌, preview 환경 즉, 개발 환경이 분기 될 새로운 브랜치 (ex.
develop과 연결 해 줍니다.)
-
production으로 연결 해 둔 브랜치 (ex.
main)이 아닌 브랜치를 선택하면, 자동으로 vercel에서 preview 환경으로 인식 하여 preview 태그가 붙게 됩니다.
-
🥳 위 과정을 통해 preview 환경을 생성했습니다! 그럼 이제.. preview 환경과 production 환경의 작동만 분리해주면 되겠죠?!
-> 이를 위해, 환경 변수(env)를 각 환경별로 다르게 설정 해줘야 합니다!
⓷ Step 3 : 각 환경에 따라 환경 변수(env) 적용 해주기
- 적용 배경 :
- moonshot은 서버 또한 개발-운영 환경을 분리하여, 각 환경에 따라 서버 API의 base URL이 다릅니다.
- 또한 운영 사이트, 개발 사이트의 도메인(URL)이 다르므로, 로그인 시 redirect 되는 URL을 저장하고 있는 Redirect URL 또한 다르게 설정해줘야 합니다.
➡️ 🙋🏻♀️ 이 모든 설정은 환경 변수, 즉 env를 각 환경에 따라 다르게 기입함으로써 적용 가능합니다.
-
환경변수 재세팅을 위해
Projects > Settings > Environment Variables로 들어가줍니다. -
환경변수를 추가 할 수 있는 부분이 나오는데, 그 중 Environment 부분을 보면 Production / Preview / Development인지 체크할 수 있는 체크박스가 포함되어 있습니다.
-
따라서 이를 활용하여, 운영 환경에 필요한 env는 Production만을 체크 해 추가 해주고, 개발 환경에 필요한 env는 Preview (또는 Development도 포함) 만 체크 해 추가 해주면 간단하게 환경에 따라 분리 된 환경 변수 추가가 가능합니다
-
✨ 적용을 완료 해주면! 이와 같이 같은 환경 변수이지만, 다른 배포 환경에 따라 다르게 추가 된 모습을 볼 수 있습니다.
- 🎉 이처럼 vercel의 preview-production 배포 모드를 사용하여, 개발 사이트(
moonshotyou-dev.vercel.app)와 운영 사이트(moonshotyou.com)을 분리 했습니다! - 이제 개발 사항들은 개발 사이트에서 확인하면서도, 사용자는 개발 중 에러 사항들과 상관 없이 moonshot 서비스를 지속적으로 사용할 수 있습니다.
- 환경 분리를 진행할 때, 관련 자료가 많이 없었던것 같아 제가 진행한 과정들을 상세히 남겼습니다. 누군가에게 도움이 되었기를 바랍니다💪🏻
.
.
.
📌 이제 다음 이어지는 글에서, vercel에 커스텀 도메인을 붙이는 과정에 대한 내용을 정리하며, vercel로 React 프로젝트 배포하기에 대한 기록을 마무리 하겠습니다.
