使用 Cloudflare Pages 部署 Bolt.diy

让我们开始吧！

要让Bolt.diy⚡在本地机器上运行，需要一些依赖项。这些通常也是构建和部署所必需的，但本教程非常简单，我们将跳过所有这些繁琐的步骤。我们将使用 GitHub Actions 在云端构建所有内容。最棒的是？Bolt.diy已经为您设置好了大部分所需的设置，只需进行一些细微的调整（基本上需要删除一些东西并设置一些标志）。

无需安装最新的 .NET 版本（Windows 上可能存在问题）、Node（npm 和 pnpm），甚至 Git。无需处理安全问题或任何类型的设置。一切都将变得如此简单。所以，请严格按照所有步骤操作，看看谁能先到达终点！

先决条件：只有三个；如果您还没有Cloudflare 、GitHub和HuggingFace帐户，请注册一个。

它们都是完全免费的！

设置 GitHub

1. 浏览到 GitHub 页面并登录，或创建一个帐户。
2. 浏览Bolt.diy GitHub 页面
3. 点击分叉
   图像1912×504 66.4 KB
4. 在“创建新分支”对话框中，单击“创建分支”按钮
   图像678×521 37.4 KB
   注意：不要选中“main仅复制分支”，这样我们以后就可以切换它们（更新）。虽然您可以同步stable分支，但为了灵活性，最好将它们全部拉出来（例如，如果您需要或想要稍后更改分支）。
5. 稍等片刻……
   
6. 单击“代码”并浏览到“.tool-verions”
   图像1145×65 8.84 KB
7. stable从下拉菜单切换到分支。
   注意：在 0.0.3 版本中，Bolt.diy 已更改为拥有stable分支，因为mainPR 的提交和解析都基于此分支。
8. 单击.tool-version文件名将其打开并删除。
   图像1452×619 44 KB
   注意：该文件会导致部署问题。
9. 将更改提交回您的 Fork：
   图像1279×946 73.5 KB
10. 对wrangler.toml
    图像1391×602 53.7 KB
    图像735×770 34.6 KB
    注意：否则，Cloudflare 会检测到它，使用它来部署，然后在我们进入 Cloudflare 设置时覆盖环境变量。如果您想在不使用密钥的情况下部署，完全没问题，只需注意 Bolt.diy 会定期检查密钥是否已设置，如果没有密钥，可能无法正常工作（不确定这在最近的合并中是否进行了更改）。或者，如果您使用 git 将代码库克隆到本地，则可以重命名它们（但这需要更多步骤）。

设置 Cloudflare⚙️

1. 注册或登录 Cloudflare。
2. 在 Cloudflare 中点击“Workers & Pages”
   
3. 点击“创建”
   图像1307×275 23 KB
4. 点击“Pages”选项卡，然后点击“Connect to Git”
   图像1944×1191 113 KB
   注意：如果这是第一次连接 git，Cloudflare 将引导您完成整个过程，您需要按照步骤进行授权。
5. 选择您的 GitHub 帐户和存储库（bolt.diy）
   图像1641×1463 107 KB
6. 配置“设置和部署”选项：
   a. 对于框架预设，"Remix"从下拉菜单中选择。b
   . 对于构建命令，我们将其修改为：
   npm install pnpm & pnpm install & pnpm run build
   注意：按照环境变量（.env 文件）中列出的方式添加环境变量，请参阅屏幕截图（您可以打开.env.example作为参考）。并且不要在变量名称中包含等号，因为它是变量和值之间的分隔符（如果这样做，将导致缓存错误）。
   
   警告：如果您不使用pnpm run build（并保留默认值npm run build），则部署似乎可以正常工作，但页面样式将会被搞砸。如果发生这种情况，没关系，因为您只需修改构建命令（和“重试部署”，请参阅步骤＃12-13）即可，但如果您遇到损坏的页面，那么您就知道原因了。
7. 点击“设置和部署”按钮
   图像1920×3087 158 KB
   注意：出于安全原因，我没有在图像中包含密钥，但请确保在此处添加它们。
8. 构建失败（冷静，没事！没事！³）
   图像1314×1684 111 KB
   注意：我们不打算使用 wrangler，因此初始部署将失败并出现错误：Error: Failed to publish your Function. Got error: Uncaught Error: No such module "node:process". imported from "functionsWorker-{cache_hash_key_value}.js"
   注意：在最新版本的 Bolt.diy 中，构建可能不会失败，但只需确认步骤 8-10。似乎已对设置nodejs_compat兼容性标志进行了某些更改。
9. 点击“继续项目”并同意警告提示：
   
10. 单击“设置”并向下滚动到“运行时”
    图像1080×578 28.1 KB
    a. 对于“兼容性日期”，单击编辑，选择2024-09-02，然后单击“保存”
    
    b. 对于“兼容性标志”，单击编辑，设置为nodejs_compat，然后单击“保存”
    注意：该选项不会出现在下拉列表中，您需要输入它并为其选择“标签”。
    
    c. 完成后，它应该如下所示：
    图像950×340 11.5 KB
