[NEXT] 8. 1차 개발 끝 / Vercel로 배포하기 / 배포 후 오류 해결

드디어 1차 개발이 완료되었다!

어떤식으로 배포를 진행할까 고민하던 찰나.. vercel로 많이 한다길래 처음이니까 ㅎㅎ vercel로 배포를 진행했다!

 

🚀 Vercel이란?

• Next.js에서 제공하는 배포 플랫폼
• 빌드, 배포, 호스팅 제공, 공식문서에서도 Vercel을 통한 Front Project 배포 권장
• Github Repository를 통해 쉽게 배포 가능

 

1️⃣ pakage.json에 script 추가 및 수정

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

 

처음에 블로그를 보며 이렇게 script를 수정하고 빌드를 진행하였는데

 

PrismaClientInitializationError: Prisma has detected that this project was built on Vercel, which caches dependencies. This leads to an outdated Prisma Client because Prisma's auto-generation isn't triggered. To fix this, make sure to run the `prisma generate` command during the build process.

 

이러한 오류가 떠서

다시 검색 진행...

알고보니 prisma와 무슨 연관이 있는 것이었다

  "scripts": {
    "dev": "next dev",
    "start": "next start",
    "lint": "next lint",
    "postinstall": "prisma generate",
    "build": "prisma generate && next build",
    "vercel-deploy": "next build && next export"
  },

 

스크립트를 이렇게 바꾸니 오류 해결

 

2️⃣ Vercel 회원가입 또는 로그인

1. 이 곳에 들어가 github로 계정 연동하기

https://vercel.com/solutions/nextjs

Next.js on Vercel - Vercel – Vercel

 

2. repository import 하기

3. Settings에서 Build Command 수정하기

 

4. 빌드 진행 후 배포 완료!

 

배포가 잘 진행되면 이런식으로 Ready가 뜬다!

 

3️⃣ 배포 후 만난 오류들

 

배포가 끝나고 신나는 마음으로 페이지에 들어가서 테스트를 해보았는데... 회원가입부터 시작해서 로그인, 게시판까지 모두 작동을 안 하는 것이었다 😭

 

1. Error querying the database: Error code 14: Unable to open the database file

 

오류 로그를 보니까 데이터베이스를 찾을 수 없는 것이 문제였다..

수많은 검색을 통해 알아낸 것은 

Vercel은 SQLite와 같은 로컬 파일 시스템을 기반으로 하는 데이터베이스를 직접적으로 지원하지 않습니다. SQLite는 파일 기반의 경량 데이터베이스이며, 여러 인스턴스 간에 데이터를 공유하기 어렵습니다. Vercel과 같은 서버리스 호스팅 플랫폼은 각 인스턴스가 독립적인 환경을 갖기 때문에 SQLite와 같은 데이터베이스는 적합하지 않습니다.

이 프로젝트에서 db로 SQLite를 사용 중이었는데 vercel이 지원하지 않아 연결이 안 되었던 것이었다!!

 

해결방법

1. 계속 SQLite를 사용하며 배포를 다른 방식으로 진행하기

2. DB를 바꾸기

--> 현실적으로 다른 배포 방법을 사용하기 보다는 vercel에서 지원하는 데이터베이스를 사용하는 것이 공수가 덜 들어갈 것 같아서 DB를 Postgresql로 변경하였다 

 

https://vercel.com/yegris-projects/cock-user/stores

Dashboard

여기에서 database를 만들고 

vercel link
vercel env pull .env.development.local

 

- 터미널에서 연동해주기

- 그럼 자동으로 .env.local 파일이 만들어주는데 여기서 파일 이름을 .env로 변경해주기

 

- postgres 설치하기

npm install @vercel/postgres

 

- db 정보 변경해주기

 

 

// 어떤 종류의 DB를 쓰는지, 해당 파일에 대한 url
datasource db {
  provider = "postgresql"
  url = env("POSTGRES_PRISMA_URL") // uses connection pooling
  directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
}

 

이렇게 해주니까 오류 해결!

 

2. 401 Unauthorized 오류

며칠을 헤맸던 오류...

1번에서 만났던 오류를 해결하니까 회원가입은 잘 되었는데 로그인이 안 되어서... 콘솔을 봤더니 401 오류가 뜨는 것이었다

POST https://cock-user-yegris-projects.vercel.app/api/auth/callback/credentials 401 (Unathorized)

 

구글에 모든 401에러를 검색 해보았으나... 명확한 해답은 없고

있다 하더라고 나에겐 맞지 않은 솔루션들 뿐이었다 😭

 

이것저것 실행해보다가 

 

로그인 페이지에서 콘솔을 찍어보았는데

const result = await signIn("credentials", {
      username: id,
      password: password,
      redirect: false,
 });

console.log(result);

로컬에서는 이렇게 뜨고

콘솔에서는 이렇게 떴다

 

error : "Cannot read properties of null (reading 'state')" 이런 오류가 뜨면서 url에 아무것도 안 뜨는 것이었다?????

어라라 그럴리가 없는데 하며 .env 파일을 까보는 순간

      async authorize(credentials, req) {
        const res = await fetch(`${process.env.NEXTAUTH_URL}/api/login`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            username: credentials?.username,
            password: credentials?.password,
          }),
        });
        const user = await res.json();
        console.log(user);

        if (user.state === 401) {
          console.log("error");
        }

        if (user) {
          return user;
        } else {
          return null;
        }
      },
    }),

 

여기에 들어가야 할 NEXTAUTH_URL이 없는 것이었다!

데이터베이스를 바꾸면서 .env 파일도 바뀌었는데

내가 입력해 놓은 NEXTAUTH_URL이 사라져 버린 것!!

NEXTAUTH_URL="https://cock-user-yegris-projects.vercel.app"

 

.env 파일에 이렇게 입력해주고 다시 배포 진행하니까 드디어!!! 드디어!! 모든 것이 잘 돌아갔다...

너무 감격 😭

나 왜 콘솔 안찍어보고 애먼 것만 하고 있었냐고...

역시 디버깅은 콘솔찍기가 진리인 것 같다...

 

 

이렇게 1차 개발의 모든 것이 끝나고!!

차근차근 디테일 잡으면서 반응형도 시작하고... 그래야겠다!