前言
Solid.js,一个比 React 更 react 的框架。每一个使用 React 的同学,你可以不使用,但不应该不了解。
目前 Solid.js 发布了最新的官方文档,但却缺少对应的中文文档。为了帮助大家学习 Solid.js,为爱发电翻译文档。
我同时搭建了 Solid.js 最新的中文文档站点:solid.yayujs.com ,欢迎勘误。
虽说是翻译,但个人并不喜欢严格遵守原文,为了保证中文阅读流畅,会删减部分语句,对难懂的部分也会另做补充解释,希望能给大家带来一个好的中文学习体验。
欢迎围观朋友圈、加入低调务实优秀中国好青年前端社群,一个人走得快,一群人走得远。
部署
您准备好部署 Solid 应用程序了吗?请遵循我们针对不同部署服务的指南。
Cloudflare
Cloudflare Pages 是面向前端开发人员的 JAMstack 平台,其中 JAMstack 代表 JavaScript、API 和 Markup。
有关更多详细信息和功能,您可以访问Cloudflare 网站。
使用 Cloudflare 的 Web 界面
- 导航到 Cloudflare 登录页面并登录或注册。
- 登录后,在左侧导航栏中找到"页面"。单击"创建项目"添加新项目,然后选择"连接到 Git"。
- 您可以选择在所有仓库或选定的仓库上安装 Cloudflare Pages。选择包含您的 Solid 项目的仓库。
- 配置您的构建设置:
- 项目名称将默认为仓库名称,但您可以根据需要更改它。
- 在"构建命令"字段中,输入
npm run build
。 - 对于"构建输出目录"字段,请使用
dist
。 - 添加环境变量
NODE_VERSION
并将其值设置为您正在使用的 Node.js 版本。
注意:此步骤至关重要,因为 Cloudflare Pages 使用早于 v13 的 Node.js 版本,该版本可能不完全支持 Solid 项目中使用的 bundler 程序 Vite。
- 配置完后,单击"保存并部署"。几分钟后,您的 Solid 项目将在 Cloudflare Pages 上线,可通过格式为
project_name.pages.dev
的 URL 进行访问。
使用 Wrangler CLI
Wrangler 是构建 Cloudflare Workers 的命令行工具。以下是使用 Wrangler 部署 Solid 项目的步骤。
- 使用您选择的包管理器来安装 Wrangler 命令行工具:
bash
# npm
npm i -g wrangler
# yarn
yarn global add wrangler
# pnpm
pnpm add -g wrangler
# bun
bun add -g wrangler
- 打开终端并运行以下命令来登录:
plain
wrangler login
- 执行以下命令来构建项目并使用 Wrangler 进行部署:
bash
# npm
npm run build
wrangler pages publish dist
# yarn
yarn build
wrangler pages publish dist
# pnpm
pnpm build
wrangler pages publish dist
# bun
bun build
wrangler pages publish dist
运行这些命令后,您的项目应该已上线。虽然终端可能会提供链接,但更可靠的是检查您的 Cloudflare Pages 仪表板中已部署的 URL,该 URL 通常采用 project-name.pages.dev
格式。
注意:请确保导航至 Cloudflare 网站仪表板中的 Speed
-> Optimization settings
部分并禁用 Auto Minify
选项。这很重要,因为缩小和删除注释可能会干扰水合作用。
Firebase
Firebase 是 Google 的一体化应用开发平台,提供从实时数据库到用户身份验证的一系列服务。有关可用服务的详细描述,您可以访问 Firebase 的文档。
在继续之前,请确保您已在 Firebase 控制台中设置了一个项目。如果还没有,您可以按照Firebase 的官方指南创建一个新的 Firebase 项目。
使用 Firebase CLI 工具
- 使用您首选的包管理器通过以下命令之一安装 Firebase 命令行工具:
bash
# npm
npm i -g firebase-tools
# yarn
yarn global add firebase-tools
# pnpm
pnpm add -g firebase-tools
# bun
bun add -g firebase-tools
- 执行
firebase login
命令以确保您已登录与您的项目关联的 Firebase 帐户。 - 在 Solid 项目的根目录中,创建两个新文件:
firebase.json
和.firebaserc
。
- 在
firebase.json
中,添加以下代码:
json
{
"hosting": {
"public": "dist",
"ignore": []
}
}
- 在
.firebaserc
中,插入以下代码(将<YOUR_FIREBASE_PROJECT_ID>
替换为您的 Firebase 项目 ID):
plain
{
"projects": {
"default": "<YOUR_FIREBASE_PROJECT_ID>"
}
}
- 运行
npm run build
,然后运行firebase deploy
来构建和部署您的项目。
完成后,将显示一个 Hosting URL
,表示您的项目已实时部署。
Netlify
Netlify 是一个广泛使用的托管平台,适合各种类型的项目。有关构建过程、部署选项和可用功能范围的详细指南,您可以访问 Netlify 文档。
使用 Netlify 网络界面
- 首先导航到 Netlify 的网站并登录或创建新的 Netlify。登录后,您将进入仪表板。单击
New site from Git
按钮启动新项目。
- 在下一页上,选择"连接到 GitHub"或您首选的 Git 仓库托管服务。
- 选择 Solid 项目仓库后,您将进入配置屏幕。将"发布目录"字段从
netlify
更新为dist
。然后,单击"部署"开始部署过程。
- 构建和部署完成后,您将进入一个界面,显示站点 URL。
使用 Netlify CLI
- 使用您首选的包管理器安装 Netlify CLI:
bash
# npm
npm i -g netlify-cli
# yarn
yarn global add netlify-cli
# pnpm
pnpm add -g netlify-cli
# bun
bun add -g netlify-cli
注意:在继续之前,请确保您的 Netlify 帐户和团队已完全设置。这对于无缝项目设置和部署至关重要。
- 打开终端,导航到项目目录,然后运行
netlify init
命令。使用受支持的登录选项进行身份验证。 - 按照 CLI 界面上的说明进行操作。当提示输入"要部署的目录"时,请指定
dist
--- 这是 Solid 仓构建的项目文件的位置。
完成该过程后,您的项目将部署在 Netlify 上,并可以通过提供的 URL 进行访问。
Vercel
Vercel 是一个广泛使用的平台,专门用于托管前端项目。有关构建和部署说明及其提供的功能的详细信息,请访问Vercel 文档。
使用 Vercel web 界面
- 导航至 vercel.com/login 登录或创建新帐户。连接您首选的 Git 仓库托管服务。
- 进入仪表板后,单击右上角的按钮并选择"添加新项目"。在下一页上,选择"继续使用 GitHub"或您首选的 Git 服务。
- 然后您将看到您的仓库列表。如果需要,请使用搜索栏查找要部署的特定仓库。单击"导入"按钮继续。
- 导入 Solid 项目仓库后,您将进入配置界面。如果您的项目需要任何环境变量,请将它们添加到指定字段中。单击"部署"开始部署过程。
- 构建和部署完成后,您将被重定向到显示站点截图的界面。
使用 Vercel CLI
- 使用您首选的包管理器安装 Vercel CLI。
bash
# npm
npm i -g vercel
# yarn
yarn global add vercel
# pnpm
pnpm add -g vercel
# bun
bun add -g vercel
- 打开终端,导航到项目目录,然后运行以下命令登录:
plain
vercel
- 按照 CLI 界面上的说明完成部署。完成后,您的项目将在 Vercel 上上线,并可通过提供的 URL 进行访问。
Railway
Railway is a well-known platform for deploying a variety of web and cloud-based projects.
For an in-depth look at the features offered by Railway, as well as detailed deployment guidelines, you can consult the Railway documentation.
Railway 是一个众所周知的部署各种网络和基于云的项目的平台。要深入了解 Railway 提供的功能以及详细的部署指南,您可以查阅 Railway 文档。
系列文章
本篇已收录在掘金专栏 《Solid.js 中文文档》。
此外我还写过 React 系列、TypeScript 系列、Next.js 系列、VuePress 博客搭建系列、JavaScript 系列等多个系列文章,全系列文章目录:github.com/mqyqingfeng...
通过文字建立交流本身就是一种缘分,欢迎围观朋友圈、加入低调务实优秀中国好青年前端社群,一个人走得快,一群人走得远。