阿里云也有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

复制代码

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

点击：

复制代码

创建

选择：

复制代码

导入 GitHub 仓库

第一次使用需要：

复制代码

添加 GitHub 账号

随后 GitHub 会弹出授权页面。

建议直接授权：

复制代码

All repositories

Install & Authorize

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

三、选择仓库并开始部署

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

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

配置项	示例
Production Branch	main
Install Command	npm install
Build Command	npm run build
Output Directory	dist
Node.js	20（或项目所需版本）

如果你的仓库中已经配置了 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
        │
        ▼
生成测试域名
        │
        ▼
绑定自定义域名，配置 DNS
        │
        ▼
HTTPS 自动生效
        │
        ▼
Git Push 自动部署