공부

[Next.js] 7. Deploying Your Next.js App

hahihuree 2021. 10. 29. 17:18

Next.js를 만든 사람의 플랫폼인 Vercel에 Next.js를 배포하는 방법을 알아본다. 다른 배포 옵션에 대해서도 알아 볼 것이다.

 

들어가기에 앞서 깃허브 계정이 있어야 함을 알린다.

 

 

Push to GitHub

배포하기 전에 깃허브에 우리의 Next.js 앱을 push한다. 이는 배포를 훨씬 더 쉽게 만든다.

  • 개인 깃허브 계정에 next.js-blog라는 저장소를 만든다.
  • 저장소는 공개 또는 비공개일 수 있다. ReadMe나 다른 파일로 초기화할 필요 없다.
  • 저장소 설정에 도움이 필요하면 깃허브 가이드를 보라.

 

그리고

  • 아직 Next.js 앱에 대해 로컬로 git 저장소를 초기화하지 않았다면 지금 한다.
  • Next.js 앱을 내 계정의 깃허브 저장소로 push한다.

 

 

Deploy to Vercel

Next.js를 배포하는 가장 쉬운 방법은 Vercel 플랫폼을 사용하는 것이다.

 

Vercel은 헤드리스 콘텐츠, 상거래 또는 데이터베이스와 통합하도록 구축된 정적 및 하이브리드 앱을 위한 서비스 플랫폼이다. 이는 프론트엔드 팀이 성능을 기본으로 하는 개발, 미리보기 및 즐거운 사용자 경험을 더 쉽게 제공한다. 심지어 무료다.

 

 

Create a Vercel Account

먼저 https://vercel.com/signup 에 방문해서 Vercel 계정을 만든다. Continue with Github을 선택한 후 회원가입 절차를 거친다. 

 

 

Import your nextjs-blog repository

회원가입을 했다면, Vercel에 nextjs-blog 저장소를 import한다. 여기서도 할 수 있다: https://vercel.com/new

  • 깃허브용 Vercel을 설치해야 한다. 모든 저장소에 대한 접근 권한을 부여할 수 있다.
  • Vercel을 설치했다면 nextjs-blog를 import한다. 

 

다음 설정에 대해 기본값을 사용할 수 있다. -아무것도 변경할 필요 없다. Vercel은 Next.js앱이 있는지 자동으로 감지하고 최적의 빌드 설정을 선택한다.

  • Project Name
  • Root Directory
  • Build Command
  • Output Directory
  • Development Command

 

배포하면 Next.js 앱이 빌드를 시작하고 1분 이내에 완료된다.

 

만약 배포에 실패한다면 깃허브에서 도움을 얻을 수 있다. 

 

다 끝났다면 배포 URL을 받게 된다. URL 중 하나를 클릭하면 Next.js 시작 페이지가 라이브로 표시되어야 한다. 

 

축하! Next.js 앱을 배포했다. 다음페이지에서 Vercel의 세부사항과 권장 워크플로에 대해 알아본다.

 

 

Next.js and Vercel

Vercel은 Next.js의 창시자에 의해 만들어졌으며 Next.js에 대한 최고 수준의 지원을 제공한다. Next.js 앱을 Vercel에 배포하면 기본적으로 다음이 발생한다:

  • Static Generation 및 자산(JS, CSS, 이미지, 글꼴 등)을 사용하는 페이지는 매우 빠른 Vercel Edge Network에서 자동으로 제공된다.
  • 서버 측 렌더링 및 API 경로를 사용하는 페이지는 자동으로 격리된 서버리스 함수가 ​​된다. 이를 통해 페이지 렌더링 및 API 요청을 무한대로 확장할 수 있다.

 

Vercel은 이외의 더 많은 특징들이 있다:

  • 사용자 지정 도메인: Vercel에 배포되면 Next.js 앱에 사용자 지정 도메인을 할당할 수 있다. 문서보기
  • 환경 변수: Vercel에서도 환경 변수를 설정할 수 있고 Next.js 앱에서 이러한 환경 변수를 사용할 수 있다. 문서보기
  • 자동 HTTPS: HTTPS는 기본적으로 활성화되며 (사용자 지정 도메인 포함) 추가 구성이 필요하지 않다. SSL 인증서를 자동으로 갱신한다. 

 

 

Preview Deployment for Every Push

아래 단계는 선택사항이다.

 

Vercel로 배포를 하고 난 후, 아래 사항들을 따를 수 있다.

  • 앱에 새 브랜치를 만든다.
  • 일부 변경하고 깃허브에 push한다.
  • 새 pull request를 만든다.

풀 리퀘스트 페이지에 vercel 봇의 댓글이 표시된 것을 볼 수 있다.

이 댓글 안에 있는 미리보기 URL을 클릭해보면 방금 변경한 내용이 표시되어야 한다. 

 

pull request가 열려 있으면 Vercel은 push 할 때마다 해당 브랜치에 대한 미리보기 배포를 자동으로 생성한다. 미리보기 URL은 항상 최신 미리보기 배포를 가리킨다. 

 

이 미리보기 URL을 공동 작업자와 공유하고 즉각적인 피드백을 받을 수 있다.

 

미리보기 배포가 괜찮다면 main 브랜치에 병합한다. 이렇게 하면 Vercel이 자동으로 프로덕션 배포를 생성한다. 

 

 

Develop, Preview, Ship

우리는 방금 DPS(개발, 미리보기, 배송)이라고 하는 워크플로우를 거쳤다.

  • 개발: Next.js로 코드를 작성했으며 핫 리로딩 기능을 활용하기 위해 실행중인 Next.js개발 서버를 사용한다.
  • 미리보기: 깃허브의 브랜치에 변경 사항을 push했으며 Vercel은 URL을 통해 사용가능한 미리보기 배포를 만든다. 피드백을 위해 이 미리보기 URL을 다른 사람들과 공유할 수 있다. 코드 검토 외에도 배포 미리보기를 수정할 수 있다.
  • 배송: 프로덕션으로 배송하기 위해 pull request를 main 브랜치에 병합한다.

 

Next.js 앱을 개발할 때 이 워크플로우를 사용하는 것을 권장한다. 앱을 더 빨리 반복할 수 있다.

 

 

 

Other Hosting Options

Next.js는 Node.js를 지원하는 모든 호스팅 제공업체에 배포할 수 있다.

 

지금까지 지침을 따라왔다면 package.json에 다음 빌드 및 시작 스크립트가 있어야 한다.

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

 

자체 호스팅 제공자에서 빌드 스크립트를 한번 실행하면 .next 폴더에 프로덕션 어플리케이션이 빌드된다.

yarn build

 

빌드 후 start 스크립트는 하이브리드 페이지를 지원하는 Node.js 서버를 시작해 정적으로 생성된 페이지와 SSR된 페이지, 그리고 API 경로를 모두 제공한다. 

yarn start

 

"start": "next start -p $PORT"로 업데이트하여 PORT 매개변수를 수락하도록 package.json의 시작 스크립트를 사용자 정의할 수 있다.

 

 

 

 

 

참고 https://nextjs.org/learn/basics/deploying-nextjs-app/github