🍮进阶部署
感谢后端
- 参考 一命(令)部署 的 单独部署/运行
后端命令 部分 backend.Dockerfile仅为在线体验服务而设,用在本地时请自测
运行容器/平台
- 用服务器 和 公网 ip,就这样
确保你的后端防火墙开放 12345 端口,或已用 nginx 反代,外部自测可访问
- 市面上的内网穿透
I don't know
3. 大善人的内网穿透方式(Cloudflare Tunnel)
必须手上有域名(事前 cf 上设置域),否则用其他部署平台方式
一步到位流程
- 登录 Cloudflare Dashboard
- 打开左侧菜单的 "Zero Trust"
- 选择左侧菜单的 "网络" > "连接器" > "添加/创建隧道"
- 选择 "Cloudflare" > "起名后保存隧道"
- 按指示在 pc/后端 安装连接器运行命令,直到下方 Connectors 状态出现 "已连接",点击下一步
收尾(添加已发布应用程序路由)
只有事前在 cf 设置了域,并成功接通,这步才能选择 域
- 添加路由:子域与域自己选择
- 服务:类型选
http,URL 填localhost:12345,点完成设置
有关 rV在线体验 的部署
暂时使用的 Railway 部署后端, r2 放图片,不过r2免费储存才10G,
不建议日常使用,所以静态文件托管部分估摸不会扩展开发 除非天降大善人让我体验爽再说
顺便一提 Railway 免费额度似乎不足以让 在线体验 长期运行
欢迎投喂闲置服务器(让蹭后端部署就行)
前端
🎿 Step-1:Fork 项目
- 访问 redViewer 项目
- 点击右上角的 "Fork" 按钮
- 选择您的 GitHub 账户
- 确认 Fork 完成
🏗️ Step-2:创建 Pages 项目
2.1 访问 Cloudflare Dashboard
- 登录 Cloudflare Dashboard
- 选择左侧菜单的 "计算和AI" > "Workers 和 Pages"
- 下方点击
Looking to deploy Pages? Get started - 选择 " Git 存储库"
2.2 连接 GitHub 仓库
- 如果首次使用,需要授权 Cloudflare 访问 GitHub
- 选择您 Fork 的
redViewer仓库 - 点击 "开始设置"
2.3 配置项目设置
| 配置项 | 值 | 说明 |
|---|---|---|
| 项目名称 | redviewer | 项目标识符 |
| 生产分支 | master | 生产环境分支 |
| 构建命令 | npm install && npm run build | 安装依赖并构建 |
| 构建输出目录 | dist | Vite 默认输出目录 |
| 根目录 | frontend | 重要:前端代码目录 |
| 环境变量-变量名称 | 值 |
|---|---|
VITE_BACKEND_URL | https://your-backend.example.com |
VITE_BACKEND_URL 是保底后端 url
- 不要在地址末尾添加斜杠
/ - 示例:
https://api.mycomic.com或http://192.168.1.100:12345
点击 "保存并部署",等待构建完成,如无意外可以验证去耍了
🗄️ Step-3:配置 KV 存储
如需通过 超管 窗口切换后端 url 的话,"KV 命名空间"是必须配置的
全局生效:后端地址保存到 KV 后,所有用户(包括游客)刷新页面即可生效。
3.1 创建 KV 命名空间
- 选择左侧菜单的 "储存和数据库" > "Workers KV"
- 点击"新建实例"按钮
- 名称填写:
RV_KV进行创建
3.2 绑定 KV 到 Pages 项目
- 返回上面创建的 Pages > 设置 > 绑定
- 点击 "添加" > "KV 命名空间"
- 变量名:
RV_KV - 选择刚创建的命名空间
- 点击"保存"
3.3 重试部署
- 进入项目的 "部署" 页面
- 找到最新的部署记录
- 点击右侧的 "..." 菜单
- 选择 "重试部署"
- 等待部署完成
