阿里云也有Cloudflare Pages，白嫖成功！

最近白嫖免费版 ESA Pages创建了一个在线工具站 ToolGarden, 主要是自己日常用的一些工具，JSON处理、图片处理、PDF处理，文件处理、编码处理等，一个网站全部解决，不需要再到处找工具了，所有数据全部浏览器本地处理，隐私安全，本文简单介绍一下ESA Page配置和部署过程。

阿里云也上线了边缘静态站点托管：ESA Pages，和Cloudflare Pages功能类似，只需一个域名就可以获得免费的，全球可访问的 CDN/Edge，同时支持创建Functions。相比Cloudflare Pages，中国大陆访问速度会有优势。

ESA Pages有以下特点：

• 无需购买 云服务器 或配置 Web 服务器
• GitHub 一键连接，实现持续部署，push代码自动部署
• 全球边缘节点加速访问
• 自动 HTTPS，免去证书维护
• 支持 Vue、React、Next.js、Vite 等主流前端框架

只需push 代码到 GitHub会自动触发构建，自动全球边缘节点部署，全球可访问HTTPS网站。

建站成本

域名： toolgarden.xyz （费用¥15）

服务器：无，ESA Pages 免费版

免费模式请求和并发数

ESA Pages 免费版套餐无需任何费用和续费，包含不限量流量和请求数。

边缘函数免费套餐：

• 每个账号每天10万请求数限制
• 每个函数1000请求并发数量上限

对于个人业务或者开发自测，这个用量是足够使用了

现在介绍一下，如何使用阿里云 ESA Pages 从 0 到 1 生成和部署一个网站（GitHub + 自动部署 + 自定义域名）：

• 创建前端项目
• 上传到 GitHub
• 使用 ESA Pages 自动部署
• 创建 Pages 站点
• 绑定自定义域名
• 配置 DNS
• 实现代码自动更新

一、创建项目

开通ESA（边缘安全加速）后，创建Pages模板, 官方也支持 GitHub 仓库一键导入：
https://esa.console.aliyun.com/edge/pages/creation

创建的项目下中需要包含一个esa.jsonc文件，assets.directory指定静态构建的产物目录，notFoundStrategy指向404 notFound地址

示例：

{ "name": "my-pages", "installCommand": "npm install", "buildCommand": "npm run build", "assets": { "directory": "./dist", "notFoundStrategy": "singlePageApplication" } }

对于 Vue Router、React Router 等单页应用，建议设置：

"notFoundStrategy": "singlePageApplication"

这样刷新页面时不会出现 404。esa.jsonc的配置优先级高于控制台的配置。

二、连接 GitHub 到 ESA Pages

登录 ESA 控制台，进入：

边缘计算和 AI └── 函数和 Pages

点击：

创建

选择：

导入 GitHub 仓库

第一次使用需要：

添加 GitHub 账号

随后 GitHub 会弹出授权页面。

建议直接授权：

All repositories Install & Authorize

即可完成 GitHub 与 ESA 的连接，参考：阿里云帮助中心⁠

三、选择仓库并开始部署

授权完成以后，选择刚刚创建的 Repository，填写构建信息。

如果项目是 Vite，可以参考下面配置：

如果你的仓库中已经配置了esa.jsonc，则该文件中的配置优先于控制台配置，参考：Alibaba Cloud⁠

确认无误后点击“开始部署”，几分钟后即可完成首次构建。

四、查看部署结果

部署成功后，ESA 会自动生成一个预览地址，点击“访问”，即可看到刚刚部署的网站， 如果没有配置自定义域名，访问到的是测试域名，有效期1小时。

以后每次push代码，ESA 都会自动执行：

Pull 最新代码 ↓ 安装依赖 ↓ 构建 ↓ 部署 ↓ 上线

真正做到持续部署（CI/CD）。

五、绑定自定义域名

默认提供的测试域名仅适合预览，正式上线建议绑定自己的域名（如果需要在中国大陆访问，需要使用备案的域名）。

参考文档：将域名快速接入ESA

例如：

toolgarden.xyz

进入 Pages：

域名管理

点击：

添加域名

输入：

toolgarden.xyz

ESA 会自动验证该域名是否已经接入。

绑定成功以后，会显示对应的 DNS 配置提示。绑定自定义域名前，需要确保域名已接入并激活 ESA。参考：阿里云帮助中心

域名解析成功以后，ESA 会自动申请并部署 HTTPS 证书，无需手动配置 Nginx 或上传证书。

总结

整个部署流程如下：

创建前端项目 │ ▼ 上传 GitHub │ ▼ 连接 GitHub 到 ESA │ ▼ 自动构建 Pages │ ▼ 生成测试域名 │ ▼ 绑定自定义域名，配置 DNScccccdcureljledlvfjvtcnfgjtverlvcttjgcjlljtv │ ▼ HTTPS 自动生效 │ ▼ Git Push 自动部署