Next.js 프로젝트 Vercel 배포하는 방법 (+마주하는 에러 해결 세가지)

Vercel에 배포하는 법 목차

1. vercel nextjs 링크 검색해서 접속

2. 배포 버튼 누르기

3. 레포지토리 선택하고 deploy 버튼 누르기

4. 배포환경 세팅하기

5. 환경변수 세팅하기

 

에러 해결 세가지

(1) MongoDB connection error: MongoTimeoutError: Server selection timed out 

=> MongoDB IP 주소 허용이 안 된 것일 수 있으니까

Atlas 프로젝트로 가서 Network Access 에 0.0.0.0/0 IP 추가 해보기

(2) VM272:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

=> API 요청 주소가 잘못돼서 JSON 형식이 아닌 HTML 태그를 불러오다가 생긴 문제이니까

올바른 주소로 API를 요청했고, 제대로 반환했는지 확인하기

(3) 소셜 로그인 nextauth callback이 localhost로 되어서 로그인이 안됨

=> OAuth 생성할 때 Callback URL을 localhost로 작성했기 때문이니까

배포환경에 필요한 OAuth 새로 만들기

---

0. Nextjs는 Vercel에서 만든 프레임워크

배포 서비스 추상화의 끝판왕이 아닐까?
github와 연동만 시켜주는 것으로 Next.js로 만든 프로젝트 배포를 무료로 할 수 있다.

---

1. google에서 vercel nextjs 를 검색하면 맨 위에 있는 주소로 들어간다.

링크

Next.js on Vercel - Vercel – Vercel

---

2. 페이지에서 Start Deploying 버튼을 누른다.

눈에 보이는 대로만 따라가도 된다.영어 못해도 된다

---

3. 레포지토리 이름 옆에 있는 import 버튼을 누른다. 

배포할 레포지토리를 선택하면

---

4. 배포 환경을 세팅할 수 있다.

프로젝트를 build하고 start하는 방법을 바꾸지 않았다면 딱히 손 댈 것은 없다.

---

5. 환경 변수를 세팅한다.

NEXTAUTH_URL=http://localhost:3000/

왼쪽에 키 넣고, 오른쪽에 value 넣을 필요 없이
key input 클릭하고, "NEXTAUTH_URL=http://localhost:3000/" 이거 전체를 복사해서 붙여넣으면

이렇게 바로 추가가 된다.

 

Deploy버튼 누르면 배포 완료

---

여기서부터는 배포 이후 마주친 문제, 그리고 해결 방법

(1) MongoDB connection error: MongoTimeoutError: Server selection timed out 

이런 에러가 나타난다면 MongoDB에서 IP를 허용하지 않아서 그런 것이다.

일단 배포가 잘 되는지 확인하고 싶으면 0.0.0.0/0 으로 모든 IP 주소에서 연결을 허용해보면 된다.

Nextwort Access 탭으로 들어가서

 

ADD IP ADDRESS 눌러주고 0.0.0.0/0 붙여넣고 추가해주면 된다.

---

(2) VM272:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

그 다음 친구는 이녀석이다. GCP로든 AWS로든 볼 수 있었던 에러다.

나의 문제 상황은 이렇다.

분명 왼쪽 네비게이션을 보면 포스트 갯수를 잘 요청했는데, 게시물 목록을 로드하지 못한다.

(스크린 샷에는 게시물이 있지만, 원래는 게시물을 불러오지 못해 게시물 카드가 없었다.)

 

Navigation 컴포넌트가 위쪽 노드에 있고, 나머지는 컴포넌트들은 잘 렌더링한 것을 보니 API 요청은 잘 됐다.

따라서, 게시물 컴포넌트만의 문제라는 것을 생각해볼 수 있다.

postItem 컴포넌트로 가서 살펴보니 api 요청 주소를 잘못 적었다. /api 를 빠뜨린 것이었다.

 

왜 이런 문제가 생긴 것이냐? 면요

개발 환경에서는 localhost로 개발 중이니까 이제 도메인 주소 설정을 배포 중인 vercel로 바꿔주어야 한다.

page-859d28d1d25e3876.js:1     GET http://localhost:3000/api/category?subtitle=%EB%B6%80%EC%A0%9C%EB%AA%A9%20%EC%97%86%EC%9D%8C net::ERR_FAILED 200 (OK)

로컬에서 개발을 할 때의 도메인은 http://localhost:3000/ 이지만,

배포환경에서의 도메인은 vercel에서 제공하는 도메인 주소로 바꿔주어야 한다.

const baseUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000/api" : "vercel어쩌고/";

이렇게 개발환경인지 확인을 하려면 process.env.NODE_ENV 를 출력해보면 된다.

배포환경이라면 vercel에서 제공해주는 주소로 요청을 하도록 한다.

---

(3) 소셜 로그인 nextauth callback이 localhost로 되어서 로그인이 안 된다.

깃허브 소셜 로그인을 구현했다.

그리고 로그인을 시도하면 localhost 주소로 보내진다.

 

아, 그러면 callback url을 개발 환경에서는 바꿔주면 되겠구나? 라고 생각하고
vscode에서 'localhost'를 검색한다.

근데 딱히 원인이 될만한 요소는 없다. 그리고 로컬 환경변수인 NEXTAUTH_URL은 localhost이지만 죄가 없다. 

환경변수는 vercel에서 배포할 때 직접 vercel.app/ 어쩌고로 설정했으니까.

 

OAuth app을 만들었을 때를 떠올려보자... callback url을 설정했었다.

이녀석을 떠올렸다면 해결할 수 있다.

OAuth callback URL 주소를 vercel 주소로 바꾸어주거나, 새로운 앱을 하나 생성하면 된다.

 

그리고 [...nextauth] 설정에서 clientId와 clientSecret을 배포환경, 개발환경에 따라 다르게 설정한다.

const githubSocial =
  process.env.NODE_ENV === "development"
    ? {
        clientId: process.env.NEXT_PUBLIC_GITHUB_SOCIAL_CLIENT_ID as string,
        clientSecret: process.env.NEXT_PUBLIC_GITHUB_SOCIAL_CLIENT_SECRET as string,
      }
    : {
        clientId: process.env.NEXT_PUBLIC_GITHUB_SOCIAL_CLIENT_ID_DEPLOYMENT as string,
        clientSecret: process.env.NEXT_PUBLIC_GITHUB_SOCIAL_CLIENT_SECRET_DEPLOYMENT as string,
      };

이렇게 설정해주고 vercel 프로젝트로 들어가 redeploy(재배포)버튼을 찾아서 누른다.

이제 소셜 로그인을 해보면 로그인이 잘 된다.