배포

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

Node.js Server

Nitro의 Node.js 서버 프리셋을 사용해 어떤 Node 호스팅에도 배포하는 방법을 알아보세요.

• 지정되거나 자동 감지되지 않은 경우 기본 출력 형식
  
• 요청을 렌더링하는 데 필요한 청크만 로드하여 콜드 스타트 시간을 최적화
  
• Nuxt 앱을 어떤 Node.js 호스팅에도 배포하는 데 유용

Entry Point

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

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)는 서버나 VM에서 Nuxt 애플리케이션을 호스팅하기 위한 빠르고 쉬운 솔루션입니다.

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

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

Cluster Mode

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

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

Learn More

Static Hosting

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

• ssr: true인 정적 사이트 생성(SSG)은 빌드 시점에 애플리케이션의 라우트를 사전 렌더링합니다. (nuxt generate를 실행할 때의 기본 동작입니다.) 또한 /200.html 및 /404.html 단일 페이지 앱 폴백 페이지를 생성하여, 정적 호스트에서 별도 설정이 필요할 수 있지만, 클라이언트에서 동적 라우트나 404 오류를 렌더링할 수 있습니다.
• 또는 ssr: false(정적 단일 페이지 앱)로 사이트를 프리렌더링할 수 있습니다. 이 경우 일반적으로 Vue 앱이 렌더링되는 위치에 비어 있는 <div id="__nuxt"></div>가 포함된 HTML 페이지가 생성됩니다. 이렇게 하면 사이트 프리렌더링으로 인한 많은 SEO 이점을 잃게 되므로, 서버 렌더링할 수 없는(있다면) 사이트 일부만 <ClientOnly>로 감싸는 방식을 사용하는 것이 좋습니다.

Client-side Only Rendering

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

export default defineNuxtConfig({
  ssr: false,
})

Hosting Providers

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

Presets

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

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

export default defineNuxtConfig({
  nitro: {
    preset: 'node-server',
  },
})

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

NITRO_PRESET=node-server nuxt build

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

CDN Proxy

대부분의 경우 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 애플리케이션에 원치 않는 부작용을 일으킬 수 있는 스크립트를 주입하지 않도록 할 수 있습니다.