Next.js 튜토리얼 9편: 배포하기
React 서버사이드 렌더링 프레임워크 Next.js Tutorial
* 이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다.
** 오역 및 오탈자가 있을 수 있습니다. 발견하시면 제보해주세요!
목차
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:8000와 http://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를 제출하세요.
#React #리액트 #Zeit #Next.js #SSR #JavaScript #자바스크립트 #프레임워크 #framework #가이드 #튜토리얼 #한글 #번역
