Vibecoding 没钱上线？Cloudflare + Docker + ngrok 零成本全栈部署指南

文章目录

- 这里还有一个作弊速成的方法
- - 推荐流程
- [Part.01 这篇文章能帮你解决什么](#Part.01 这篇文章能帮你解决什么)
- [Part.02 最终效果](#Part.02 最终效果)
- [Part.03 需要做的五件事](#Part.03 需要做的五件事)
- [Part.04 准备工作](#Part.04 准备工作)
- [Part.05 把前端部署到 Cloudflare Pages](#Part.05 把前端部署到 Cloudflare Pages)
- - [1.1 登录 Cloudflare，创建 Pages 项目](#1.1 登录 Cloudflare，创建 Pages 项目)
  - [1.2 配置构建设置](#1.2 配置构建设置)
  - [1.3 如果构建失败------缺依赖](#1.3 如果构建失败——缺依赖)
  - [1.4 部署完成](#1.4 部署完成)
- [Part.06 把后端用 Docker 跑起来](#Part.06 把后端用 Docker 跑起来)
- - [2.1 确认 Docker 能用](#2.1 确认 Docker 能用)
  - [2.2 配置 Docker 镜像加速（国内用户必做）](#2.2 配置 Docker 镜像加速（国内用户必做）)
  - [2.3 启动所有容器](#2.3 启动所有容器)
  - [2.4 如果端口冲突](#2.4 如果端口冲突)
  - [2.5 保持容器开机自启](#2.5 保持容器开机自启)
- [Part.07 用 ngrok 让公网能访问你的后端](#Part.07 用 ngrok 让公网能访问你的后端)
- - [3.1 注册 ngrok（只要邮箱）](#3.1 注册 ngrok（只要邮箱）)
  - [3.2 拿到 Authtoken](#3.2 拿到 Authtoken)
  - [3.3 下载 ngrok](#3.3 下载 ngrok)
  - [3.4 配置 authtoken](#3.4 配置 authtoken)
  - [3.5 找到你的固定域名](#3.5 找到你的固定域名)
  - [3.6 启动隧道](#3.6 启动隧道)
- [Part.08 配置环境变量，把前后端连起来](#Part.08 配置环境变量，把前后端连起来)
- - [4.1 在 Cloudflare Pages 配置 API 地址](#4.1 在 Cloudflare Pages 配置 API 地址)
  - [4.2 重新部署](#4.2 重新部署)
  - [4.3 本地开发也同步一下](#4.3 本地开发也同步一下)
- [Part.09 验证上线](#Part.09 验证上线)
- [Part.10 日常维护](#Part.10 日常维护)
- - 每次开机
  - 更新前端（加文章、改页面）
  - 更新后端（改功能）
  - 备份数据库
- [Part.11 常见问题](#Part.11 常见问题)
- [Part.12 为什么用 Cloudflare Pages 而不是 GitHub Pages？](#Part.12 为什么用 Cloudflare Pages 而不是 GitHub Pages？)
- [Part.13 关于备案：这套方案为什么不需要？](#Part.13 关于备案：这套方案为什么不需要？)
- - 备案管什么
  - 你的三个环节都在境外
  - 这是合法的吗？
  - 有一点小风险
  - 备案优劣对比

不用买服务器，不用绑信用卡。

适合没有资金，又有项目要部署的朋友，如果有资金用国内部署也不错。

有资金 ---> 省时间；
没资金 ---> 多花点时间而已，总会有方法。

这里还有一个作弊速成的方法

如果自己找 AI 找方法来部署，肯定会有很多的错误，因为我是过来人；

这篇文章用的是最新技术，最新的方案对于符合我开头说的项目来说。

当然，现在有 vibe coding，那么我为什么还要写这篇文章？

就是让大家避免一些错误，用 AI 网上得到的结果，会出现错误，例如：需要国外的信用卡才能配置等等，可能会让一些朋友崩溃。

所以这是本文存在的意义：

能让喜欢技术的人了解是如何运行的；
能让 AI 碰到相关的问题减少出错，因为可能会看我的文章嘛。

如果想免费部署上线，只要了解一下我的这篇文章，剩下的交给 AI 即可。

Part.01 这篇文章能帮你解决什么

当你有一个全栈项目（比如 React 前端 + Java 后端 + MySQL + Redis），想部署到公网给别人用，但不想花钱。这篇文章就是为这个场景写的。看完你就能把项目上线，总共花的钱：0 元。

Part.02 最终效果

一句话：前端放云上，后端跑家里，隧道做连接。

关机了前端还能看（因为前端在云上），但登录注册等功能暂时不可用。

Part.03 需要做的五件事

按顺序来，每一步都有命令和截图。

第一步：把前端部署到 Cloudflare Pages；
第二步：把后端用 Docker 跑起来；
第三步：用 ngrok 让公网能访问你的后端；
第四步：配置环境变量，把前后端连起来；
第五步：验证上线。

Part.04 准备工作

开始前，确保你已经有：

一个 GitHub 账号
一个 Cloudflare 账号（免费注册：dash.cloudflare.com/sign-up）
Docker Desktop 要先安装
前端代码已推到 GitHub 仓库

Part.05 把前端部署到 Cloudflare Pages

这一步把 React/Vue 前端放到 Cloudflare 的免费 CDN 上。

前端不占电脑资源，关机也不影响访问。

1.1 登录 Cloudflare，创建 Pages 项目

① 打开 Cloudflare Dashboard → 左侧 Workers & Pages → Create application

② 单击"Get started"

③ 单击第一个

④ 如果没有找到项目就单击下方，进行登录获取权限

⑤ 往下滑，看到这个界面选择全部仓库 --> Save

1.2 配置构建设置

这个页面，因为根据项目的不同，会有不同的选项，可以问一下 AI 自己当前这个项目适合怎么填写。

Framework preset 选 None。

1.3 如果构建失败------缺依赖

填写好信息，就可以确认后，进入构建环节，可能会出现错误，以下是我之前碰到的错误，如果有错误，直接问 AI 就可以了，一般不是什么大问题。

bash 复制代码

# 常见报错：@tailwindcss/vite 之类的插件找不到。
# 本机装好缺失的依赖，重新提交：
npm install @tailwindcss/vite
git add package.json package-lock.json
git commit -m "加缺失依赖"
git push
# Push 后 Cloudflare 会自动重新构建。

1.4 部署完成

现在打开 https://你的项目名.pages.dev，前端应该能访问了。不过登录注册还用不了------后端还没部署。

Part.06 把后端用 Docker 跑起来

2.1 确认 Docker 能用

打开 PowerShell，输入：

bash 复制代码

docker --version

2.2 配置 Docker 镜像加速（国内用户必做）

国内直接拉 Docker Hub 镜像经常失败，需要配置镜像源。

打开 Docker Desktop → Settings → Docker Engine，直接替换成我的内容即可：

json 复制代码

{
  "builder": {
    "gc": {
      "defaultKeepStorage": "20GB",
      "enabled": true
    }
  },
  "experimental": false,
  "registry-mirrors": [
    "https://docker.m.daocloud.io",
    "https://dockerproxy.com",
    "https://hub-mirror.c.163.com"
  ]
}

点 Apply & Restart。

2.3 启动所有容器

进入后端项目目录，执行：

bash 复制代码

docker-compose up -d

等一两分钟后，确认三个容器都在跑：

bash 复制代码

docker ps

输出应该显示三个容器状态都是 Up：

text 复制代码

cifan-backend   Up   :8081
cifan-mysql     Up   :3307
cifan-redis     Up   :6379

2.4 如果端口冲突

速成：让 AI 操作。

常见报错：

text 复制代码

port is already allocated

这说明你电脑上已经跑了 MySQL（占用了 3306 端口）。打开 docker-compose.yml，把 MySQL 的宿主端口改一下：

yaml 复制代码

ports:
  - "3307:3306"

改完重新 docker-compose up -d。

2.5 保持容器开机自启

在 docker-compose.yml 里给每个 service 加上：

yaml 复制代码

restart: unless-stopped

同时确保 Docker Desktop 设置了开机自启（Settings → General → Start Docker Desktop when you log in）。

这样以后重启电脑，Docker 会自动把后端恢复起来。

Part.07 用 ngrok 让公网能访问你的后端

现在后端只能在 localhost:8081 访问，公网连不到。

需要一条"隧道"把公网请求转进来。

为什么不用 Cloudflare Tunnel？

因为它要求激活 Zero Trust 服务，激活过程必须绑国际信用卡（Visa/Mastercard）。

ngrok 免费版只需要邮箱注册，不需要绑卡，刚好绕过这个问题。

3.1 注册 ngrok（只要邮箱）

打开 ngrok.com/signup，用邮箱注册，不用绑卡。

如果能用 GitHub 注册，就用 GitHub。

3.2 拿到 Authtoken

注册后进入 Dashboard，左侧菜单点 Your Authtoken：

点 Copy 复制 token。

3.3 下载 ngrok

在 PowerShell 里执行：

powershell 复制代码

cd 你的项目目录
Invoke-WebRequest -Uri "https://bin.equinox.io/c/bNyj1mQVY4c/ngrok-v3-stable-windows-amd64.zip" -OutFile "ngrok.zip"
Expand-Archive -Path ngrok.zip -DestinationPath . -Force

3.4 配置 authtoken

powershell 复制代码

.\ngrok.exe config add-authtoken 你复制的token

3.5 找到你的固定域名

ngrok Dashboard 左侧 → Gateway → Domains：

免费账号会自动分配一个固定域名，比如 awry-that-jasshdfs.ngrok-free.dev。名字虽然随机，但这地址永远不变。

❌ 注意：点 New Domain 自定义免费版不支持。

用系统分配的那个就行。后端地址长什么样用户看不到，他们访问的是你前端 pages.dev 的域名。

3.6 启动隧道

powershell 复制代码

.\ngrok.exe http 8081 --domain=你的域名.ngrok-free.dev

看到这个就成功了：

隧道启动后，浏览器打开 https://你的域名.ngrok-free.dev，首次访问会看到一个安全警告页------点 Visit Site 就行了，以后不会再出现。前端 API 调用也不会被拦截。

复制这个域名，进入下一步。

Part.08 配置环境变量，把前后端连起来

4.1 在 Cloudflare Pages 配置 API 地址

前端需要知道后端地址才能发请求。这个值存在 Cloudflare Pages 的环境变量里。

Cloudflare Pages → 你的项目 → Settings → Environment variables：

变量名	值
VITE_API_BASE_URL	https://你的域名.ngrok-free.dev/api/v1

4.2 重新部署

修改环境变量后必须重新部署才生效：

进入 Deployments 标签 → 三点 → 点 Retry deployment。

等一两分钟就完成了。

4.3 本地开发也同步一下

更新项目里 .env 文件（可选，方便本地 DEBUG）：

env 复制代码

VITE_API_BASE_URL=https://你的域名.ngrok-free.dev/api/v1

Part.09 验证上线

打开 https://你的项目名.pages.dev，测试：

注册新用户 → 成功
登录 → 拿到 token，成功
文章页面正常加载
前端功能都正常

如果登录报网络错误：

确认 ngrok 隧道在运行（PowerShell 窗口开着）
确认 docker ps 三个容器都 Up
确认环境变量配了正确的 ngrok 地址
确认 Cloudflare Pages 已经 Redeploy 过

Part.10 日常维护

每次开机

Docker 会自动恢复容器。你只需要启动 ngrok 隧道：

powershell 复制代码

cd 你的项目目录
.\ngrok.exe http 8081 --domain=你的域名.ngrok-free.dev

这条 PowerShell 窗口不能关，关了隧道就断了。

更新前端（加文章、改页面）

改完代码后：

bash 复制代码

git add .
git commit -m "更新说明"
git push

Cloudflare Pages 自动重新部署，1-2 分钟生效。你什么都不用做。

更新后端（改功能）

bash 复制代码

cd backend
docker-compose build backend
docker-compose up -d backend

备份数据库

bash 复制代码

docker exec cifan-mysql mysqldump -uroot -p english_reading > backup.sql

会提示输入数据库密码。建议每周备份一次。

Part.11 常见问题

Q：ngrok 免费版有什么限制？

A：每分钟 40 次连接，每月 1GB 流量。对普通 Web 应用够用，不是高并发场景不用升级。

Q：电脑关机了网站还能用吗？

A：前端还能看（在 Cloudflare 上），登录注册暂时不可用。开机后跑一下 ngrok 启动命令就恢复。

Q：ngrok 域名会变吗？

A：不会。只要不主动删除，系统分配的域名是永久的。

Q：docker-compose.yml 怎么写？

A：Docker Hub 上搜各服务的官方镜像，配置好 environment、ports、volumes 就行。下面是一个精简版参考：

yaml 复制代码

services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: 你的密码
      MYSQL_DATABASE: 你的数据库名
    ports:
      - "3307:3306"
    restart: unless-stopped

  backend:
    build: .
    ports:
      - "8081:8081"
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/你的数据库名
      SPRING_DATASOURCE_PASSWORD: 你的密码
    depends_on:
      - mysql
    restart: unless-stopped

Part.12 为什么用 Cloudflare Pages 而不是 GitHub Pages？

很多人在 GitHub Pages 和 Cloudflare Pages 之间纠结。简单对比一下：

对比项	Cloudflare Pages	GitHub Pages
国内访问速度	✅ 快（有京东云合作节点）	❌ 慢（经常被限速或打不开）
全球 CDN	330+ 节点	依赖 Fastly（约 80 节点）
无限带宽	✅ 免费	✅ 免费
构建次数	✅ 每月 500 次	✅ 每月约 100 次
自定义域名	✅ 支持	✅ 支持
环境变量	✅ 支持	❌ 不支持（需自己写脚本）

关键差异：Cloudflare Pages 在中国大陆有 JD Cloud 合作的 CDN 节点，国内用户访问比 GitHub Pages 快很多。如果你面向中国用户，选 Cloudflare Pages 是明显的更优选择。

如果你的用户全在海外，两者差不太多------GitHub Pages 也够用。

Part.13 关于备案：这套方案为什么不需要？

国内正常上线一个网站，最后一步通常是 ICP 备案。但用这套方案，不需要备案。

备案管什么

ICP 备案是中国工信部对服务器放在中国大陆境内、对外提供互联网信息服务的网站的要求。法律条款管的是"在中华人民共和国境内"的服务。

你的三个环节都在境外

环节	实际服务器位置	归备案管吗？
前端 pages.dev	Cloudflare 全球节点（海外为主）	❌ 不管
后端 ngrok-free.dev	ngrok 中继节点（海外）	❌ 不管
数据库	你家电脑（不直接对外服务）	❌ 不管

三个关键节点的服务端都不在中国大陆境内------备案的法律管辖范围到不了你身上。

这是合法的吗？

完全合法。

你不是在"绕过"备案，而是客观条件就不触发备案。就像你不需要给一本在美国出版的书申请中国书号。

大量个人开发者都在这么做：

用 Vercel / Netlify / Cloudflare Pages 部署 → 不备案
用 GitHub Pages 部署 → 不备案
用 ngrok / frp 做内网穿透 → 不备案

这些都是正常操作。

有一点小风险

如果你的网站在国内火了，用户量很大，GFW（防火墙）有一定概率把 pages.dev 或 ngrok-free.dev 这类域名加入干扰名单。

但实话实说，概率极低------Cloudflare 这家公司体量太大，不会轻易被墙。

如果真的遇到被干扰的问题，解决方法是买个域名绑定到 Cloudflare Pages（域名也不在国内服务器解析，依然不需要备案）。

备案优劣对比

对比项	不备案（本方案）	正经备案
时间	无需等待	约 15-30 天
成本	0 元	约 30 元（幕布/核验等）+ 时间
手续	零	提交身份证、填表、拍核验照
国内 CDN 加速	❌ 不能用阿里云/腾讯云 CDN	✅ 可以
国内搜索引擎收录	中等（百度会收录）	好（有备案号加分）
法律风险	无（服务器不在境内）	无
适用场景	个人项目 / 小团队 / 原型	正式商业运营

简单建议：个人项目或小团队用这套方案完全够了。如果以后要做商业化运营、需要国内 CDN 加速或百度 SEO 加分，再考虑买个域名走备案流程。

如果遇到任何问题都可以联系我，或者评论区见 😊 觉得有用，点个赞 ➕ 关注，支持下呗。

Vibecoding 没钱上线？Cloudflare + Docker + ngrok 零成本全栈部署指南

文章目录

这里还有一个作弊速成的方法

推荐流程

Part.01 这篇文章能帮你解决什么

Part.02 最终效果

Part.03 需要做的五件事

Part.04 准备工作

Part.05 把前端部署到 Cloudflare Pages

1.1 登录 Cloudflare，创建 Pages 项目

1.2 配置构建设置

1.3 如果构建失败------缺依赖

1.4 部署完成

Part.06 把后端用 Docker 跑起来

2.1 确认 Docker 能用

2.2 配置 Docker 镜像加速（国内用户必做）

2.3 启动所有容器

2.4 如果端口冲突

2.5 保持容器开机自启

Part.07 用 ngrok 让公网能访问你的后端

3.1 注册 ngrok（只要邮箱）

3.2 拿到 Authtoken

3.3 下载 ngrok

3.4 配置 authtoken

3.5 找到你的固定域名

3.6 启动隧道

Part.08 配置环境变量，把前后端连起来

4.1 在 Cloudflare Pages 配置 API 地址

4.2 重新部署

4.3 本地开发也同步一下

Part.09 验证上线

Part.10 日常维护

每次开机

更新前端（加文章、改页面）

更新后端（改功能）

备份数据库

Part.11 常见问题

Part.12 为什么用 Cloudflare Pages 而不是 GitHub Pages？

Part.13 关于备案：这套方案为什么不需要？

备案管什么

你的三个环节都在境外

这是合法的吗？

有一点小风险

备案优劣对比