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

Node.js 서버

Nitro를 사용하여 어떤 Node 호스팅에도 배포할 수 있는 Node.js 서버 프리셋을 발견하세요.

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

진입점

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 서버는 nginx 또는 Cloudflare와 같은 리버스 프록시 뒤에서 SSL을 종료해야 합니다.

PM2

PM2 (프로세스 매니저 2)는 서버나 VM에서 Nuxt 애플리케이션을 호스팅하는 빠르고 쉬운 솔루션입니다.

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

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

클러스터 모드

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

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

더 알아보기

정적 호스팅

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

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

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

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

export default defineNuxtConfig({
  ssr: false
})

호스팅 제공자

Nuxt는 최소한의 구성으로 여러 클라우드 제공자에게 배포할 수 있습니다:

프리셋

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

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

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

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

NITRO_PRESET=node-server nuxt build

🔎 가능한 모든 배포 프리셋과 제공자를 확인하려면 Nitro 배포를 참조하세요.

CDN 프록시

대부분의 경우, Nuxt는 Nuxt 자체가 생성하거나 생성하지 않은 타사 콘텐츠와 함께 작동할 수 있습니다. 그러나 때때로 이러한 콘텐츠는 문제를 일으킬 수 있으며, 특히 Cloudflare의 "축소 및 보안 옵션"이 그렇습니다.

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

1. 속도 > 최적화 > 콘텐츠 최적화 > "Rocket Loader™" 비활성화
2. 속도 > 최적화 > 이미지 최적화 > "Mirage" 비활성화
3. 스크랩 쉴드 > "이메일 주소 난독화" 비활성화

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