托管 | TanStack Start Solid 文档

托管是指将应用程序部署到互联网，以便用户可以访问。这是任何 Web 开发项目中的关键部分，确保您的应用程序可供全球用户使用。TanStack Start 构建在 Nitro 之上，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 仪表板

部署

警告

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

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

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

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

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

然后，您可以使用以下命令构建并启动您的应用程序：