Solid.js 最新官方文档翻译(22)—— 部署

前言

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 界面

  1. 导航到 Cloudflare 登录页面并登录或注册。
  1. 登录后,在左侧导航栏中找到"页面"。单击"创建项目"添加新项目,然后选择"连接到 Git"。
  1. 您可以选择在所有仓库或选定的仓库上安装 Cloudflare Pages。选择包含您的 Solid 项目的仓库。
  1. 配置您的构建设置:
  • 项目名称将默认为仓库名称,但您可以根据需要更改它。
  • 在"构建命令"字段中,输入 npm run build
  • 对于"构建输出目录"字段,请使用 dist
  • 添加环境变量 NODE_VERSION 并将其值设置为您正在使用的 Node.js 版本。

注意:此步骤至关重要,因为 Cloudflare Pages 使用早于 v13 的 Node.js 版本,该版本可能不完全支持 Solid 项目中使用的 bundler 程序 Vite。

  1. 配置完后,单击"保存并部署"。几分钟后,您的 Solid 项目将在 Cloudflare Pages 上线,可通过格式为 project_name.pages.dev 的 URL 进行访问。

使用 Wrangler CLI

Wrangler 是构建 Cloudflare Workers 的命令行工具。以下是使用 Wrangler 部署 Solid 项目的步骤。

  1. 使用您选择的包管理器来安装 Wrangler 命令行工具:
bash 复制代码
# npm
npm i -g wrangler

# yarn
yarn global add wrangler

# pnpm
pnpm add -g wrangler

# bun
bun add -g wrangler
  1. 打开终端并运行以下命令来登录:
plain 复制代码
wrangler login
  1. 执行以下命令来构建项目并使用 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 工具

  1. 使用您首选的包管理器通过以下命令之一安装 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
  1. 执行 firebase login 命令以确保您已登录与您的项目关联的 Firebase 帐户。
  2. 在 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>"
  }
}
  1. 运行 npm run build ,然后运行 firebase deploy 来构建和部署您的项目。

完成后,将显示一个 Hosting URL,表示您的项目已实时部署。

Netlify

Netlify 是一个广泛使用的托管平台,适合各种类型的项目。有关构建过程、部署选项和可用功能范围的详细指南,您可以访问 Netlify 文档

使用 Netlify 网络界面

  1. 首先导航到 Netlify 的网站并登录或创建新的 Netlify。登录后,您将进入仪表板。单击 New site from Git 按钮启动新项目。
  1. 在下一页上,选择"连接到 GitHub"或您首选的 Git 仓库托管服务。
  1. 选择 Solid 项目仓库后,您将进入配置屏幕。将"发布目录"字段从 netlify 更新为 dist 。然后,单击"部署"开始部署过程。
  1. 构建和部署完成后,您将进入一个界面,显示站点 URL。

使用 Netlify CLI

  1. 使用您首选的包管理器安装 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 帐户和团队已完全设置。这对于无缝项目设置和部署至关重要。

  1. 打开终端,导航到项目目录,然后运行 netlify init 命令。使用受支持的登录选项进行身份验证。
  2. 按照 CLI 界面上的说明进行操作。当提示输入"要部署的目录"时,请指定 dist --- 这是 Solid 仓构建的项目文件的位置。

完成该过程后,您的项目将部署在 Netlify 上,并可以通过提供的 URL 进行访问。

Vercel

Vercel 是一个广泛使用的平台,专门用于托管前端项目。有关构建和部署说明及其提供的功能的详细信息,请访问Vercel 文档

使用 Vercel web 界面

  1. 导航至 vercel.com/login 登录或创建新帐户。连接您首选的 Git 仓库托管服务。
  1. 进入仪表板后,单击右上角的按钮并选择"添加新项目"。在下一页上,选择"继续使用 GitHub"或您首选的 Git 服务。
  1. 然后您将看到您的仓库列表。如果需要,请使用搜索栏查找要部署的特定仓库。单击"导入"按钮继续。
  2. 导入 Solid 项目仓库后,您将进入配置界面。如果您的项目需要任何环境变量,请将它们添加到指定字段中。单击"部署"开始部署过程。
  1. 构建和部署完成后,您将被重定向到显示站点截图的界面。

使用 Vercel CLI

  1. 使用您首选的包管理器安装 Vercel CLI。
bash 复制代码
# npm
npm i -g vercel

# yarn
yarn global add vercel

# pnpm
pnpm add -g vercel

# bun
bun add -g vercel
  1. 打开终端,导航到项目目录,然后运行以下命令登录:
plain 复制代码
vercel
  1. 按照 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...

通过文字建立交流本身就是一种缘分,欢迎围观朋友圈、加入低调务实优秀中国好青年前端社群,一个人走得快,一群人走得远。

相关推荐
林太白17 分钟前
js-var和let以及const区别
前端·面试
看谷秀28 分钟前
arkts-10 实战
前端·arkts
范小兵29 分钟前
# DevEco CLI实战:鸿蒙App「至客」从0开发到正式上架
前端·harmonyos
梦醒沉醉35 分钟前
7、表达日期和时间(前朝遗老Date)
javascript
半生过往44 分钟前
前端工程师学习智能体开发(一)
前端·学习·状态模式
白雾茫茫丶1 小时前
Vibecoding 一个主题切换动画库:13 种揭幕方式
前端·vue.js·react.js
计算机魔术师1 小时前
谷歌宣布 TPU 互联架构支持 100 万芯片规模,电力供应成 AI 基建核心瓶颈
前端
雪芽蓝域zzs1 小时前
第四十九节:TagsView 右键菜单(带三角箭头)给每个 tag 增加**鼠标右键菜单**(右键标签弹出:关闭、关闭其他、关闭全部)
前端·javascript·vue.js
এ慕ོ冬℘゜1 小时前
从零开发移动端医院挂号页面:适配、交互与前端实现详解
前端·javascript
宁渡AI大模型2 小时前
AI 全栈面试新趋势:Vibe Coding、前端、Java 后端高频面试题深度解析|河南宁渡科技有限公司编程教程
java·javascript·人工智能·python·ai大模型