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

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

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

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

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

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

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

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

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

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

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

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

推荐流程

① 要先自己做好准备工作：

• Part 3 部分的五件事 和 Part 4 部分的准备工作，都要先准备。

② 把我这篇文章给 AI 输入类似的提示词：

“你根据我目前的项目，并结合当前这篇文章，你看看我当前项目能不能用这个方法，如果能用，你使用这篇文章的方法帮我部署，如果需要我动手的地方及时和我讲”

③ 出现 AI 提示需要操作的，可以看我的这篇文章来可视化的无门槛操作，因为我有操作的截图，如果遇到报错之类的，直接让 AI 帮忙解决即可。

目前的这个方案，我是花了整个下午才找到，所以用我的时间，节省大家的时间。

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

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

Part.02 最终效果

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

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

Part.03 需要做的五件事

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

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

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 就可以了，一般不是什么大问题。

# 常见报错：@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，输入：

docker --version

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

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

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

{
  "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 启动所有容器

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

docker-compose up -d

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

docker ps

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

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

2.4 如果端口冲突

速成：让 AI 操作。

常见报错：

port is already allocated

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

ports:
  - "3307:3306"

改完重新 docker-compose up -d。

2.5 保持容器开机自启

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

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 里执行：

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

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

3.5 找到你的固定域名

ngrok Dashboard 左侧 → Gateway → Domains：

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

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

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

3.6 启动隧道

.\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：

4.2 重新部署

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

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

等一两分钟就完成了。

4.3 本地开发也同步一下

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

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

Part.09 验证上线

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

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

如果登录报网络错误：

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

Part.10 日常维护

每次开机

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

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

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

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

改完代码后：

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

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

更新后端（改功能）

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

备份数据库

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 就行。下面是一个精简版参考：

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 在中国大陆有 JD Cloud 合作的 CDN 节点，国内用户访问比 GitHub Pages 快很多。如果你面向中国用户，选 Cloudflare Pages 是明显的更优选择。

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

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

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

备案管什么

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

你的三个环节都在境外

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

这是合法的吗？

完全合法。

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

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

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

这些都是正常操作。

有一点小风险

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

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

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

备案优劣对比

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

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