托管 | TanStack Start Solid Docs

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

我应该使用什么？

TanStack Start 设计为与任何托管提供商一起工作，因此如果您已经有托管提供商，您可以使用 TanStack Start 提供的全栈 API 在那里部署您的应用程序。

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

什么是 Netlify？

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

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

部署

Warning

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

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

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

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

Netlify

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

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

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

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

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

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

Vercel

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

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

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

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

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

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

Cloudflare Pages

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

更新 vite.config.ts

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

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

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

// vite.config.ts
import { tanstackStart } from '@tanstack/solid-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 的一键部署流程将您的应用程序部署到 Cloudflare Pages，您就可以开始了！

Node.js

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

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

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

// vite.config.ts
import { tanstackStart } from '@tanstack/solid-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

确保您的 package.json 文件中有 solid-js。如果没有，请运行以下命令升级包：

npm install solid-js

npm install solid-js

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

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

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

// vite.config.ts
import { tanstackStart } from '@tanstack/solid-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