[내보내번] Next.js docs - Deployment

내보내번(내가 보려고 내가 번역한...) Next.js docs

2021년 7월 11일 기준 Next.js 공식 문서를 번역했다.

※ 영어 전공자도 해외 유학파도 아니기에 번역에는 의역, 오역, 구글 번역이 무수히 많을 수 있으며, 혼자 공식문서를 참조해가며 번역하다 보니 오타도 많을 수 있다. 정확한 내용은 공식문서를 직접 살펴보거나 다른 정보들을 더 찾아보는 것을 추천한다.

(하지만 댓글 피드백도 환영합니다😃 )

Next.js 공식문서 확인하기>>

Deployment | Next.js

 

Vercel(Recommended) 

The easiest way to deploy Next.js to production is to use the Vercel platform from the creators of Next.js. Vercel is a cloud platform for static sites, hybrid apps, and Serverless Functions.

Next.js를 production으로 배포하는 가장 쉬운 방법은 Next.js를 만든 Vercel 플랫폼을 사용하는 것이다. Vercel은 정적 사이트, 하이브리드 앱, Serverless function들을 위한 클라우드 플랫폼이다.

Getting started

If you haven’t already done so, push your Next.js app to a Git provider of your choice: GitHub, GitLab, or BitBucket. Your repository can be private or public.
이미 Git으로 프로젝트를 관리하고 있지 않다면 당신의 선택에 따라 Git provider(GitHub, GitLab, BitBucket)에 당신의 Next.js 앱을 올리자. 코드 저장소는 private, public 무방하다.

Then, follow these steps: 
그리고는 아래의 순서대로 따라가자: 

1. Sign up to Vercel (no credit card is required).
   Vercel에 가입한다(신용카드 정보를 요구하지 않음).
2. After signing up, you’ll arrive on the “Import Project” page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: GitHub / GitLab / BitBucket).
   가입후에, Import Project 페이지가 보일 것이다. From Git Repository 아래에서 당신이 사용하는 Git 제공자를 선택하고 통합 설정을 한다. (각 Git 제공자 별 설명: GitHub/GitLab/BitBucket)
3. Once that’s set up, click “Import Project From …” and import your Next.js app. It auto-detects that your app is using Next.js and sets up the build configuration for you. No need to change anything — everything should work just fine!
   설정이 완료되면 Import Project From을 클릭하고 당신의 Next.js 앱을 가져오자. 당신의 앱이 Next.js를 사용하고 있는지 자동 감지되고 빌드 환경설정을 해준다. 어떤 것도 변경할 필요가 없다. — 모든 것이 제대로 동작할 것이다! 
4. After importing, it’ll deploy your Next.js app and provide you with a deployment URL. Click “Visit” to see your app in production.
   가져오고 난 후에, 당신의 Next.js 앱을 배포하고 배포 URL을 제공해줄 것이다. Visit을 클릭해서 production 상태의 당신의 앱을 확인할 수 있다. 

Congratulations! You’ve just deployed your Next.js app! If you have questions, take a look at the Vercel documentation.
축하한다! 방금 막 당신의 Next.js 앱을 배포했다! 궁금한 사항이 있다면 Vercel 공식문서를 보라. 

If you’re using a custom server, we strongly recommend migrating away from it (for example, by using 
dynamic routing). If you cannot migrate, consider other hosting options.
커스텀 서버를 사용하고 있다면, 벗어나는 것을(커스텀 서버에서 Next.js 자체 서버를 사용하는 것을 의미하는 것 같음.) 강력히 추천한다. (예를 들면, 동적 라우팅 사용). 그렇게 하는 것이 불가능하다면 다른 호스팅 옵션을 고려해보라. 

DPS: Develop, Preview, Ship

Let’s talk about the workflow we recommend using. Vercel supports what we call the DPS workflow: Develop, Preview, and Ship:
우리가 추천하는 워크플로우에 대해서 이야기해보자. Vercel은 DPS: Develop, Preview 그리고 Ship이라고 부르는 워크플로우를 지원한다:

