15. 배포

Nuxt 앱은 Node.js 서버, 사전 렌더링된 스태틱 호스팅, 혹은 서버리스 또는 엣지(CDN) 환경에 배포될 수 있다.

참고) 호스트 제공자들

 

Node.js 서버

모든 Node 호스팅에 배포할 수 있도록 Nitro가 포함된 Node.js 서버는...

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

진입 지점

노드 서버 사전 설정을 사용 하여 실행하면 nuxt build 결과는 즉시 실행 가능한 노드 서버를 시작하는 진입점이 된다.

터미널)

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 서버로 기동된다. 대우분의 경우 nginx, CloudFlare 같은 리버스 프록시 뒤에서 기동되기 때문에 필요가 없다.

 

PM2

PM2(Process Manager 2) Nuxt 앱을 호스팅하기 위한 쉽고 빠른 솔루션이다.

// ecosystem.config.js

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

 

클러스터 모드

Node.js 클러스터 모듈을 사용하여 다중 프로세스 성능을 활용하기 위해 NITRO_PRESET=node_cluster 를 사용할 수 있다.

기본적으로 워크로드는 라운드 로빈 전략을 통해 작업자에게 분산된다.

 

더 알아보기

참고)  Node 서버 사전 설정

 

정적 호스팅

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

• ssr: true 로 빌드 시 애플리케이션의 사전 렌더링 경로를 사용하는 정적 사이트가 생성(SSG)된다. (이는 nuxi generate 를 실행할 때의 기본 동작이다 .) 또한 클라이언트에서 /200.html 에 해당하는 동적 경로나 404 오류를 렌더링할 수 있는 폴백(fallback) /404.html 단일 페이지를 생성한다(정적 호스트에서 이를 구성해야 할 수도 있음) .
• 대안으로 ssr: false (정적 단일 페이지 앱)을 사용하여 사이트를 미리 렌더링할 수 있다. 그러면 Vue 앱이 일반적으로 렌더링되는 위치가 비어 있는<div id="nuxt"></div> HTML 페이지가 생성된다. 비어있는 내용을 사전 렌더링하면 여러가지 SEO 이점을 잃게 되므로 서버에서 렌더링할 수 없는 사이트의 일부분(있는 경우)만 래핑하는 데 <ClientOnly>를 사용하는 것이 좋다.

크롤링 기반 사전 렌더링

Nitro 크롤러를 사용하여 애플리케이션을 빌드하고 사전 렌더링하려면 nuxi generate 명령을 사용한다. 이 명령은 nitro.statict 옵션을 true 로 설정하여 nuxt build 하거나 nuxt build --prerender 로 설정하여  실행하는 것과 유사하다.

터미널)

npx nuxi generate

이게 전부다. 이제 output/public 디렉터리를 정적 호스팅 서비스에 배포하거나 npx serve .output/public 를 사용하여 로컬에서 미리 볼 수 있다. 

Nitro 크롤러 작동 방식:

• 애플리케이션의 루트 경로( /),  비동적 페이지 디렉터리 ~/pages 및 nitro.prerender.routes 배열의 ​​기타 경로의 HTML을 로드한다.
• HTML 과 payload.json 을 정적으로 제공할 ~/.output/public/  디렉터리 에 저장한다.
• 다른 경로로 이동하려면 HTML에서 모든 앵커 태그(<a href="...">)를 찾는다.
• 크롤링할 앵커 태그가 더 이상 없을 때까지 발견된 각 앵커 태그에 대해 1~3단계를 반복한다.

검색 가능한 페이지에 연결되지 않은 페이지는 자동으로 사전 렌더링될 수 없으므로 이를 이해하는 것이 중요하다.

참고) nuxi generate

 

선택적 사전 렌더링

Nitro가빌드 중에 가져오고 사전 렌더링할 경로를 수동으로 지정하거나 nuxt.config 파일에서 사전 렌더링하지 않으려는 /dynamic 경로를  무시할 수 있다.

// nuxt.config.ts

defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/user/1', '/user/2'],
      ignore: ['/dynamic']
    }
  }
})

 

이를 크롤러가 /sitemap.xml 또는 /robots.txt 과 같이  발견할 수 없는 경로 집합을 사전 렌더링하는 crawLinks 옵션을 사용할 수 있다.

// nuxt.config.ts

defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/sitemap.xml', '/robots.txt']
    }
  }
})

nitro.prerender 를  true 로 설정 한 것은 nitro.prerender.crawlLinks 를 true 설정한 것과 유사하다. 

참고) 사전 렌더링

 

클라이언트측 전용 렌더링

경로를 미리 렌더링하지 않으려는 경우 정적 호스팅을 사용하는 또 다른 방법은  nuxt.config 파일에서 ssr속성을 false 로 설정하는 것이다 . 그런 다음 nuxi generate 명령은 전통적인 클라이언트 측 Vue.js 애플리케이션과 같은 진입점 .output/public/index.html 및 JavaScript 번들을 출력한다.

// nuxt.config.ts

export default defineNuxtConfig({
  ssr: false
})

 

호스팅 제공업체

Nuxt 3는 최소한의 구성으로 여러 클라우드 제공업체에 배포할 수 있습니다.

참고) 배포

 

사전 설정(Presets)

Node.js 서버 및 정적 호스팅 서비스 외에도 Nuxt 3 프로젝트는 잘 테스트된 여러 사전 설정과 최소한의 구성으로 배포될 수 있다.

nuxt.config.ts 파일 에서 원하는 사전 설정을 명시적으로 설정할 수 있다.

// 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. Speed > Optimization > Auto Minify: Uncheck JavaScript, CSS and HTML
2. Speed > Optimization > Disable "Rocket Loader™"
3. Speed > Optimization > Disable "Mirage"
4. Scrape Shield > Disable "Email Address Obfuscation"
5. Scrape Shield > Disable "Server-side Excludes"

•  

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