MERN - 클라이언트/서버 프로젝트 메일 서비스 연동 설정 9 - vercel 배포 server, client

MERN - 클라이언트/서버 프로젝트 메일 서비스 연동 설정 9 - vercel 배포 server, client

​

앞서 이전에 서버 배포를 위해 만들어 놓았던, vercel의 프로젝트!

서버 소스코드는 레포지토리 업데이트를 통해 실시간 갱신 및 업데이트가 됩니다.

하지만 개발용으로 현재 서버, 백엔드부분만 배포가 된 상태!

​

서버는 실제로 사용해도 되는 부분이지만,

프론트엔드. 클라이언트 부분은 아직 배포가 되지 않은 상태이네요.

​

이번 글에는 연동된 클라이언트, 프론트엔드 부분 배포를 기록으로 남겨봅니다.

​

*서버측 재설정

​

기존 운영중인 백엔드 vercel의 프로젝트에 접근합니다.

오른쪽 상단의 Setting 항목을 선택합니다.

 

 

이어서 좌측의 메뉴바를 확인하여 "Enviroment Vaiables" 환경변수 항목을 선택하고, 환경변수 값을 설정 확인합니다.

상단부분에 키와 값을 추가합니다.

키와 값을 입력후, "Save" 버튼을 선택하여 저장합니다.

 

이어서 하단 토스트알림으로 재배포 안내 메시지를 보게 됩니다.

재 배포를 합니다. Redeploy 버튼 선택!

이어서 설정 확인후 배포를 하고, 성공적으로 완료된다면, 위 안내 메시지를 확인할수 있게 됩니다.

 

배포 상세 페이지에서 상태를 확인할수 있습니다.

​

이어서 vercel에서 제공하는 백엔드 주소를 복사합니다.

복사한 백엔드 vercel 링크를 클라이언트 폴더의 환경변수 파일에 값을 넣습니다.

클라이언트의 환경변수 키와 값을 복사해둡니다.

​

---

*클라이언트 신 배포 설정

기존에 서버는 배포상태이고, 클라이언트는 새로 배포를위해 새로운 프로젝트를 생성해야합니다.

 

새로운 프로젝트생성을 합니다.

기존에 추가되어 있던 깃헙레포지토리를 import 합니다.

 

루트 디렉토리를 지난번 server와 달리 client, 프론트엔드 폴더로 선택합니다.

이어서 앞서 복사해둔 클라이언트 환경변수 키와 값을 넣어줍니다.

이후 배포를 시작합니다.

​

오류가 있다면 해당 프로젝트의 디테일, 상태 로그를 통해 확인 가능하며, 이어서 수정후 재배포를 하면됩니다.

정상적으로 배포가 되었습니다.

이로 클라이언트와 서버 둘다 배포가 되어 온라인으로 서비스가 가능하게 되었네요.

​

이후 클라이언트와 서버가 잘 실행 되는지, 여러 테스트를 진행해봅니다.

​

끝!