Hosting

호스팅은 애플리케이션을 인터넷에 배포하여 사용자가 접근할 수 있도록 하는 과정입니다. 이는 모든 웹 개발 프로젝트에서 중요한 단계로, 애플리케이션이 전 세계에 제공될 수 있도록 보장합니다. TanStack Start는 웹 애플리케이션을 어디서나 배포할 수 있는 강력한 서버 툴킷인 Nitro (opens in a new tab)를 기반으로 구축되었습니다. Nitro를 통해 TanStack Start는 모든 호스팅 제공업체에서 SSR, 스트리밍 및 하이드레이션을 위한 통합 API를 제공합니다.

What should I use?

TanStack Start는 어떤 호스팅 제공업체와도 작동하도록 설계되었기 때문에, 이미 염두에 둔 호스팅 제공업체가 있다면 TanStack Start가 제공하는 풀스택 API를 사용하여 애플리케이션을 배포할 수 있습니다.

그러나 호스팅은 애플리케이션의 성능, 안정성 및 확장성에서 가장 중요한 요소 중 하나이므로, 최상의 호스팅 경험을 위해 Vercel (opens in a new tab)을 사용하는 것을 강력히 추천합니다.

What is Vercel?

Vercel은 웹 애플리케이션 배포를 위한 빠르고, 안전하며, 안정적인 환경을 제공하는 선도적인 호스팅 플랫폼입니다. Vercel을 사용하면 TanStack Start 애플리케이션을 몇 번의 클릭만으로 배포할 수 있으며, 글로벌 엣지 네트워크, 자동 확장, GitHub 및 GitLab과의 원활한 통합과 같은 기능을 활용할 수 있습니다. Vercel은 로컬 개발에서 프로덕션 배포까지 개발 프로세스를 최대한 원활하게 만들어줍니다.

Vercel에 대해 더 알아보려면 Vercel 웹사이트 (opens in a new tab)를 방문하세요.
가입하려면 Vercel 대시보드 (opens in a new tab)를 방문하세요.

Deployment

[!WARNING] 이 페이지는 아직 작업 중입니다. 곧 다양한 호스팅 제공업체에 대한 배포 가이드가 추가될 예정입니다!

TanStack Start 애플리케이션을 배포할 때, app.config.ts 파일의 server.preset 값을 사용하여 배포 대상을 결정합니다. 배포 대상은 다음 값 중 하나로 설정할 수 있습니다:

vercel: Vercel에 배포
cloudflare-pages: Cloudflare Pages에 배포
netlify: Netlify에 배포
node-server: Node.js 서버에 배포
bun: Bun 서버에 배포
... 그리고 더 많은 옵션이 추가될 예정입니다!

배포 대상을 선택한 후, 아래 배포 가이드를 따라 TanStack Start 애플리케이션을 원하는 호스팅 제공업체에 배포하세요.

Vercel

TanStack Start 애플리케이션을 Vercel에 배포하는 것은 쉽고 간단합니다. app.config.ts 파일에서 server.preset 값을 vercel로 설정하면 애플리케이션을 Vercel에 배포할 준비가 완료됩니다.

// app.config.ts
import { defineConfig } from "@tanstack/start/config";
 
export default defineConfig({
  server: {
    preset: "vercel",
  },
});

또는 build 명령어에서 --preset 플래그를 사용하여 애플리케이션을 빌드할 때 배포 대상을 지정할 수도 있습니다:

npm run build --preset vercel

이제 Vercel의 원클릭 배포 프로세스를 통해 애플리케이션을 배포하세요!

Cloudflare Pages

Cloudflare Pages에 배포하려면 몇 가지 추가 단계를 완료해야 사용자가 애플리케이션을 사용할 수 있습니다.

설치

먼저 unenv를 설치해야 합니다:

npm install unenv

app.config.ts 업데이트

app.config.ts 파일에서 server.preset 값을 cloudflare-pages로, server.unenv 값을 unenv의 cloudflare로 설정합니다.

// app.config.ts
import { defineConfig } from "@tanstack/start/config";
import { cloudflare } from "unenv";
 
export default defineConfig({
  server: {
    preset: "cloudflare-pages",
    unenv: cloudflare,
  },
});

wrangler.toml 구성 파일 추가

# wrangler.toml
name = "your-cloudflare-project-name"
pages_build_output_dir = "./dist"
compatibility_flags = ["nodejs_compat"]
compatibility_date = "2024-11-13"

이제 Cloudflare Pages의 원클릭 배포 프로세스를 사용하여 애플리케이션을 배포하세요!

Netlify

app.config.ts 파일에서 server.preset 값을 netlify로 설정합니다.

// app.config.ts
import { defineConfig } from "@tanstack/start/config";
 
export default defineConfig({
  server: {
    preset: "netlify",
  },
});

또는 build 명령어에서 --preset 플래그를 사용하여 애플리케이션을 빌드할 때 배포 대상을 지정할 수도 있습니다:

npm run build --preset netlify

Netlify의 원클릭 배포 프로세스를 통해 애플리케이션을 배포하세요!

Node.js

app.config.ts 파일에서 server.preset 값을 node-server로 설정합니다.

// app.config.ts
import { defineConfig } from "@tanstack/start/config";
 
export default defineConfig({
  server: {
    preset: "node-server",
  },
});
 
// 또는 build 명령어에서 --preset 플래그를 사용하여 배포 대상을 지정할 수 있습니다:
// npm run build --preset node-server

애플리케이션을 빌드하고 시작하려면 다음 명령어를 실행합니다:

npm run build

이제 Node.js 서버에 애플리케이션을 배포할 준비가 되었습니다. 애플리케이션을 시작하려면 다음 명령어를 실행하세요:

node .output/server/index.mjs

Bun

[!IMPORTANT] 현재 Bun 전용 배포 지침은 React 19에서만 작동합니다. React 18을 사용하는 경우 Node.js 배포 지침을 참조하세요.

react 및 react-dom 패키지가 19.0.0 이상으로 설정되어 있는지 확인하세요. 그렇지 않다면 다음 명령어를 실행하여 패키지를 업그레이드하세요:

npm install react@rc react-dom@rc

app.config.ts 파일에서 server.preset 값을 bun으로 설정합니다.

// app.config.ts
import { defineConfig } from "@tanstack/start/config";
 
export default defineConfig({
  server: {
    preset: "bun",
  },
});
 
// 또는 build 명령어에서 --preset 플래그를 사용하여 배포 대상을 지정할 수 있습니다:
// npm run build --preset bun

애플리케이션을 빌드하고 시작하려면 다음 명령어를 실행합니다:

bun run build

이제 Bun 서버에 애플리케이션을 배포할 준비가 되었습니다. 애플리케이션을 시작하려면 다음 명령어를 실행하세요:

bun run .output/server/index.mjs

SSR Authentication