vercel postgres 연결하기(Star-Breaker-Raid)

wjd15sheep·2024년 8월 31일

프로젝트

목록 보기

2/10

Next.js로 간단한 웹 페이지 작업을 하는 중 데이터베이스가 필요하다 판단
여러 데이터베이스를 찾아보고 결정한 것은 vercel에 있는 postgres이다.

vercel postgres를 결정한 이유

배포와 함께 데이터베이스 또한 같이 관리할수 있다는 점
무료로 사용이 가능한 점

단점

용량이 적다는 점

그러나 지금 프로젝트는 사용자가 한정적이라 용량을 거의 사용하지 않을거라 판단하여 vercel postgres를 선택했다.

그럼 내가 vercel Storage를 어떻게 연결했는지 포스트 하겠다.

1. vercel에 배포하고 Storage 선택하기

Vercel 메뉴바에 Stroage가 있다 여기서 Create Database를 선택

이제 프로젝트에 데이터베이스가 연결이 되었다.

2. 터미널에 vercel postgres 연결하기

프로젝트 터미널에 아래와 같은 순서로 타이핑!

# vercel 최신 버전 설치
npm insatll -g vercel@latest --save

# 설치된 버전 확인
vercel --version

# vercel link
vercel link

# 로그인 해주고 내용 다 Yes로 해준다.
No existing credentials found. Please log in:
? Log in to Vercel Continue with GitHub
> Success! GitHub authentication complete for ~~@gmail.com
? Set up “~/Documents/Star-Breaker-Raid”? yes
? Which scope should contain your project? ~~ projects
? Found project “~~~~`”. Link to it? yes
✅  Linked to wjd15sheeps-projects/star-breaker-raid (created .vercel)

# vercel의 env 변수들을 가져오기
vercel env pull .env.development.local

최종적으로 프로젝트 파일에 env파일이 생성된 것을 확인할 수 잇다.

3. vercel의 postgres 사용하기

아직 postgres 라이브러리가 설치된것은 아니다 그렇기에 터미널로 설치를 해준다.

npm install @vercel/postgres --save

vercel 웹에서 Data에 users 테이블을 생성해준다.

user 테이블에 데이터를 넣어준다

Browse에서 users를 선택하면 아래와 같이 넣은 데이터가 보여진다.

쿼리에서 user 데이터 전체 검색(이전에 위와 같은 방식으로 데이터를 더 넣어줌)

네 번째 이제 코드에서 사용하기

// vercel postgres import 
import { sql } from '@vercel/postgres'

export default async function SQLTest() {

	// sql 후 백틱 ``, 백틱 안에 sql문 작성
  const res = await sql`SELECT * FROM users`
  
  // 타입은 object
  console.log(typeof res)
  
  // users에 값 넣기
  const users = res.rows

  return (
    <div className='h-full w-full'>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  )
}