create t3-app@latest

Environment

• 일자 : 2024-12-24
• os : mac
• node.js : 22.12
• react.js : 18.3.1
• next.js : 15.0.1

Installation

yarn create t3-app

옵션 선택

• typescript
• tailwind.css
• tRPC
• NextAuth.js
• prisma
• Next.js App Router : Y
• DB : postgresql
• import alias : @/

1트

yarn dev

프로젝트 구조고 소스 코드 분석 다 막막하다!
뭐부터 해야 할지 모르겠으니 일단 실행 시켜보자!!
(무조건 굴러가니까 샘플 코드겠지ㅋ)

yarn run v1.22.19
$ next dev --turbo
❌ Invalid environment variables: {
  AUTH_DISCORD_ID: [ 'Required' ],
  AUTH_DISCORD_SECRET: [ 'Required' ]
}
// skip
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

NextAuth.js를 선택했으니 대가를 치뤄야 한다는 내용이다.
마침 디스코드가 기본으로 되어 있으니까 이걸로 해보자

• 디스코드 개발자 포탈에 가입해서 어플리케이션을 하나 만들어준다. (보이는데로 하면 되니 생략)

Set auth

# .env

# Next Auth Discord Provider
# - AUTH_DISCORD_ID : discord developer portal -> OAuth2 -> Client ID
# - AUTH_DISCORD_SECRET : discord developer portal -> OAuth2 -> Client Secret
AUTH_DISCORD_ID="[Client ID]"
AUTH_DISCORD_SECRET="[Client Secret]"

2트

yarn dev

오?! 이렇게 쉽게 실행되버린다고...?

일단 화면은 뜨지만 콘솔창에 무수한 에러가 보인다.
prisma 관련 에러인데 우선 넘어간다.

[Sign in] 버튼 클릭

디스코드 로그인하고 오면 "잘못된 OAuth2 redirect_uri"을 응답 받는다.
포탈에서 리다이렉트에 대한 설정을 추가해줘야 한다.

discord developer portal -> OAuth2 -> General -> Redirects

   http://localhost:3000/api/auth/callback/discord

3트

yarn dev

다시 디스코드 로그인

 GET / 200 in 3089ms
 ✓ Compiled /api/auth/[...nextauth] in 293ms
 GET /api/auth/signin 200 in 640ms
 GET /api/auth/signin 200 in 23ms
 POST /api/auth/signin/discord 302 in 31ms
