Next js 튜토리얼 8편 : 배포

2019. 10. 10. 21:43·Nextjs

목차

Next js 튜토리얼 1편: 시작하기
Next js 튜토리얼 2편 : 페이지 이동 
Next js 튜토리얼 3편 : 공통 컴포넌트 사용

Next js 튜토리얼 4편 : 동적 페이지  

Next js 튜토리얼 5편 : 동적 라우팅  

Next js 튜토리얼 6편 : 데이터 가져오기  

Next js 튜토리얼 7편 : 컴포넌트 스타일링  

Next js 튜토리얼 8편 : 배포  - 현재 글


Deploying a Next.js App

▲ZEIT Now 를 통해 애플리캐이션을 매우 간단하고 확장 가능한 배포를 할 수 있습니다.
Node.js를 통해서도 비교적 간단하게 가능합니다.


그럼 Next.js를 배포하는 방법에 대해 알아 봅시다


Setup

아래의 예제를 다운로드해주세요
git clone https://github.com/zeit/next-learn-demo.git
cd next-learn-demo
cd 8-deploying

npm install
npm run dev


Deploying to ZEIT Now

먼저  Now 를 다운로드 해주세요
npm i -g now


그 다음 아래의 명령어를 루트 디렉토리에서 싱행하세요

now


그럼 ZEIT의 아이디를 입력하라고 터미널에 나옵니다.

회원가입이 안되어 있다면 가입 후에 아이디와 패스워드를 입력하면 배포는 완료 됩니다


보다 자세한 설명은 ▲ZEIT Now's documentation 를 참고하세요


Deploying to Your Own Environment

위에 언급했듯이 Next.js 앱을 자신의 환경에서도 배포 할 수 있습니다. 한가지의 요구사항은 Node.js 실행을 지원해야합니다.
어떻게 빌드하고 배포할 수 있는지 배워 봅시다

Build and Start

package.json에서 scripts부분을 확인 하세요

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


먼저 Next.js 앱을 빌드해야 합니다. 이는 배포를 위한 최적화된 코드를 생성합니다

npm run build


그 후 포트를 지정해서 Next.js앱을 실행해야 합니다. 이 서버는 서버 사이드 렌더링을 수행 하고 정적인 페이지를 보여줄 것입니다. 

'start'스크립트를 통해 실행하세요

npm run start


그 후  http://localhost:3000를 통해 앱이 실행되는 것을 확인 할 수 있습니다


Run two instances

이번 장에서는 앱을 두개의 인스턴스를 실행해 보겠습니다. 보통 수평확장성을 위해 사용합니다.
 * 수평확장성 : 노드를 추가함으로써 다수의 서버를 생성하는 효과를 기대하며 처리 성능을 높이는 일

package.json의 scripts 부분을 아래와 같이 수정하세요

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start -p $PORT"
  }


스크립트 중 'start' 명령어를 바꾸었습니다. 이제 포트를 지정해서 앱을 실행해 봅시다.

실행 전에 빌드 합니다

npm run build


그 후 터미널에 아래의 커맨드를 하나씩 실행하세요. 

PORT=8000 npm start

PORT=9000 npm start


Build Once, Run Many Instances

빌드는 한번만 하면 됩니다. 그 후 원하는 대로 여러 포트에서 실행 시킬 수 있습니다.

Finally

ZEIT 또는 node.js에서 Next.js를 배포하는 방법에 대해 알아보았습니다. 
deploying Next.js 에서 더 자세한 내용을 볼 수 있습니다.
배포에 대해 궁금한 점이 있다면 어제든지 Spectrum 로 ping을 보내세요



Next js 튜토리얼 1편: 시작하기
Next js 튜토리얼 2편 : 페이지 이동 
Next js 튜토리얼 3편 : 공통 컴포넌트 사용

Next js 튜토리얼 4편 : 동적 페이지  

Next js 튜토리얼 5편 : 동적 라우팅  

Next js 튜토리얼 6편 : 데이터 가져오기  

Next js 튜토리얼 7편 : 컴포넌트 스타일링  

Next js 튜토리얼 8편 : 배포  - 현재 글

반응형
저작자표시 (새창열림)

'Nextjs' 카테고리의 다른 글

next + pwa 홈화면에 추가 버튼 생성  (0) 2020.05.28
next + pwa 설정  (0) 2020.05.28
Next js 튜토리얼 7편 : 컴포넌트 스타일링  (0) 2019.10.05
Next js 튜토리얼 6편 : 데이터 가져오기  (0) 2019.10.01
Next js 튜토리얼 5편 : 동적 라우팅  (0) 2019.10.01
'Nextjs' 카테고리의 다른 글
  • next + pwa 홈화면에 추가 버튼 생성
  • next + pwa 설정
  • Next js 튜토리얼 7편 : 컴포넌트 스타일링
  • Next js 튜토리얼 6편 : 데이터 가져오기
vitnal
vitnal
4년차 프론트엔드 개발자 입니다. 이 블로그는 기록하고 싶은 내용을 저장하기 위해 사용하고 있습니다. 정제되지 않은 내용이 있을 수 있는 점 양해 부탁드립니다.
  • vitnal
    vitnal 아카이브
    vitnal
  • 전체
    오늘
    어제
    • 분류 전체보기 (154)
      • What I Read (2)
      • AI (5)
      • WEB (8)
      • React (21)
      • Nextjs (17)
      • JavaScript (16)
      • React Native (5)
      • Git (15)
      • Dev Tools (23)
      • Deploy (12)
      • Tech Memo (22)
      • Retrospect (7)
  • 반응형
  • hELLO· Designed By정상우.v4.10.5
vitnal
Next js 튜토리얼 8편 : 배포
상단으로

티스토리툴바