개요

포트폴리오 방명록을 mongodb에 연결해서 만들려는데 react로 개발해서 서버를 따로 처리해야한다.
예전 기억을 되살려가며 express와 vercel로 서버 도메인을 생성해 사용하려함!!

무수한 에러로그를 이겨내고 드디어 배포 완료...ㅎ...

과정

1. server 폴더 생성

알아보기 쉽게 기존에 진행하던 프로젝트의 이름을 front로 바꾸고 깃헙에 레퍼지토리를 새로 파서 server 폴더를 생성해준다.
동일한 이름의 레퍼지토리가 이미 있어서 폴더 이름은 MongoDB로 했다.(맘대루...!)

2. express 프로젝트 생성

여기서부턴 공식문서를 따라한다.(최고👍)
https://vercel.com/guides/using-express-with-vercel

배포를 위한 vercel.json 설정과 폴더 구조를 잘못 잡아서 몇시간 고생했다!
루트에 server.js가 있고 node server.js로 실행하는게 학습의 정석이었으나 vercel에 배포하기 위해서는 구조를 다르게 잡아야한다. server.js(=index)가 /api에 위치해야한다는 것!!

요약)
index.js를 api폴더 내에 위치시킨다.

3. npm 패키지 설치

express, cors, dotenv, moogose 등등 필요한걸 쫙 설치해주고

4. 서버 코드 작성

평소에 하던대로 connect, routes, models를 작성해준다.

5. package.json

실행할때마다 node server.js 입력하는거보다 npm run start입력이 손에 익어서 변경했더니 배포시 에러가 발생했다. 배포시 오류가 발생한다면 의존성만 남기고 지워보길 추천함(아닐수도있습니다.)

6. vercel.json

vercel 배포시 꼭 필요하다!
destination의 경로를 /api로 설정한다.

처음엔 /로 설정했는데 vercel에서 서버리스 함수를 구현할때 /api 디렉터리를 통해 구현하는걸 권장한다고 한다.
그래서 그런지 /로 설정했을때 계속 500 오류가 발생했다.

힝

어쨌든 배포한 vercel.json파일 코드는 다음과 같다.
rewrites는 routes와 같다.
source에 path경로를 적어주고 destination에 index.js가 위치한 경로를 작성해준다.

{
  "version": 2,
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/api"
    }
  ]
}

7. mongodb 설정(ip)

Network Access에서 사용자 접근을 위해 0,0,0,0을 추가한다.

8. MongoDB Atlas 연결

프로젝트 메인 > Integrations에서 MongoDB Atlas를 연결해준다.

[참고링크]
https://www.mongodb.com/ko-kr/docs/atlas/reference/partner-integrations/vercel/

9. 배포

git push 후 vercel에서 배포한다.
프레임워크 프리셋은 Other로 둔다.(이게 문젠줄알구 엄청 검색했는데...)

그리고 Environment Variables에서 mongodb uri를 변수로 등록해주면 끝!

10. Test

postman에서 도메인주소로 테스트해보자.
잘나온당 ㅇㅅㅇb

post 테스트도 해보자

롸...?

는 raw에서 json으로 넣어야한다 하핫 실수

mongodb atlas에서 확인하니 데이터가 잘 들어온게 보인다.

프론트 연결

은 간단하다. 도메인이 준비되었으니 데이터를 가져온다!!(끝)

npm i axios로 axios를 설치하고 useEffect로 api를 호출해준다.

useEffect(() => {
        const fetchGuestBook = async () => {
            const response = await axios.get('도메인주소');
            setGetData(response.data);
        };
        fetchGuestBook();
        console.log(getData)
    }, []);

도메인주소 env로 빼는게 좋겠다.

어쨌든 가볍게 map 돌려주면 아래처럼 데이터가 잘 출력되는걸 확인할 수 있다.