东道 网站建设,亚马逊云服务器收费标准,网页平面设计公司,绍兴注册公司文章目录这里还有一个作弊速成的方法推荐流程Part.01 这篇文章能帮你解决什么Part.02 最终效果Part.03 需要做的五件事Part.04 准备工作Part.05 把前端部署到 Cloudflare Pages1.1 登录 Cloudflare#xff0c;创建 Pages 项目1.2 配置构建设置1.3 如果构建失败——缺依赖1.4 部…文章目录这里还有一个作弊速成的方法推荐流程Part.01 这篇文章能帮你解决什么Part.02 最终效果Part.03 需要做的五件事Part.04 准备工作Part.05 把前端部署到 Cloudflare Pages1.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 拿到 Authtoken3.3 下载 ngrok3.4 配置 authtoken3.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 PagesPart.13 关于备案这套方案为什么不需要备案管什么你的三个环节都在境外这是合法的吗有一点小风险备案优劣对比不用买服务器不用绑信用卡。适合没有资金又有项目要部署的朋友如果有资金用国内部署也不错。有资金 — 省时间没资金 — 多花点时间而已总会有方法。这里还有一个作弊速成的方法如果自己找 AI 找方法来部署肯定会有很多的错误因为我是过来人这篇文章用的是最新技术最新的方案对于符合我开头说的项目来说。当然现在有 vibe coding那么我为什么还要写这篇文章就是让大家避免一些错误用 AI 网上得到的结果会出现错误例如需要国外的信用卡才能配置等等可能会让一些朋友崩溃。所以这是本文存在的意义能让喜欢技术的人了解是如何运行的能让 AI 碰到相关的问题减少出错因为可能会看我的文章嘛。如果想免费部署上线只要了解一下我的这篇文章剩下的交给 AI 即可。推荐流程① 要先自己做好准备工作Part 3 部分的五件事 和 Part 4 部分的准备工作都要先准备。② 把我这篇文章给 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-upDocker Desktop 要先安装前端代码已推到 GitHub 仓库Part.05 把前端部署到 Cloudflare Pages这一步把 React/Vue 前端放到 Cloudflare 的免费 CDN 上。前端不占电脑资源关机也不影响访问。1.1 登录 Cloudflare创建 Pages 项目① 打开 Cloudflare Dashboard → 左侧 Workers Pages → Create application② 单击Get started③ 单击第一个④ 如果没有找到项目就单击下方进行登录获取权限⑤ 往下滑看到这个界面选择全部仓库 -- Save1.2 配置构建设置这个页面因为根据项目的不同会有不同的选项可以问一下 AI 自己当前这个项目适合怎么填写。Framework preset 选None。1.3 如果构建失败——缺依赖填写好信息就可以确认后进入构建环节可能会出现错误以下是我之前碰到的错误如果有错误直接问 AI 就可以了一般不是什么大问题。# 常见报错tailwindcss/vite 之类的插件找不到。# 本机装好缺失的依赖重新提交npminstalltailwindcss/vitegitaddpackage.json package-lock.jsongitcommit-m加缺失依赖gitpush# Push 后 Cloudflare 会自动重新构建。1.4 部署完成现在打开https://你的项目名.pages.dev前端应该能访问了。不过登录注册还用不了——后端还没部署。Part.06 把后端用 Docker 跑起来2.1 确认 Docker 能用打开 PowerShell输入docker--version2.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-composeup-d等一两分钟后确认三个容器都在跑dockerps输出应该显示三个容器状态都是Upcifan-backend Up :8081 cifan-mysql Up :3307 cifan-redis Up :63792.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-Urihttps://bin.equinox.io/c/bNyj1mQVY4c/ngrok-v3-stable-windows-amd64.zip-OutFilengrok.zipExpand-Archive-Path ngrok.zip-DestinationPath.-Force3.4 配置 authtoken.\ngrok.exe configadd-authtoken你复制的token3.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变量名值VITE_API_BASE_URLhttps://你的域名.ngrok-free.dev/api/v14.2 重新部署修改环境变量后必须重新部署才生效进入 Deployments 标签 → 三点 → 点Retry deployment。等一两分钟就完成了。4.3 本地开发也同步一下更新项目里.env文件可选方便本地 DEBUGVITE_API_BASE_URLhttps://你的域名.ngrok-free.dev/api/v1Part.09 验证上线打开https://你的项目名.pages.dev测试注册新用户 → 成功登录 → 拿到 token成功文章页面正常加载前端功能都正常如果登录报网络错误确认 ngrok 隧道在运行PowerShell 窗口开着确认docker ps三个容器都 Up确认环境变量配了正确的 ngrok 地址确认 Cloudflare Pages 已经 Redeploy 过Part.10 日常维护每次开机Docker 会自动恢复容器。你只需要启动 ngrok 隧道cd 你的项目目录.\ngrok.exe http 8081--domain你的域名.ngrok-free.dev这条 PowerShell 窗口不能关关了隧道就断了。更新前端加文章、改页面改完代码后gitadd.gitcommit-m更新说明gitpushCloudflare Pages 自动重新部署1-2 分钟生效。你什么都不用做。更新后端改功能cdbackenddocker-composebuild backenddocker-composeup-dbackend备份数据库dockerexeccifan-mysql mysqldump-uroot-penglish_readingbackup.sql会提示输入数据库密码。建议每周备份一次。Part.11 常见问题Qngrok 免费版有什么限制A每分钟 40 次连接每月 1GB 流量。对普通 Web 应用够用不是高并发场景不用升级。Q电脑关机了网站还能用吗A前端还能看在 Cloudflare 上登录注册暂时不可用。开机后跑一下 ngrok 启动命令就恢复。Qngrok 域名会变吗A不会。只要不主动删除系统分配的域名是永久的。Qdocker-compose.yml 怎么写ADocker Hub 上搜各服务的官方镜像配置好environment、ports、volumes就行。下面是一个精简版参考services:mysql:image:mysql:8.0environment:MYSQL_ROOT_PASSWORD:你的密码MYSQL_DATABASE:你的数据库名ports:-3307:3306restart:unless-stoppedbackend:build:.ports:-8081:8081environment:SPRING_DATASOURCE_URL:jdbc:mysql://mysql:3306/你的数据库名SPRING_DATASOURCE_PASSWORD:你的密码depends_on:-mysqlrestart:unless-stoppedPart.12 为什么用 Cloudflare Pages 而不是 GitHub Pages很多人在 GitHub Pages 和 Cloudflare Pages 之间纠结。简单对比一下对比项Cloudflare PagesGitHub Pages国内访问速度✅ 快有京东云合作节点❌ 慢经常被限速或打不开全球 CDN330 节点依赖 Fastly约 80 节点无限带宽✅ 免费✅ 免费构建次数✅ 每月 500 次✅ 每月约 100 次自定义域名✅ 支持✅ 支持环境变量✅ 支持❌ 不支持需自己写脚本关键差异Cloudflare Pages 在中国大陆有 JD Cloud 合作的 CDN 节点国内用户访问比 GitHub Pages 快很多。如果你面向中国用户选 Cloudflare Pages 是明显的更优选择。如果你的用户全在海外两者差不太多——GitHub Pages 也够用。Part.13 关于备案这套方案为什么不需要国内正常上线一个网站最后一步通常是 ICP 备案。但用这套方案不需要备案。备案管什么ICP 备案是中国工信部对服务器放在中国大陆境内、对外提供互联网信息服务的网站的要求。法律条款管的是在中华人民共和国境内的服务。你的三个环节都在境外环节实际服务器位置归备案管吗前端 pages.devCloudflare 全球节点海外为主❌ 不管后端 ngrok-free.devngrok 中继节点海外❌ 不管数据库你家电脑不直接对外服务❌ 不管三个关键节点的服务端都不在中国大陆境内——备案的法律管辖范围到不了你身上。这是合法的吗完全合法。你不是在绕过备案而是客观条件就不触发备案。就像你不需要给一本在美国出版的书申请中国书号。大量个人开发者都在这么做用 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 加分再考虑买个域名走备案流程。如果遇到任何问题都可以联系我或者评论区见 觉得有用点个赞 ➕ 关注支持下呗。