[Next.js] 배포하기

SUN·2025년 1월 16일
0

Next.js - app router

목록 보기
20/21

1. vercel 활용하기

1) vercel 설치 명령어를 프로젝트에 입력

window

npm i -g vercel

mac os

sudo npm i -g vercel

2) vercel 로그인

명령어

vercel login

vercel 로그인 수단을 선택하여 로그인

3) 백엔드 서버 vercel에 배포(선택)

명령어

vercel

아래 질문들이 나온다.

  • 계정확인
  • 어떤 계정에 배포할지 (내가 가입한 vercel 선택)
  • 이미 존재하는 프로젝트와 연결할 것인지?
  • 배포할 프로젝트의 이름
  • 어떤 디렉토리에 코드가 위치해있는 지 - 기본값으로 설정

4) next 앱 배포

명령어

vercel

같은 질문들이 나온다.

아래 질문들이 나온다.

  • 계정확인
  • 어떤 계정에 배포할지 (내가 가입한 vercel 선택)
  • 이미 존재하는 프로젝트와 연결할 것인지?
  • 배포할 프로젝트의 이름
  • 어떤 디렉토리에 코드가 위치해있는 지 - 기본값으로 설정

5) vercel에서 동작하는 서버는 vercel에서 배포한 서버의 주소를 입력해야한다.

  • 배포한 next 앱은 로컬에서 작동되는 서버와 연결된다. vercel에서 배포한 서버로 바꾸기 위해 설정이 필요하다.

  • vercel에 배포한 백엔드의 url를 가져와 vercel에 배포한 next 앱에서 setting으로 들어가 Enviornment Variables(환경변수) 탭에서 'Create New'로 들어가 key와 value를 입력한다.

  • 그리고 다시 빌드(redeploy)를 하면 배포한 서버에 연결된다.

6) 터미널에서 재배포

vercel --prod

profile
안녕하세요!

0개의 댓글