Hosting | 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 应用程序时，server.preset 文件 app.config.ts 中的值决定了部署目标。部署目标可以设置为以下值之一

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/solid-start/config'

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

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

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

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

npm run build --preset netlify

npm run build --preset netlify

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

Vercel

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

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

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

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

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

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

npm run build --preset vercel

npm run build --preset vercel

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

Cloudflare Pages

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

安装

首先，您需要安装 unenv

npm install unenv

npm install unenv

更新 app.config.ts

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

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

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

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

Node.js

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

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

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

npm install solid-js

npm install solid-js

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

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