prisma:error 
Invalid `p.account.findUnique()` invocation in
/Users/.../start-t3/.next/server/chunks/node_modules_50be1f._.js:4224:45
  4221         }
  4222     }),
  4223 async getUserByAccount (provider_providerAccountId) {
→ 4224     const account = await p.account.findUnique(
Authentication failed against database server at `localhost`, the provided database credentials for `postgres` are not valid.
Please make sure to provide valid database credentials for the database server at `localhost`.
[auth][error] AdapterError: Read more at https://errors.authjs.dev#adaptererror
[auth][cause]: PrismaClientInitializationError: 
Invalid `p.account.findUnique()` invocation in
/Users/.../start-t3/.next/server/chunks/node_modules_50be1f._.js:4224:45

prisma에서 발생하는 에러다.
코드와 로컬 디비에 설정을 해야한다.

Run on local DB

.env 수정

DATABASE_URL="postgresql://[role name]:[role password]@localhost:5432/[database name]"

터미널에서 아래 명령어 실행

# PostgreSQL이 실행
brew services start postgresql

# 현재 데이터베이스에 존재하는 Role을 확인
# - postgresql 설치 시 별도 지정 안했을 경우 postgres가 기본값이었을껄...?
psql -U postgres

# Role 목록 확인
# - postgres가 있는지 확인
\du

# 데이터베이스가 생성되어 있는지 확인
psql -l
# 명령어 실행 -> 비밀번호 입력 후 아래와 같은 에러 발생한 경우
# psql: error: connection to server on socket "/tmp/.s.PGSQL.5432" failed: FATAL:  password authentication failed for user "[???]"
# PostgreSQL에 접속할 때 기본적으로 현재 시스템 사용자 이름([???])이 Role Name으로 사용된다.
# 그래서 psql -U postgres -l 로 명령어 입력 시 정상 실행된다.

# 터미널에서 환경 변수 PGUSER를 설정
export PGUSER=postgres
# ~/.zshrc, 또는 ~/.bash_profile을 사용해서 고정으로 사용해도 되지만
# 혹시 다른 프로젝트 환경에 영향이 있을까봐 임시 적용으로 선택했다.
# 이렇게 하면 위의 psql -l도 정상 실행 가능하다.

# Prisma 스키마를 데이터베이스에 적용
npx prisma db push
# Prisma 스키마(schema.prisma 파일)에 정의된 모델을 실제 데이터베이스에 반영하는 명령어
# - 실제 데이터베이스의 구조를 변경하는 명령어
# - schema.prisma 파일의 내용을 데이터베이스에 반영
# - 테이블 생성, 수정, 삭제 등의 작업 수행
# - 데이터베이스 구조를 직접 변경

# Prisma 클라이언트 재생성
npx prisma generate
# 생성된 데이터베이스 확인 가능
# - Prisma Client를 생성하는 명령어
# - TypeScript 타입 정의와 데이터베이스 작업을 위한 JS/TS 코드를 생성
# - node_modules/@prisma/client 폴더에 코드를 생성
# - 실제 데이터베이스는 전혀 건드리지 않음
# - db push 후 실행 필요
# \l : 데이터베이스 목록 보기
# \c [database_name] : 특정 데이터베이스로 전환
# \dt : 테이블 목록 보기
# SELECT * FROM "Post"; : 샘플 코드를 통해 생성된 테이블 확인 가능(데이터는 없지만)

error

Please make sure to provide valid database credentials for the database server at localhost.

• Prisma가 데이터베이스에 연결하지 못해서 발생하는 문제입니다.
• .env -> DATABASE_URL 설정이 잘못 되었을 경우 발생
• yarn dev로 실행은 되지만 oauth2 로그인 후 콜백으로 에러 발생

4트

yarn dev

이젠 로컬에서 샘플 프로젝트가 정상 동작한다!
이 기세를 몰아 로컬DB -> supabase로 옮겨보자!!
supabase를 연동하면서 다양한 사유의 Error: P1001: Can't reach database server at를 만났고 과정은 생략하고 설정 내용 순서로 빠르게 지나간다.

Run on Supabase

• supabase 가입 후 프로젝트 생성
• 허용 IP 추가
  • 왼쪽 사이드 메뉴 -> project settings -> database -> Network Restrictions -> [add restriction] 클릭
    • [add IPv4 restriction] 클릭 : 0.0.0.0과 [내 IP](예: 218.12.34.56) 추가
    • [add IPv6 restriction] 클릭 : ::0 추가

데이터베이스 연결 정보 입력

• supabase -> 상단 바 [connect] 클릭 -> connection string -> Transaction pooler 정보 참고

# .env

# Prisma
# https://www.prisma.io/docs/reference/database-reference/connection-urls#env
# DATABASE_URL="postgresql://postgres:[user password]@localhost:5432/[db name]"
DATABASE_URL="postgresql://[user name]:[user password]@[host]:6543/postgres?pgbouncer=true&sslmode=require"
DIRECT_URL="postgresql://[user name]:[user password]@[host]:5432/postgres"

prisma 데이터베이스 정보 수정

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}

데이터베이스 변경 사항 반영

npx prisma db push
npx prisma generate

5트

yarn dev

이젠 로컬에서 supabase를 통해서도 샘플 프로젝트가 정상 동작한다!!

error

Error: P1001: Can't reach database server at db.fsqjjlwrcqyusinddhtq.supabase.co:5432

• cursor ai가 프로젝트 생성부터 호스트 정보를 맘데로 해놧었네?^^
• 덕분에 잘못된 주소라는걸 의심도 안하고 있었다가 혹시나 싶어서 바꿔보니 연결도 되고 샘플 코드도 잘돌아가네??ㅎㅎㅎ