• Develop: Write code in Next.js. Keep the development server running and take advantage of React Fast Refresh.
  Develop: Next.js로 코드를 작성한다. 개발 서버를 계속 동작하게 함으로 React Fast Refresh를 활용한다. 
  2021.04.03 - [Next.js] - [내보내번] Next.js docs - Fast Refresh
• Preview: Every time you push changes to a branch on GitHub / GitLab / BitBucket, Vercel automatically creates a new deployment with a unique URL. You can view them on GitHub when you open a pull request, or under “Preview Deployments” on your project page on Vercel. Learn more about it here.
  Preview: 매번 변경된 코드를 GitHub / GitLab / BitBucket에 올릴 때, Vercel은 자동으로 새로운 배포에 대한 고유 URL을 생성한다. GitHub에서 pull request를 열 때 확인할 수 있고 Vercel의 당신의 프로젝트 페이지에서 Preview Deployments에서도 볼 수 있다. 여기서 더 배워보자.
• Ship: When you’re ready to ship, merge the pull request to your default branch (e.g. main). Vercel will automatically create a production deployment.
  Ship: 배포할 준비가 되면 pull request를 기본 브랜치(예시. main)에 병합한다. Vercel은 자동으로 production 배포를 생성할 것이다. 

By using the DPS workflow, in addition to doing code reviews, you can do deployment previews. Each deployment creates a unique URL that can be shared or used for integration tests.
DPS 워크플로우를 사용하여 코드 리뷰와 배포 미리보기를 수행할 수 있다. 각 배포마다 공유되거나 통합 테스트에 사용될 수 있는 고유한 URL이 생성된다. 

Optimized for Next.js

Vercel is made by the creators of Next.js and has first-class support for Next.js.
Vercel은 Next.js의 개발자들에 의해 만들어졌고 Next.js에 대한 최고 수준의 지원을 제공한다. 

For example, the hybrid pages approach is fully supported out of the box.
예를 들면, 하이브리드 페이지들의 접근에 대해 기본적으로 완벽히 지원한다. 
*하이브리드 페이지: 2021.03.29 - [Next.js] - [내보내번] Next.js docs - Pages

• Every page can either use Static Generation or Server-Side Rendering.
  각 페이지는 정적 생성 혹은 서버 사이드 렌더링을 사용할 수 있다.
• Pages that use Static Generation and assets (JS, CSS, images, fonts, etc) will automatically be served from Vercel's Edge Network, which is blazingly fast.
  정적 생성과 assets(JS, CSS, 이미지, 폰트 등과 같은)을 사용하는 페이지들은 매우 빠른 Vercel의 Edge Network에서 자동으로 제공한다.  
• Pages that use Server-Side Rendering and API routes will automatically become isolated Serverless Functions. This allows page rendering and API requests to scale infinitely.
  서버사이드 렌더링과 API 라우트를 사용하는 페이지들은 자동으로 격리된 Serverless Functions이 될 것이다. 이를 통해 페이지 렌더링과 API 요청을 무한으로 확장할 수 있다. 

Custom Domains, Environment Variables, Automatic HTTPS, and more

• Custom Domains: Once deployed on Vercel, you can assign a custom domain to your Next.js app. Take a look at our documentation here.
  커스텀 도메인: Vercel에 배포되면, 커스텀 도메인을 당신의 Next.js 앱에 할당할 수 있다. 우리의 문서를 확인해보라. 
• Environment Variables: You can also set environment variables on Vercel. Take a look at our documentation here. You can then use those environment variables in your Next.js app.
  환경변수: Vercel에서 환경변수 역시 설정할 수 있다. 여기서 우리의 문서를 확인해보라. 그런 다음 이러한 환경변수들을 당신의 Next.js 앱에서 사용할 수 있다. 
• Automatic HTTPS: HTTPS is enabled by default (including custom domains) and doesn't require extra configuration. We auto-renew SSL certificates.
  자동 HTTPS: HTTPS가 기본적으로 활성화되어 있고(커스텀 도메인을 포함해서) 추가적인 설정이 필요없다. 우리가 SSL 인증서를 자동 갱신한다. 
