Hosting | TanStack Start React 文档

托管是将您的应用程序部署到互联网，以便用户可以访问它的过程。这是任何 Web 开发项目的关键部分，确保您的应用程序对全世界可用。TanStack Start 构建于 Nitro 之上，Nitro 是一个功能强大的服务器工具包，用于将 Web 应用程序部署到任何地方。Nitro 允许 TanStack Start 为任何托管提供商上的 SSR、流式传输和 hydration 提供统一的 API。

我应该使用什么？

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

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

什么是 Netlify？

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

要了解更多关于 Netlify 的信息，请访问 Netlify 网站
要注册，请访问 Netlify 仪表板

部署

警告

此页面仍在建设中。我们将持续更新此页面，尽快提供关于部署到不同托管提供商的指南！

当 TanStack Start 应用程序正在部署时，app.config.ts 文件中的 server.preset 值决定了部署目标。部署目标可以设置为以下值之一

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

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

Netlify

将 server.preset 值设置为 netlify 在您的 app.config.ts 文件中。

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    preset: 'netlify',
  },
})

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    preset: 'netlify',
  },
})

或者您可以使用 --preset 标志以及 build 命令，在构建应用程序时指定部署目标

npm run build --preset netlify

npm run build --preset netlify

使用 Netlify 的一键部署流程部署您的应用程序，您就准备就绪了！

Vercel

将您的 TanStack Start 应用程序部署到 Vercel 既简单又直接。只需将 app.config.ts 文件中的 server.preset 值设置为 vercel，您就可以将您的应用程序部署到 Vercel 了。

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    preset: 'vercel',
  },
})

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    preset: 'vercel',
  },
})

或者您可以使用 --preset 标志以及 build 命令，在构建应用程序时指定部署目标

npm run build --preset vercel

npm run build --preset vercel

使用 Vercel 的一键部署流程部署您的应用程序，您就准备就绪了！

Cloudflare Pages

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

安装

首先您需要安装 unenv

npm install unenv

npm install unenv

更新 app.config.ts

将 server.preset 值设置为 cloudflare-pages，并将 server.unenv 值设置为 unenv 中的 cloudflare 在您的 app.config.ts 文件中。

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'
import { cloudflare } from 'unenv'

export default defineConfig({
  server: {
    preset: 'cloudflare-pages',
    unenv: cloudflare,
  },
})

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'
import { cloudflare } from 'unenv'

export default defineConfig({
  server: {
    preset: 'cloudflare-pages',
    unenv: cloudflare,
  },
})

添加一个 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

将 server.preset 值设置为 node-server 在您的 app.config.ts 文件中。

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    preset: 'node-server',
  },
})

// Or you can use the --preset flag with the build command
// to specify the deployment target when building the application:
// npm run build --preset node-server

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    preset: 'node-server',
  },
})

// Or you can use the --preset flag with the build command
// to specify the deployment target when building the application:
// npm run build --preset 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 部署指南。

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

npm install react@rc react-dom@rc

npm install react@rc react-dom@rc

将 server.preset 值设置为 bun 在您的 app.config.ts 文件中。

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    preset: 'bun',
  },
})

// Or you can use the --preset flag with the build command
// to specify the deployment target when building the application:
// npm run build --preset bun

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    preset: 'bun',
  },
})

// Or you can use the --preset flag with the build command
// to specify the deployment target when building the application:
// npm run build --preset bun