🚀 Nitro 엔진과 최종 배포 실습: 정적 호스팅(SSG) 환경 구축

지금까지 우리는 Nuxt의 자동화된 기능들을 활용하여 애플리케이션을 개발했습니다. 하지만 이 프로젝트를 전 세계 사용자들이 볼 수 있게 하려면, 빌드(Build) 과정을 거쳐 배포(Deployment)해야 합니다.

Nuxt 3/4의 핵심인 Nitro 엔진은 복잡한 배포 환경(Node.js 서버, 서버리스, 정적 호스팅)에 맞게 코드를 최적화하고 최종 결과물을 생성해 줍니다. 이번 시간에는 가장 빠르고 저렴한 배포 방식인 정적 사이트 생성(SSG)을 실습해 봅시다.

1. 🔍 빌드 모드 이해: SSR vs. SSG

Nuxt는 기본적으로 SSR(Server-Side Rendering) 모드로 작동합니다. 하지만 블로그나 간단한 웹사이트처럼 데이터가 자주 변하지 않는 페이지는 빌드 시점에 HTML 파일을 미리 생성하는 SSG(Static Site Generation) 모드를 사용하는 것이 훨씬 유리합니다.

모드	설명	장점	단점
SSR	요청 시 서버에서 HTML 생성	실시간 데이터 처리 가능	서버 비용 발생
SSG	빌드 시 HTML 파일을 미리 생성	서버리스, 속도 매우 빠름	빌드 후 데이터 변경 불가

2. ⚙️ 실습 1: SSG 모드로 Nuxt 설정하기

프로젝트를 SSG 모드로 빌드하도록 nuxt.config.ts 파일을 설정해야 합니다.

1. nuxt.config.ts 파일을 엽니다.
2. ssr 옵션을 false로 설정하고, target 옵션을 static으로 지정했던 Nuxt 2 방식 대신, prerender 옵션을 사용하여 빌드 시 미리 생성할 경로를 지정합니다.주의: /users와 같이 API 데이터를 가져오는 페이지도 prerender에 포함하면, Nuxt는 빌드 시점에 API를 호출하여 그 결과를 포함한 정적 HTML 파일을 생성합니다.

// nuxt.config.ts

export default defineNuxtConfig({
  // SSG 모드 사용 시 기본적으로 'ssr: true'를 유지하고 
  // Nitro 설정을 통해 빌드 방식을 제어합니다.

  // 1. 빌드할 경로 목록 지정
  nitro: {
    prerender: {
      routes: [
        '/',         // 홈 페이지
        '/about',    // 소개 페이지
        '/login',    // 로그인 페이지 (미리 빌드)
        '/users'     // 사용자 목록 페이지 (useFetch가 SSG에 맞게 처리됨)
      ]
    }
  },
  // ... (기존 설정 유지)
})

3. 📦 실습 2: 정적 파일 생성 (npm run generate)

SSG 모드에서는 npm run build 대신 npm run generate 명령어를 사용하여 배포 가능한 정적 파일들을 생성합니다.

1. 정적 파일 생성 명령어 실행: 터미널에 다음 명령어를 입력합니다.

   npm run generate
   

2. 결과 확인: 명령이 성공적으로 완료되면, 프로젝트 루트에 .output/public 폴더가 생성됩니다. 이 폴더 안에 index.html, /about/index.html 등 설정한 경로에 해당하는 순수 HTML 파일과 CSS, JS 에셋들이 담겨 있습니다.
   • 이 .output/public 폴더가 바로 Netlify, Vercel, GitHub Pages 등에 업로드할 최종 배포본입니다.

4. 🌐 실습 3: Vercel 또는 Netlify에 배포하기

SSG로 생성된 파일은 서버 엔진이 필요 없기 때문에, 정적 호스팅 서비스에 배포하는 것이 가장 빠르고 비용 효율적입니다.

4.1. Vercel 또는 Netlify 계정 준비

1. Vercel 또는 Netlify 계정에 로그인하고, 프로젝트 코드가 올라가 있는 GitHub/GitLab/Bitbucket 등의 저장소에 연결합니다.
2. 새 프로젝트를 생성하고 해당 저장소를 선택합니다.

4.2. 배포 설정 (자동 감지)

Vercel이나 Netlify는 Nuxt 프로젝트를 자동으로 감지하고 대부분의 설정을 자동으로 적용합니다.

설정 항목	Nuxt 자동 설정 값
Build Command	npm run generate
Output Directory	.output/public

별도의 설정 변경 없이 기본값을 그대로 사용하고 "Deploy" 버튼을 누릅니다.

4.3. 최종 확인

배포가 완료되면 할당된 URL(예: https://your-nuxt-app.vercel.app)로 접속하여 페이지가 정상적으로 로드되는지 확인합니다. 이제 여러분의 Nuxt 앱은 전 세계에서 가장 빠른 정적 호스팅 환경에서 서비스되고 있습니다.

---

📝 블로그 마무리: 성공적인 배포

이번 시간에는 Nuxt의 Nitro 엔진을 이해하고, SSG 모드로 프로젝트를 빌드하여 가장 빠르고 안정적인 정적 호스팅 환경에 성공적으로 배포했습니다.