托管 | TanStack Start React 文档

托管是将您的应用程序部署到互联网，以便用户可以访问它的过程。这是任何 Web 开发项目的关键部分，确保您的应用程序对全世界可用。TanStack Start 基于 Vite 构建，Vite 是一个强大的开发/构建平台，它使我们能够将您的应用程序部署到任何托管提供商。

我应该使用什么？

TanStack Start 旨在与任何托管提供商配合使用，因此如果您已经有心仪的托管提供商，可以使用 TanStack Start 提供的全栈 API 将您的应用程序部署到那里。

然而，由于托管是应用程序性能、可靠性和可扩展性最关键的方面之一，我们强烈建议使用我们的官方托管合作伙伴 Netlify。

什么是 Netlify？

Netlify 是一个领先的托管平台，它为部署您的 Web 应用程序提供了一个快速、安全和可靠的环境。使用 Netlify，您只需点击几下即可部署您的 TanStack Start 应用程序，并受益于全球边缘网络、自动扩展以及与 GitHub 和 GitLab 的无缝集成等功能。Netlify 旨在使您的开发过程尽可能顺畅，从本地开发到生产部署。

要了解有关 Netlify 的更多信息，请访问 Netlify 网站
要注册，请访问 Netlify 面板

部署

警告

此页面仍在完善中。我们将尽快更新此页面，提供部署到不同托管提供商的指南！

部署 TanStack Start 应用程序时，vite.config.ts 文件中 TanStack Start Vite 插件的 target 值决定了部署目标。部署目标可以设置为以下值之一

netlify：部署到 Netlify
vercel：部署到 Vercel
cloudflare-pages：部署到 Cloudflare Pages
railway：部署到 Railway
node-server：部署到 Node.js 服务器
bun：部署到 Bun 服务器
... 更多即将推出！

选择部署目标后，您可以按照下面的部署指南将您的 TanStack Start 应用程序部署到您选择的托管提供商。

Netlify

在 vite.config.ts 文件中，将 TanStack Start Vite 插件中的 target 值设置为 'netlify'。

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'netlify' })],
})

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'netlify' })],
})

使用 Netlify 的一键部署流程将您的应用程序部署到 Netlify，然后即可开始使用！

Vercel

在 vite.config.ts 文件中，将 TanStack Start Vite 插件中的 target 值设置为 'vercel'。

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'vercel' })],
})

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'vercel' })],
})

使用 Vercel 的一键部署流程将您的应用程序部署到 Vercel，然后即可开始使用！

Cloudflare Workers

部署到 Cloudflare Workers 时，您需要完成一些额外的步骤，然后用户才能开始使用您的应用程序。

更新 vite.config.ts

在您的 vite.config.ts 文件中，将 target 值设置为 cloudflare-module。

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'cloudflare-module' })],
})

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'cloudflare-module' })],
})

添加 wrangler.toml 配置文件

toml

# wrangler.toml
name = "your-cloudflare-project-name"
main = "./.output/server/index.mjs"
compatibility_date = "2025-04-01"
compatibility_flags = ["nodejs_compat"]

[assets]
binding = "ASSETS"
directory = "./.output/public"

# wrangler.toml
name = "your-cloudflare-project-name"
main = "./.output/server/index.mjs"
compatibility_date = "2025-04-01"
compatibility_flags = ["nodejs_compat"]

[assets]
binding = "ASSETS"
directory = "./.output/public"

使用 Cloudflare Workers 的一键部署流程将您的应用程序部署到 Cloudflare Workers，然后即可开始使用！

Railway

Railway 在构建和部署到服务时会自动检测构建和启动命令。

在您的 vite.config.ts 文件中，将 target 值设置为 node-server。

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'node-server' })],
})

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'node-server' })],
})

确保您的 package.json 文件中存在 build 和 start npm 脚本

json

    "build": "vite build",
    "start": "node .output/server/index.mjs"

    "build": "vite build",
    "start": "node .output/server/index.mjs"

然后您可以运行以下命令来构建您的应用程序

npm run build

npm run build

您可以通过运行以下命令来启动您的应用程序

npm run start

npm run start

Node.js

在您的 vite.config.ts 文件中，将 target 值设置为 node-server。

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'node-server' })],
})

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'node-server' })],
})

然后您可以运行以下命令来构建并启动您的应用程序

npm run build

npm run build

您现在可以将您的应用程序部署到 Node.js 服务器。您可以通过运行以下命令来启动您的应用程序

node .output/server/index.mjs

node .output/server/index.mjs

Bun

重要

目前，Bun 特定的部署指南仅适用于 React 19。如果您使用的是 React 18，请参阅 Node.js 部署指南。

确保您的 package.json 文件中的 react 和 react-dom 包版本设置为 19.0.0 或更高。如果不是，请运行以下命令升级包

npm install react@rc react-dom@rc

npm install react@rc react-dom@rc

在您的 vite.config.ts 文件中，将 target 值设置为 bun。

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'bun' })],
})

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'bun' })],
})

然后您可以运行以下命令来构建并启动您的应用程序