托管 | TanStack Start React Docs

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

我应该使用什么？

TanStack Start 设计为与任何托管提供商配合使用，因此如果您已经有了托管提供商，您��以使用 TanStack Start 提供的全栈 API 将应用程序部署到那里。

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

什么是 Netlify？

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

要了解更多关于 Netlify 的信息，请访问 Netlify 网站
要注册，请访问 Netlify 控制台

部署

Warning

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

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

netlify：部署到 Netlify
vercel：部署到 Vercel
cloudflare-pages：部署到 Cloudflare Pages
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 的一键部署流程部署您的应用程序，您就可以开始了！

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 的一键部署流程部署您的应用程序，您就可以开始了！

Cloudflare Workers

当部署到 Cloudflare Workers 时，您需要在用户开始使用您的应用程序之前完成一些额外的步骤。

更新 vite.config.ts

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

// 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"
pages_build_output_dir = "./dist"
compatibility_flags = ["nodejs_compat"]
compatibility_date = "2024-11-13"

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

使用 Cloudflare Pages 的一键部署流程部署您的应用程序，您就可以开始了！

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

Important

目前，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' })],
})

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

bun run build

bun run build

您现在已准备好将应用程序部署到 Bun 服务器。您可以通过运行以下命令启动应用程序：

bun run .output/server/index.mjs

bun run .output/server/index.mjs