一、前置條件
- 開通阿里雲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. 回到大賽頁面
🔗 https://tianchi.aliyun.com/competition/entrance/532441
2. 左側TAB點擊 “提交結果” 進行作品提交
3. 本地創建一個txt文本文件，填寫好以下信息：
- 部署 URL：粘貼 ESA 分配的網址（如
https://XXXXX.er.aliyun-esa.net），如果有個人域名也可以直接綁定，綁定個人域名操作相見官方操作文檔。 - GitHub 倉庫地址：粘貼你的 GitHub 項目鏈接（如
https://github.com/xxx/my-esa-ai-page） - 作品介紹：可以介紹作品名稱、簡介，例如 “個人作品集”；還可以分別從創意卓越、實用價值、技術探索三個方向説明你的作品亮點。
4. 點擊 提交
✅ 提交成功！你已正式參賽，並滿足“有效作品”要求！
🎁 賽事額外🎁
