ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

【Cloudflare 部署笔记】Workers 上传静态站点到绑定自定义域名访问全流程

【Cloudflare 部署笔记】Workers 上传静态站点到绑定自定义域名访问全流程 手上有一个纯静态的小站点——几个 HTML、CSS、JS 文件,没有后端、没有数据库,本地双击index.html就能跑。需求也很朴素:放到公网,让别人能用我自己买的域名打开。看起来很简单的三件事,我却在中间卡了大半天。卡点不在"怎么传文件",而在传完之后:控制台告诉我"部署成功",给了一个https://xxxx.xxxx.workers.dev的地址,我把它发给别人,对方说"这地址也太长了",我自己也觉得不对——我明明有域名,为什么用不上?这一篇就是把这条链路从头到尾补完的记录。整篇文章的主线一句话:在 Cloudflare 上,静态文件"传上去"和"别人能用你的域名访问"是两件独立的事,中间要跨过自定义域名、DNS 记录、路由三道配置。一、先搞清三种"访问地址"的区别,后面就不容易绕晕我一开始最大的误解是:以为部署完就结束了。实际上 Cloudflare 会同时给你几种不同层级的地址,它们的能力和用途完全不一样。先把这张表刻进脑子,后面每一步都会对上号:地址形态长什么样谁能访问用途默认开发域名my-site.account.workers.dev公网可访问(默认开启)部署完立刻验证"文件传对了没有"预览域名*.-my-site.account.workers.dev公网可访问,带随机前缀预览版本,正式版别用它对外自定义域名(Custom Domain)app.example.com公网可访问对外正式使用的地址路由(Route)*.example.com/*取决于主机名的 DNS 记录把现有域名的某个路径交给 Worker这里要纠正我自己当时的一个说法。我最初的判断是"workers.dev这种长地址别人访问不了",后来发现这个说法不准确:workers.dev域名默认是公网可访问的,别人打得开。它真正的问题是另外三点:太长、没法记、不适合对外,尤其不适合印在二维码或名片上;它是账号级共享的——同一个账号下所有 Worker 都挂在同一个workers.dev子域下,你把某个 Worker 的workers.dev开关关掉,或者换个账号,这个地址就没了;它和你的品牌域名没有任何关系,搜索引擎、证书、后续的缓存规则都不好统一治理。所以在项目列表里,一眼就能区分"只是传上去了"和"真的配好了":图 1:应用列表里的两种状态。上面那条只有xxx.workers.dev,是没配域名的;下面被框住的qc111.xxx.xyz + 1 other route才是已经配好的。(图中的域名是笔者的演示域名,账号 ID 与账号子域已打码)判读规则:列表项副标题里出现xxx.workers.dev→ 只有临时地址;出现子域名.你的域名 + N other route→ 已经绑过自定义域名或路由了。二、创建应用:五种入口该选哪一个进入 Cloudflare 控制台,左侧栏找到Workers Pages(在 Compute 分组下),右上角点Create application。点进去之后是 “Ship something new” 页面,一共五个入口,很容易选错:入口做的事适合谁Connect GitHub连仓库,之后 push 自动构建部署有 CI/CD 需求的正式项目Connect GitLab同上,接 GitLab同上Start with Hello World!直接给一个最小 Worker 脚本想写代码、跑动态逻辑Select a template从模板起步想快速起一个框架项目Upload your static files上传本地已经构建好的静态产物纯静态站点,就是我这种我这次的需求是"文件已经在我本地了,就是一堆 HTML",所以选最后一个Upload your static files。
返回列表