【参赛者必看教程】关于阿里云ESA Pages部署全流程

阿里云ESA

一、前置条件

• 开通阿里云ESA边缘安全加速产品，并开通“函数和Pages”服务。
• 拥有一个可用的Github账号，并将本地项目上传至Github仓库。具体步骤可参考：本地项目如何上传至GitHub仓库。
  

二、创建构建配置文件esa.jsonc

您需要在Github仓库的根目录创建esa.jsonc文件（或在ESA控制台创建Pages项目时填写构建参数），以便让ESA了解您仓库的构建逻辑。这里以esa.jsonc文件为例进行参数说明：

:::

若您不了解构建含义，可尝试直接使用以下esa.jsonc配置文件。

{  "name": "vite-react-template",  "entry": "./src/index.js",  "installCommand": "npm install",  "buildCommand": "npm run build",  "assets": {    "directory": "./dist",    "notFoundStrategy": "singlePageApplication"  }}

:::

参数

说明

name

指定部署的目标项目。如果该项目已存在，部署将在其下进行；如果不存在，系统将使用此名称自动为您创建一个新项目。

entry

边缘函数的入口执行文件路径，例如： ./src/index.ts。

installCommand

配置自定义安装指令，例如：npm install。该配置会覆盖控制台的安装命令配置，如果设置成空字符串，安装步骤将被跳过。支持的包管理器包括：npm、pnpm、yarn、cnpm。

buildCommand

配置自定义构建命令，例如：npm run build。该配置会覆盖控制台的构建命令配置，如果设置成空字符串，构建步骤将被跳过。

assets

静态资源托管功能允许开发者在ESA函数和Pages上运行前端网站。您可以配置资产目录，每个Pages只能配置一组静态资源，assets 提供了以下选项：
* directory：构建产物中将被静态托管的目录，例如：./public、./dist 、 ./build等。

* notFoundStrategy ：当请求的路径未匹配到任何静态资源时，执行的策略。

* singlePageApplication：返回静态托管目录的index.html文件及 200 OK状态码。适用于单页应用时。

* 404Page：返回静态托管目录的404.html文件及 404 Not Found 状态码。

说明
若您同时配置了函数脚本与assets.notFoundStrategy选项，那么导航请求将不会触发该函数脚本的执行。导航请求：指浏览器在用户直接访问页面时（例如在地址栏输入URL或点击链接）自动发出的请求，其特征是包含了Sec-Fetch-Mode: navigate请求头。

详细见配置说明文档：Pages构建和路由指南

三、通过导入Github仓库创建Pages

• 登录ESA控制台，在左侧导航栏选择边缘计算 > 函数和Pages。

• 在边缘函数页面，单击创建。

• 选择导入Github仓库页签，单击添加Github账户。

  

• 登录Github账号后，在授权页面默认选择All repositories，单击Install & Authorize完成仓库授权。
  

• 选择需要构建的对应仓库名，单击下一步。

  

• 填写构建信息（若您的仓库已经创建有esa.jsonc文件，则忽略此处），单击开始部署。

  

  配置类型
  功能
  说明
  
  基础配置生产分支
  默认为main分支。ESA将按照所选分支自动触发构建并自动部署到生产环境。
  
  非生产分支构建
  开启后，将对非生产分支（比如非main分支）的新提交生成构建版本，但不会自动部署。
  
  安装命令
  若需先安装依赖，填写命令，例如 npm install。支持npm、yarn、cnpm、pnpm。
  
  构建命令
  若需先构建，填写命令，例如npm run build。支持npm、yarn、cnpm、pnpm。
  
  高级配置根目录
  构建命令将在此目录下执行，默认/。若是monorepo，请填写要构建的子项目路径（例如 /frontend或 /packages/web）。
  
  静态资源目录
  构建产物中将被静态托管的目录，例如：./public、./dist 或 ./build。您可以在esa.jsonc文件的assets.directory字段中指定静态资源目录。该配置的优先级高于构建信息中的配置，会覆盖您在此处的配置。
  
  函数文件路径
  函数的入口文件路径，即实际执行的文件。例如：./src/index.ts。您可以在esa.jsonc文件的entry字段中指定函数文件路径。该配置的优先级高于构建信息中的配置，会覆盖您在此处的配置。
  
  Node.js版本
  构建使用的 Node.js 版本。修改该配置后，需要重新触发构建才能生效。您可以在package.json文件的engines.node字段中指定Node.js主版本。该配置的优先级高于构建信息中的配置，会覆盖您在此处的配置。
  
  环境变量
  设置构建过程中可使用的环境变量，可以通过全局对象process.env获取。

• 等待系统构建完成后，将为您生成一个er.aliyun-esa.net后缀的公共域名，可直接访问预览效果。

  
  

四、提交作品到天池赛事页面

• 天池大赛-【阿里云ESA Pages 边缘开发大赛】

• 左侧TAB点击 “提交结果” 进行作品提交
  

• 本地创建一个txt文本文件，填写好以下信息：
  ● 部署 URL：粘贴 ESA 分配的网址（如 https://XXXXX.er.aliyun-esa.net），如果有个人域名也可以直接绑定，绑定个人域名操作相见官方操作文档。
  ● GitHub 仓库地址：粘贴你的 GitHub 项目链接（如 https://github.com/xxx/my-esa-ai-page）
  ● 作品介绍：可以介绍作品名称、简介，例如 “个人作品集”；还可以分别从创意卓越、实用价值、技术探索三个方向说明你的作品亮点。
  

• 点击 提交
  ✅ 提交成功！你已正式参赛，并满足“有效作品”要求！您可以继续提交其他作品，每个作品均可独立多维度评分。
  同一个项目重复提交，请重点标注下优化点，如未标注优化点，同一项目作品重复提交分数则标记为0.01分（属于无效提交）。

  
  

周杰伦

奖品呢

阿里云ESA

周杰伦 发表于 2026-1-6 14:59
奖品呢

奖品见赛事页面：https://tianchi.aliyun.com/specials/promotion/2025esa-pages