11. 在“分支控制”上，单击编辑图标（笔）并将分支更改为stable
    
    注意：当文章第一次撰写时，没有稳定的分支，但现在这是推荐使用的分支。
12. 单击“部署”选项卡，然后单击“查看详细信息”：
    图像1099×434 17.1 KB
13. 点击“重试部署”
    图像1564×401 18.3 KB
    注意：您可以通过修改文件、提交更改（或在本地推送更改）来“触发”此过程，并且它也会重新部署（参见步骤14）。
14. 等待…成功！全部设置并部署完毕！
    图像1592×1608 118 KB
    注意：由于缓存的原因，页面首次加载可能不正确。不过不用担心，如果目前没有任何警告，请继续操作，并等待一段时间让更改生效。
15. 更新（仅供参考 – 无需执行！）
    注意：该项目设置为在提交/发布时激活 GitHub Actions。我们只需要修改一个文件进行测试！如果您在本地计算机上以常规方式执行提交/推送，也会触发此事件，但我们也可以设置一个计划来执行此操作。但这超出了本教程的范围。
    图像1133×787 63.9 KB
    a. 注意，如果你回到“代码”，跑步者已经被激活了！
    图像1478×645 70.7 KB
    b. 变革成功。
    图像1292×690 37.4 KB
    c. 现在您可以同步 fork，但请记住删除或清空.tool-versions，以及wrangler.toml它们是否重新创建（不确定它们是否会重新创建，我还没有测试过）。
    图像1388×98 9.06 KB
16. 现在让我们检查一下我们的新部署：
    图像1597×597 27.6 KB
17. 它还活着！！！它能发挥作用，而且不花任何钱，只需要花一点时间！！
    图像1920×1080 55.2 KB
    And now you have your own Bolt.diy to play with and share!

可选步骤：

设置自定义 URL

1. 如果您已经在 Cloudflare 上设置了域名，只需提供子域名，该工具就会为您处理其余事项（DNS 记录等）。
   图像1150×692 20.6 KB
2. 让 Cloudflare 完成工作并点击“激活域名”
   图像1158×788 28.2 KB
3. 等待几分钟，就完成了。

更改时更新 Bolt.diy 部署

1. 转到您分叉的 GitHub 仓库，将分支更改为“稳定”（或您正在更新的分支），然后单击“同步分叉”下拉菜单。
   图像1248×162 15.7 KB
2. 点击下拉菜单中的“更新分支”：
   注意：不要点击“放弃X个提交”，这样您就不需要每次都删除.tool-versions和文件。wrangler.toml
   图像424×563 26.5 KB
3. 完成。
   请注意，更新分支会自动触发 Cloudflare Pages 的重新构建和部署（无需执行其他操作，只需等待）：
   图像1233×99 7.65 KB
   图像869×159 9.96 KB
   注意：你也可以设置一个 GitHub 操作来自动执行此操作，并让代码库保持最新状态，但我还没有为此创建文档。说实话，这也不难，只是让我不用手动操作（甚至不用记住）。

待定：

• 通过Cloudflare Zero Trust进行用户身份验证
• 通过 GitHub Actions 自动更新部署。
• 将本地模型（Ollama、LMStudio 等）连接到 Cloudflare Pages 部署
• 将 Supabase 集成到 Cloudflare Pages 部署

故障排除：

• Bolt.diy页面样式被破坏，你遇到了模块错误，vite 缺失，或者你npm install在某个时间点使用了构建命令，或者你没有更新构建命令。请查看说明！
• 错误：pnpm plugin is not installed？你没有从你 fork 的仓库中移除.tool-versionsand/or wrangler.toml。请参阅评论#108
• Safari 浏览器存在一些已知问题，会导致大量缓存错误。请尝试使用 Chrome/Edge/Firefox 浏览器。目前尚无已知解决方案。请参阅评论#91和#131。
• 按照指南操作后出现错误信息？可能是没有切换到分支stable。查看说明了解详情并评论#76。
• 想要确保您的 Cloudflare Pages Deployment 安全，请参阅评论#61
• 确保环境变量中没有等号
• 确保设置 compatability_flags 日期和nodejs_compat
• 确保您正在使用stable分支（请参阅最新文档）

最后步骤：测试您的部署

• 打开 URL（生成的或自定义的）并测试一切是否正常。
• 如果您遇到问题，请告诉我，我可以创建故障排除指南。
• 我们非常感谢您通过GitHub 页面提交问题，请先查看该问题是否已经存在。

结语：
希望本教程看起来简单易懂，但由于缺乏完善的文档，我们进行了大量的测试和流程优化。希望它对您有用，并感谢您的付出（点赞 – 收藏🔖 并点赞❤️‍）。

将来可能会对本教程进行更新。

谢谢！

PS可以通过我的谷歌驱动器获取PDF 版本（我将通过那里管理版本，因此链接始终是最新的）。

转自：https://thinktank.ottomator.ai/t/deploying-bolt-diy-with-cloudflare-pages-the-easy-way/2403