MERN - 클라이언트/서버 프로젝트- vercel 설정 4

MERN - 클라이언트/서버 프로젝트- vercel 설정 4

​

이전에 몽고디비와 clerk 연동을 끝냈다.

이어서 클라이언트와 서버의 기동 확인도 완료.

실제 배포를 위해, 임시 배포 및 테스트를 진행해보려한다.

평상시 깃헙페이지나 파이어베이스를 통해 배포를 헀는데 이번에 vercel 배포를 처음 해본다.

​

vercel 배포를 기록으로 남겨본다.

---

​

VERCEL 은 프론트엔드 및 서버리스 웹사이트와 애플리케이션을 빠르고 쉽게 배포할 수 있는 클라우드 플랫폼으로,

평상시 내가 포트폴리오로 만드는 웹, html, 자바스크립트, 리액트프로젝트를 파이어베이스 호스팅을 이용하여 웹호스팅을 하는 것과 비슷한 서비스이다.

https://vercel.com/

Vercel: Build and deploy the best web experiences with the AI Cloud – Vercel

먼저 회원 가입을 한다. 나는 구글계정을 통해 가입을 헀다.

이름(사용할 닉네임 개념을 입력하여 진행. 메인화면인 프로젝트 화면을 보게된다.

이어서 기존에 만들어서 깃헙 레포지토리를 생성했던 프로젝트, 레포지토리를 임포트 해야한다,

 

우측 상단의 ADD NEW 버튼을 선택한다.

이어서 프로젝트를 추가한다.

깃헙을 연동한다. 또는 해당 깃 레포지토리의 주소를 넣어도 된다.

나는 주소를 넣어서 진행해보았다.

 

안되어서 깃허브 로그인 연동을 하고 위 화면의 인스톨을 클릭해보았다.

선택한 것만 연동 허용 가능했다. 그래서 임포트할 레포지토리만 선택헀다.

승인 사항은 위 와 같다.

녹색 인스톨버튼을 누르고 vercel 페이지에서 임포트 버튼을 선택한다.

임포트를 위한 설정이 필요하다.

백앤드 부분이 중점이 되는 프로젝트라 뒤에 백앤드를 추가했다.

 

루트디렉토리 설정이 필요한데,

메인디렉토리에는 클라이언트와 서버 폴더로 두개의 프로젝트를 진행,

하지만 vercel에는 백엔드, 서버 폴더만 진행하려고하니 루트폴더를 server 폴더로 지정했다.

 

 

이어서 환경변수 설정이 필요하다.

서버폴더내 환경변수 파일내 값을 복사 붙여넣기 한다.

이어서 Deploy 버튼을 선택한다.

 

상태 확인이 되고, 기다리면, 정상 실행 됨을 확인할 수 있다..

대시보드 화면을 통해 서버의 링크와 소스 깃 정모, 등등의 다양한 정보들을 확인할 수 있다.

​

---

​

웹훅 설정을 다시하기위해.

https://dashboard.clerk.com/

에 접속하여 웹훅 항목을 확인한다.

 

엔드포인트의 주소를 vercel 주소로 수정한다.

주의할것은 주소 뒤에 /api/clerk 를 추가한다.

이유는 위 소스(server.js)에 언급되어있기 때문이다.

이른통해 회원가입,탈퇴,로그인,사용자 변경 등의 이벤트 발생시 웹휵을 통해 서버에 알려주는 기능으로 알고 있다.

​

​

**

오류 확인,

이후 클라이언트 웹에서 로그인, 회원가입, 회원 탈퇴를 진행해보며 웹훅 테스트를 해본다.

​

https://dashboard.clerk.com/

에서 확인이 가능한데..

clerk의 웹훅 페이지에서 로그 또는 메시지 확인이 가능하다.

오류가 많았다.

​

원인을 보니..

clerkWebhooks.js 에서 data 셋의 명칭, 변수 값의 오타 하나.

웹훅 Endpoints 링크 입력에서 오타 하나가 있었다.

이를 수정하고, 커밋도 새로,

그리고 잠시 기다리면, 서버와 클라이언트가 재실행되고,

회원가입과 탈퇴 웹훅 로그가 정상 확인된다.

​

끝!