v3
Nuxt on GitHub

배포

Nuxt 애플리케이션을 모든 호스팅 제공업체에 배포하는 방법을 알아보세요.

Nuxt 애플리케이션은 Node.js 서버에서 배포하거나, 정적 호스팅을 위해 사전 렌더링하거나, 서버리스 또는 엣지(CDN) 환경에 배포할 수 있습니다.

Nuxt를 지원하는 클라우드 제공업체 목록을 찾고 있다면 호스팅 제공업체 섹션을 참고하세요.

Node.js 서버

Nitro와 함께 Node.js 서버 프리셋을 사용하여 모든 Node 호스팅에 배포하는 방법을 알아보세요.

  • 기본 출력 형식은 지정되지 않았거나 자동 감지된 경우
  • 요청을 렌더링하는 데 필요한 청크만 로드하여 최적의 콜드 스타트 타이밍 제공
  • Nuxt 앱을 모든 Node.js 호스팅에 배포할 때 유용

엔트리 포인트

Node 서버 프리셋으로 nuxt build를 실행하면, 실행 준비가 된 Node 서버를 시작하는 엔트리 포인트가 생성됩니다.

Terminal
node .output/server/index.mjs

이 명령은 기본적으로 3000번 포트에서 대기하는 프로덕션 Nuxt 서버를 시작합니다.

다음 런타임 환경 변수를 인식합니다:

  • NITRO_PORT 또는 PORT (기본값: 3000)
  • NITRO_HOST 또는 HOST (기본값: '0.0.0.0')
  • NITRO_SSL_CERT 및 NITRO_SSL_KEY - 둘 다 존재할 경우, 서버를 HTTPS 모드로 시작합니다. 대부분의 경우, 테스트 목적이 아니라면 이 옵션을 사용하지 않아야 하며, Nitro 서버는 SSL을 종료하는 nginx나 Cloudflare와 같은 리버스 프록시 뒤에서 실행되어야 합니다.

PM2

PM2 (Process Manager 2)는 Nuxt 애플리케이션을 서버나 VM에서 호스팅하기 위한 빠르고 쉬운 솔루션입니다.

pm2를 사용하려면, ecosystem.config.cjs를 사용하세요:

ecosystem.config.cjs
module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      port: '3000',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs'
    }
  ]
}

클러스터 모드

Node.js cluster 모듈을 사용하여 멀티 프로세스 성능을 활용하려면 NITRO_PRESET=node_cluster를 사용할 수 있습니다.

기본적으로, 작업 부하는 라운드 로빈 전략으로 워커에 분배됩니다.

더 알아보기

Read more in node-server 프리셋에 대한 Nitro 문서.

정적 호스팅

Nuxt 애플리케이션을 모든 정적 호스팅 서비스에 배포하는 방법은 두 가지가 있습니다:

  • ssr: true로 정적 사이트 생성(SSG)을 사용하면, 빌드 시 애플리케이션의 라우트가 사전 렌더링됩니다. (nuxt generate를 실행할 때 기본 동작입니다.) 또한 /200.html 및 /404.html 단일 페이지 앱 폴백 페이지가 생성되어, 클라이언트에서 동적 라우트나 404 오류를 렌더링할 수 있습니다(정적 호스트에서 별도 설정이 필요할 수 있음).
  • 또는, ssr: false(정적 단일 페이지 앱)로 사이트를 사전 렌더링할 수 있습니다. 이 경우 Vue 앱이 렌더링되는 위치에 <div id="__nuxt"></div>만 있는 HTML 페이지가 생성됩니다. 사이트를 사전 렌더링할 때 얻을 수 있는 많은 SEO 이점을 잃게 되므로, 서버 렌더링이 불가능한 부분(있다면)에만 <ClientOnly>를 사용하는 것이 권장됩니다.
Read more in Nuxt 사전 렌더링.

클라이언트 사이드 전용 렌더링

라우트를 사전 렌더링하고 싶지 않다면, 정적 호스팅을 사용하는 또 다른 방법은 nuxt.config 파일에서 ssr 속성을 false로 설정하는 것입니다. 그러면 nuxt generate 명령이 .output/public/index.html 엔트리포인트와 JavaScript 번들을 출력하여, 고전적인 클라이언트 사이드 Vue.js 애플리케이션처럼 동작합니다.

nuxt.config.ts
export default defineNuxtConfig({
  ssr: false
})

호스팅 제공업체

Nuxt는 최소한의 설정만으로 여러 클라우드 제공업체에 배포할 수 있습니다:

Read more in https://nuxt.com/deploy.

프리셋

Node.js 서버와 정적 호스팅 서비스 외에도, Nuxt 프로젝트는 여러 검증된 프리셋과 최소한의 설정으로 배포할 수 있습니다.

원하는 프리셋을 nuxt.config.ts 파일에서 명시적으로 설정할 수 있습니다:

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: 'node-server'
  }
})

... 또는 nuxt build를 실행할 때 NITRO_PRESET 환경 변수를 사용할 수 있습니다:

Terminal
NITRO_PRESET=node-server nuxt build

🔎 모든 가능한 배포 프리셋과 제공업체는 Nitro 배포를 확인하세요.

CDN 프록시

대부분의 경우, Nuxt는 Nuxt 자체가 생성하거나 만든 것이 아닌 서드파티 콘텐츠와 함께 작동할 수 있습니다. 하지만 때때로 이러한 콘텐츠가 문제를 일으킬 수 있으며, 특히 Cloudflare의 "Minification and Security Options"가 그렇습니다.

따라서, Cloudflare에서 다음 옵션이 선택 해제/비활성화되어 있는지 확인해야 합니다. 그렇지 않으면 불필요한 재렌더링이나 하이드레이션 오류로 인해 프로덕션 애플리케이션에 영향을 줄 수 있습니다.

  1. Speed > Optimization > Content Optimization > "Rocket Loader™" 비활성화
  2. Speed > Optimization > Image Optimization > "Mirage" 비활성화
  3. Scrape Shield > "Email Address Obfuscation" 비활성화

이 설정을 통해 Cloudflare가 Nuxt 애플리케이션에 원치 않는 부작용을 일으킬 수 있는 스크립트를 삽입하지 않도록 할 수 있습니다.

Cloudflare 대시보드에서 이들의 위치가 가끔 변경될 수 있으니, 주저하지 말고 찾아보세요.