现在位置: 首页 / 网站建设优化 / 正文

cloudflare上部署NavSphere导航站管理系统指南

NavSphere 是一个基于 Next.js 14 构建的现代化导航管理平台，专为个人和团队打造的书签管理和导航门户解决方案。通过 GitHub 作为数据存储后端，提供安全、可靠的导航数据管理体验。

第一步：把源码fork到自己的github仓库

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

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

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

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

第二步：创建 Cloudflare Pages 项目

访问 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后台部分还没有完成。需要我们修改一些配置。并修改一些环境变量。

第三步: GitHub OAuth App 设置

创建 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 上部署导航站管理系统的步骤。希望这个教程对你有所帮助。