一、前置条件
-
开通阿里云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后缀的公共域名，可直接访问预览效果。
📌 第四步：提交作品到大赛（2 分钟）
1. 回到大赛页面
🔗 tianchi.aliyun.com/competition…
2. 左侧TAB点击 “提交结果” 进行作品提交
3. 本地创建一个txt文本文件，填写好以下信息：
-
部署 URL：粘贴 ESA 分配的网址（如
https://esaexperience.a17f8d09.er.aliyun-esa.net），如果有个人域名也可以直接绑定，绑定个人域名操作相见官方操作文档。 -
GitHub 仓库地址：粘贴你的 GitHub 项目链接（如
https://github.com/xxx/my-esa-ai-page） -
作品介绍：可以介绍作品名称、简介，例如 “个人作品集”；还可以分别从创意卓越、实用价值、技术探索三个方向说明你的作品亮点。
4. 点击 提交
✅ 提交成功！你已正式参赛，并满足“有效作品”要求！
