阿里云也有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可以参考下面配置配置项示例Production BranchmainInstall Commandnpm installBuild Commandnpm run buildOutput DirectorydistNode.js20或项目所需版本如果你的仓库中已经配置了esa.jsonc则该文件中的配置优先于控制台配置参考Alibaba Cloud确认无误后点击“开始部署”几分钟后即可完成首次构建。四、查看部署结果部署成功后ESA 会自动生成一个预览地址点击“访问”即可看到刚刚部署的网站 如果没有配置自定义域名访问到的是测试域名有效期1小时。以后每次push代码ESA 都会自动执行Pull 最新代码 ↓ 安装依赖 ↓ 构建 ↓ 部署 ↓ 上线真正做到持续部署CI/CD。五、绑定自定义域名默认提供的测试域名仅适合预览正式上线建议绑定自己的域名如果需要在中国大陆访问需要使用备案的域名。参考文档将域名快速接入ESA例如toolgarden.xyz进入 Pages域名管理点击添加域名输入toolgarden.xyzESA 会自动验证该域名是否已经接入。绑定成功以后会显示对应的 DNS 配置提示。绑定自定义域名前需要确保域名已接入并激活 ESA。参考阿里云帮助中心域名解析成功以后ESA 会自动申请并部署 HTTPS 证书无需手动配置 Nginx 或上传证书。总结整个部署流程如下创建前端项目 │ ▼ 上传 GitHub │ ▼ 连接 GitHub 到 ESA │ ▼ 自动构建 Pages │ ▼ 生成测试域名 │ ▼ 绑定自定义域名配置 DNScccccdcureljledlvfjvtcnfgjtverlvcttjgcjlljtv │ ▼ HTTPS 自动生效 │ ▼ Git Push 自动部署
)