• More: Read our documentation to learn more about the Vercel platform.
  추가적으로: 우리의 문서를 읽어보고 Vercel 플랫폼에 대해서 더 많은 점들에 대해 알아보라. 

Automatic Updates

When you deploy your Next.js application, you want to see the latest version without needing to reload.
Next.js 어플리케이션을 배포할 때 리로드 할 필요가 없이 최신 버전으로 보고 싶을 것이다. 

Next.js will automatically load the latest version of your application in the background when routing. For client-side navigation, next/link will temporarily function as a normal <a> tag.
Next.js는 라우팅할 때 백그라운드에서 자동으로 최신 버전을 로드한다. 클라이언트 측의 내비게이션에서 next/link는 일시적으로 보통의 <a> 태그로 동작할 것이다. 

If a new page (with an old version) has already been prefetched by next/link, Next.js will use the old version. Then, after either a full page refresh or multiple client-side transitions, Next.js will show the latest version.
만약 새로운 페이지가(이전 버전 포함) next/link에 의해서 프리패치된 경우, Next.js는 이전 버전을 사용한다. 그다음 전체 페이지가 새로고침 되거나 클라이언트 측의 여러 번의 전환 후에 Next.js는 최신 버전을 표시할 것이다. 

 

Other hosting options

Node.js Server

Next.js can be deployed to any hosting provider that supports Node.js. This is the approach you should take if you’re using a custom server.
Next.js는 Node.js를 지원하는 어떤 호스팅 제공자에서든 배포할 수 있다. 아래는 당신이 커스텀 서버를 사용하는 경우라면 따라야 하는 접근방식이다.

Make sure your package.json has the "build" and "start" scripts:
당신의 package.json에 build와 start 스크립트가 있는지 확인하라: 

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

 

'next build' builds the production application in the '.next' folder. After building, 'next start' starts a Node.js server that supports hybrid pages, serving both statically generated and server-side rendered pages.
'next build'는 .next 폴더에 production 어플리케이션을 빌드한다. 빌드 후에 'next start'는 정적 생성, 서버 사이드 렌더링 페이지 모두를 제공하는 하이브리드 페이지를 지원하는 Node.js 서버를 시작한다. 

Docker Image

Next.js can be deployed to any hosting provider that supports Docker containers. You can use this approach when deploying to container orchestrators such as Kubernetes or HashiCorp Nomad, or when running inside a single node in any cloud provider.
Next.js는 Docker 컨테이너를 지원하는 어떤 호스팅 제공자에서든 배포할 수 있다. 아래의 접근 방법을 쿠버네티스나 하시코프 노마드와 같은 컨테이너 오케스트레이터에 배포하거나 클라우드 제공자의 단일 노드 내에서 실행할 때 이 접근 방식을 사용할 수 있다. 

Here is a multi-stage Dockerfile using node:alpine that you can use:
아래는 node:alpine을 사용한 멀티 스테이지 Dockerfile이다.

# Install dependencies only when needed
FROM node:alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# Rebuild the source code only when needed
FROM node:alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN yarn build && yarn install --production --ignore-scripts --prefer-offline

# Production image, copy all the files and run next
FROM node:alpine AS runner
WORKDIR /app

ENV NODE_ENV production

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001

# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

USER nextjs

EXPOSE 3000

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry.
# ENV NEXT_TELEMETRY_DISABLED 1

CMD ["yarn", "start"]

Make sure to place this Dockerfile in the root folder of your project.
이 도커 파일을 프로젝트의 루트 폴더에 두었는지 확인하라.

You can build your container with 'docker build . -t my-next-js-app' and run it with 'docker run -p 3000:3000 my-next-js-app'.
'docker build . -t my-next-js-app' 명령어로 컨테이너를 빌드하고 'docker run -p 3000:3000 my-next-js-app'로 실행할 수 있다. 

Static HTML Export

If you’d like to do a static HTML export of your Next.js app, follow the directions on our documentation.
만일 당신의 Next.js 앱을 정적 HTML 내보내기 하기를 원한다면, 우리의 문서에 있는 지침을 따르라.