Next.js : Next.js and Vercel - 한글

Deploying Your Next.js App ⑤⑥ - 한국어

---

 

Next.js 와 버셀

Next.js and Vercel

버셀은 Next.js의 개발자들에 의해 만들어졌고, Next.js에 대해 1등급의 지원을 한다. 버셀로 Next.js 앱을 배포할 때, 기본적으로 아래와 같은 일이 생긴다 :

 

• 정적으로 사용하는 페이지 및 에셋 (js, css, 이미지, 글꼴 등) 은 자동으로 매우 빠르게 버셀 엣지 네트워크에 저장된다.
• 서버측 렌더링과 API 라우트는 자동으로 격리된 서버리스 함수가 된다. 이것은 페이지 렌더링과 API 요청을 무한 확장할 수 있다.

 

버셀은 많은 특징을 가진다. 예로, :

 

• 사용자의 도메인 : 버셀로 배포되면 Next.js 앱에 사용자 지정 도메인을 할당할 수 있다. 이 문서를 보라.
• 환경 변수 : 환경 변수도 버셀 내에서 설정할 수 있다. 이 문서를 보자. 그러면 앱 내에서 환경 변수들을 사용할 수 있다.
• 자동 HTTPS : HTTPS가 기본적으로 활성화된다. (사용자 지정 도메인이라도) 그리고 다른 설정이 필요하지 않다. 우리는 자동으로 SSL 증명서를 갱신한다.

 

더 많은 것을 알고 싶다면 버셀 문서에서

 

 

푸시할 때마다 배포판 미리보기

Preview Deployment for Every Push

이 단계는 선택사항이다. - 시도해보거나 읽고 넘어가자.

 

버셀로 배포한 후에, 가능한대로 해보자. : 

• 새로운 브런치를 생성한다
• 약간의 변화를 주고 깃헙에 푸시하자
• 새로운 pull request를 생성한다. (깃헙의 도움말)

pull 요청 페이지에서 vercel bot 의 코멘트를 확인하자.

 

이 코멘트내의 미리보기 링크를 클릭해보자. 변화된 것을 확인할 수 있다.

pull 요청을 열어놓으면, 버셀은 매번 푸시할 때마다 배포 미리보기를 자동으로 생성한다. 미리보기 링크는 항상 마지막 수정을 반영한다.

 

미리보기 링크를 공동 작업자에게 공유하거나 피드백을 반영할 수 있다. 

 

배포판에 문제가 없으면 main으로 병합하자. 그러면 버셀은 자동으로 운영 배포판을 생성한다.

 

 

개발, 미리보기, 배포

Develop, Preview, Ship

이런 작업 단계를 DPS 라고 부른다. : 개발(D), 미리보기(P), 그리고 배포(S)

 

• 개발 : Next.js로 코드를 작성하고 실행 중인 Next.js 개발 서버를 사용해 핫 새로고침 기능을 활용한다.
• 미리보기 : 깃헙의 변경 사항을 푸시하고, 버셀은 링크를 통해 사용할 수 있는 미리보기 배포를 생성한다.
• 배포 : main 으로 병합해 운영으로 배포한다.

우리는 강력하게 이 작업단계를 추천한다, Next.js 앱을 개발할 때, 더 빨리 반복할 수 있다.

 

 

Other Hosting Options

Other Hosting Options

Next.js는 Node.js 를 지원하는 여느 호스팅 제공자에게 배포될 수 있다.

 

당신은 package.json에 build와 start 스크립트를 작성해야 한다.

//package.json
{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

 

호스팅 제공자에게는 build 스크립트를 작동하면, 운영 응용프로그램을 .next 폴더로 빌드한다.

npm run build

 

빌드된 후, Node.js 서버에 start 스크립트가 시작된다. 그것은 정적인 페이지, 서버 측 렌더링 페이지, API 라우트를 모두 지원하는 하이브리드 페이지이다.

npm run start

 

팁 : package.json의 start 스크립트를 port 인자와 함께 사용자 정의할 수 있다. : "start" : "next start -p $PORT"

 

 

 

 

번역 : 2023. 01. 04.

영어를 잘하지 못하므로 부정확할 수 있습니다. 더 정확한 설명 or 번역이 있다면 댓글 환영합니다 *

 

 

출처

Next.js document - Deploying Your Next.js App 5 - 6

< 이전 페이지