Next.js 튜토리얼 9편: 배포하기

React 서버사이드 렌더링 프레임워크 Next.js Tutorial

트레바리 / 조회수 : 19546


* 이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다.

** 오역 및 오탈자가 있을 수 있습니다. 발견하시면 제보해주세요!



목차

1편: 시작하기 

2편: 페이지 이동 

3편: 공유 컴포넌트

4편: 동적 페이지

5편: 라우트 마스킹

6편: 서버 사이드

7편: 데이터 가져오기

8편: 컴포넌트 스타일링

9편: 배포하기 - 현재 글



개요

아래와 같은 궁금증이 생긴 적이 있나요?

어떻게 내가 만든 Next.js 애플리케이션을 배포할 수 있나요?


아직 배포에 대해 이야기하지 않았지만 배포하는 것은 꽤 간단하고 직관적입니다.


Node.js를 동작할 수 있는 곳이라면 어디든 Next.js 애플리케이션을 배포할 수 있습니다. 매우 간단한 ▲ZEIT now로 배포하는 데에도 불구하고 어떤 잠금 장치도 없습니다.



설치

이번 장에서는 간단한 Next.js 애플리케이션이 필요합니다. 다음의 샘플 애플리케이션을 다운받아주세요:


아래의 명령어로 실행시킬 수 있습니다:


이제 http://localhost:3000로 이동하여 애플리케이션에 접근할 수 있습니다.



Build와 Start

처음으로 프로덕션에 우리의 Next.js 애플리케이션을 빌드해야 합니다. 빌드는 최적화된 프로덕션의 코드 세트를 생산합니다.


이를 위해 간단히 다음의 npm 스크립트를 추가하세요:


그런 다음 하나의 포트에서 Next.js를 시작해야 합니다. 사이드 렌더링을 수행하고 페이지를 제공합니다. (위의 명령으로 빌드됩니다)


이를 위해 다음의 npm 스크립트를 추가하세요:


이러면 3000 포트에서 우리의 애플리케이션이 시작됩니다.


이제 프로덕션에서 애플리케이션을 동작시키 위해 다음의 명령어를 실행할 수 있습니다:



두 개의 인스턴스 실행하기

애플리케이션의 인스턴스 두 개를 실행시켜 봅시다. 대부분 앱을 수평으로 확장하기 위해 이 작업을 수행합니다. 

처음으로 start npm 스크립트를 다음과 같이 변경해봅시다:

만약 Winodws라면 next start -p %PORT%로 스크립트를 변경해야 합니다.


이제 애플리케이션을 처음으로 빌드해봅시다.

npm run build


그러면 터미널에서 다음의 명령어로 실행시켜 봅시다:

PORT=8000 npm start
PORT=9000 npm start
Winodws에서는 다른 명령어를 실행시켜야 합니다. 하나의 옵션은 애플리케이션에 cross-env npm 모듈을 설치하는 것입니다.
그런 다음 커맨드 라인에서 cross-env PORT=9000 npm start를 동작시켜 주세요.


두 개의 포트 모두에서 애플리케이션에 접근할 수 있나요?

- 네. http://localhost:8000http://localhost:9000 둘 다 접근할 수 있습니다.

- http://localhost:8000에서만 접근 가능합니다.

- http://localhost:9000에서만 접근 가능합니다.

- 둘 다 접근할 수 없습니다.



한 번의 빌드로 많은 인스턴스 실행시키기

보다시피 애플리케이션을 한 번 빌드해야 합니다. 그런 다음 원하는만큼의 많은 포트들을 시작할 수 있습니다.



▲ZEIT now에 배포하기

Next.js 애플리케이션을 빌드하고 시작하는 방법을 배웠습니다. npm 스크립트를 사용하여 모든 것을 수행했습니다. 그래서 원하는 배포 서비스를 사용해서 동작하도록 애플리케이션을 설정할 수 있습니다.


하지만 ▲ZEIT now를 사용하면 딱 한 번의 과정만 수행하면 됩니다.


다음과 같은 npm 스크립트만 추가해주세요:


그런 다음 now를 설치해주세요. 설치 후 다음 명령어를 적용해주세요:

now
기본적으로 애플리케이션의 루트 디렉터리 안에서 "now" 명령어를 실행합니다.


여기에서 애플리케이션을 시작하는 포트로 8000 포트를 지정했지만 ZEIT now에 배포할 때 변경하지 않았습니다.


그러면 ZEIT now에 배포할 때 애플리케이션에 접근할 수 있는 포트는 어떤 것일까요?

- 8000

- 443 (혹은 언급되는 포트가 없음)

- URL에 언급한 모든 포트

- 에러를 표시한다. "443 포트에서만 시작할 수 있습니다"



ZEIT는 항상 443 포트를 사용합니다

실제로 8000 포트에서 애플리케이션을 시작해도 now에 배포될 때는 443 포트를 사용해서 접근할 수 있습니다. ("https" 웹사이트의 기본 포트)


이것은 ▲ZEIT now의 특징입니다. 원하는 포트에서 애플리케이션을 시작해야 합니다. ▲ZEIT now는 항상 443 포트로 매핑합니다.



로컬에서 애플리케이션 빌드하기

▲ZEIT now는 npm build 스크립트를 발견하고 빌드 인프라 내부에 빌드합니다.


하지만 모든 호스팅 제공자가 이와 같은 것을 가지고 있지는 않습니다.

이 경우 로컬에서 다음의 명령어를 사용해서 빌드할 수 있습니다:

npm run build


그런 다음 .next 디렉터리를 사용하여 애플리케이션을 배포하세요.



커스텀 서버를 사용하여 애플리케이션 배포하기

우리가 막 배포한 애플리케이션은 커스텀 서버 코드를 사용하지 않았습니다. 하지만 만약 사용한 경우에는 어떻게 배포할 수 있을까요?


다음의 브랜치로 체크아웃하세요:


커스텀 서버를 사용하여 애플리케이션을 실행하기 위해 애플리케이션에 Express를 추가해주세요:

npm install --save express



애플리케이션 빌드하기

이를 위해 next build를 사용하여 애플리케이션을 배포할 수 있습니다. 다음의 npm 스크립트를 추가해주세요:



애플리케이션 시작하기

프로덕션 애플리케이션임을 알리기 위해 커스텀 서버 코드를 생성해야 합니다.

이를 위해 server.js로부터 이 코드를 살펴봅시다.


이 부분을 살펴봅시다:


그러면 프로덕션으로 이와 같이 애플리케이션을 시작할 수 있습니다.


그래서 "npm start" 스크립트는 다음처럼 변경됩니다:



마무리

Next.js 애플리케이션을 배포하는 것에 대해 거의 다 배웠습니다.


문서에서 Next.js 배포하기에 대해 더 배울 수 있습니다.


배포에 대한 질문이 있다면 자유롭게 Slack에서 물어보거나 issue를 제출하세요.


#트레바리 #개발자 #안드로이드 #앱개발 #Next.js #백엔드 #인사이트 #경험공유


관련 스택

기업문화 엿볼 때, 더팀스

로그인

/