写了一份手把手教你部署导航站管理系统的指南，请查收

浏览：32次阅读

共计 3322 个字符，预计需要花费 9 分钟才能阅读完成。

这一篇文章将介绍如何在cloudflare上部署导航站管理系统。

在开始之前，先说明一下，这个部署教程是基于 Cloudflare Pages 的，如果你想在其他平台上部署，可能需要做一些调整。另外，这个部署教程假设你已经有了一个 Cloudflare 账号，并且对 Git 和 GitHub 有一定的了解。如果你对这些内容不熟悉，可以先去学习一下相关的知识。

接下来，我们将一步一步地进行部署。

导航站管理系统的代码托管在 GitHub 上，地址是 [https://github.com/tianyaxiang/NavSphere]。你可以直接访问这个链接来访问到代码。

在页面的右上角，有一个 "Fork" 按钮，点击它就可以把代码复制到你自己的 GitHub 账号下。

fork 完成后，你会在你的 GitHub 账号下看到一个新的仓库，里面包含了导航站管理系统的代码。
如果你不想 fork 代码，也可以直接下载代码到本地，然后再上传到你的 GitHub 仓库中。具体操作如下：

1. 点击页面右上角的 "Code" 按钮，选择 "Download ZIP" 下载代码到本地。
2. 解压下载的 ZIP 文件，将解压后的文件夹中的所有文件上传到你的 GitHub 仓库中。

访问 Cloudflare Pages：https://pages.cloudflare.com/

选择 Pages 项目

点击 "导入现有 Git 存储库的开始使用"
选择连接GitHub 作为代码托管平台，授权 Cloudflare 访问你的 GitHub 账号

在授权页面，允许许 Cloudflare 访问你的 GitHub 仓库。简单的话就选择 ALL repositories，复杂的话就选择你刚刚 fork 的那个仓库。然后点击 "Install & Authorize" 按钮。

授权后会跳回到上个页面，选择你刚刚 fork 的仓库
在 "Select a repository" 页面，选择你刚刚 fork 的仓库。然后点击 "开始设置" 按钮。

输入项目名称
在 "Configure your project" 页面，输入项目名称。你可以使用默认的名称，也可以自定义一个名称。

选择分支
在 "Configure your project" 页面，选择你刚刚 fork 的仓库的分支。通常情况下，你可以选择 "main" 分支。
选择构建设置
在 "Configure your project" 页面，选择构建设置。你可以使用默认的设置，框架预设选择 "Next.js"。如果你使用的是其他框架，可以根据实际情况进行选择。
点击 "Save and Deploy" 按钮
在 "Configure your project" 页面，点击 "Save and Deploy" 按钮。Cloudflare Pages 将开始构建你的项目，并将其部署到 Cloudflare 的 CDN 上。

等待部署完成
部署过程可能需要几分钟时间。你可以在 Cloudflare Pages 的控制台中查看部署进度。当部署完成后，你将看到一个成功的消息，并且可以通过提供的 URL 访问你的项目。

部署成功了，这个时候你可以通过 Cloudflare Pages 提供的 URL 访问你的导航站管理系统了。前台部分已经部署完成了，但是 admin后台部分还没有完成。需要我们修改一些配置。并修改一些环境变量。

创建 OAuth App

访问 GitHub Developer Settings：https://github.com/settings/developers

点击 "New OAuth App"

填写应用信息：
Application name: navsphere-demo (你可以自定义)
Homepage URL: https://navsphere-demo.pages.dev (你可以自定义,来源于 Cloudflare Pages 的域名)
Application description: NavSphere Demo Application
Authorization callback URL: https://navsphere-demo.pages.dev/api/auth/callback/github （你可以自定义,来源于 Cloudflare Pages 的域名）

点击 "Register application"

点击 Generate a new client secret。拿到 Client ID 和 Client Secret。

在 OAuth App 页面，你可以看到 "Client ID" 和 "Client Secret"。这两个值是你后续配置 Cloudflare Pages 时需要用到的。保存好这两个值。下面要用到。

修改 github 仓库中的配置文件wrangler.toml

在你的 GitHub 仓库中，找到 wrangler.toml 文件。这个文件是 Cloudflare Workers 的配置文件，你需要修改其中的一些配置项。
打开 wrangler.toml 文件，找到以下配置项：

[env.production.vars]
GITHUB_ID = "Ov23lix1Mr0FRgjQy3Bg" # 你的 GitHub OAuth App 的 Client ID
GITHUB_OWNER = "fanmochen" # 你的 GitHub 用户名
GITHUB_REPO = "navsphere-demo" # 你的 GitHub 仓库名
GITHUB_BRANCH = "main" # 你的 GitHub 分支名
NEXTAUTH_URL = "https://navsphere-demo.pages.dev/api/auth" # Cloudflare Pages 的域名（或者你自定义的域名）加/api/auth
NEXT_PUBLIC_API_URL="https://navsphere-demo.pages.dev/" # Cloudflare Pages 的域名（或者你自定义的域名）

将 GITHUB_ID、GITHUB_OWNER、GITHUB_REPO、GITHUB_BRANCH、NEXTAUTH_URL、NEXT_PUBLIC_API_URL 和 NEXT_PUBLIC_SITE_URL 的值修改为你自己的 GitHub 仓库信息和 Cloudflare Pages 的域名。

保存修改后的 wrangler.toml 文件。点击 "Commit changes" 按钮，将修改提交到 GitHub 仓库。提交后，Cloudflare Pages 将自动重新部署你的项目。等待部署完成后，你的导航站管理系统将使用新的配置。

在 Cloudflare Pages 的项目设置页面，找到 "Environment Variables" 部分，也就是上图中的变量和机密。

你需要添加以下环境变量：
GITHUB_SECRET：你 GitHub OAuth App 的 Client Secret 类型选择：密钥（默认就是），点击保存。

在 Cloudflare Pages 的项目设置页面，找到 "Deployments" 部分。点击 "Redeploy" 按钮，重新部署你的项目。等待部署完成后，你的导航站管理系统将使用新的配置。

部署完成后，你可以通过 Cloudflare Pages 提供的 URL 访问你的导航站管理系统。你可以尝试登录、注册等功能，确保一切正常工作。
登录地址：https://navsphere-demo.pages.dev/admin ,就可以访问后台了。

以上就是在 Cloudflare 上部署导航站管理系统的步骤。希望这个教程对你有所帮助。如果你在部署过程中遇到任何问题，可以在评论区留言，我会尽力帮助你解决。

如果你对这个项目感兴趣，可以在 GitHub 上查看代码，或者在 Cloudflare Pages 上查看部署的效果。感谢大家的支持，希望这个项目能够帮助到更多的人。

原链接：写了一份手把手教你部署导航站管理系统的指南，请查收来自孟晨的分享。

部分内容由本站做了更改，便于后续使用，本站跟着这个教程已经完成了站点的部署，包括域名的绑定，非常好用的导航源码。

正文完