企业官网建设流程全解析

ML-For-Beginners 如何把 quiz-app 部署到 Azure Static Web Apps 并检查部署结果？

【免费下载链接】ML-For-Beginners12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all项目地址: https://gitcode.com/GitHub_Trending/ml/ML-For-Beginners

ML-For-Beginners 仓库的 quiz-app 是基于 Vue.js 的测验应用，承载课程各章节的课前/课后测验。它本身只是仓库里的一个目录，无法直接对外提供服务。quiz-app/README.md 的 "Deploying to Azure" 一节给出了一条完整的上线路径：把 quiz-app 部署到 Azure Static Web Apps，由 Azure 自动生成 GitHub Actions 工作流完成构建和部署，最后通过 Azure 分配的 URL 访问已上线的应用。完成本文操作后，你的结果是：GitHub 仓库中多出 Azure 自动生成的工作流文件，Actions 面板中工作流执行完成，应用可在 Azure 提供的 URL 上访问。

前提条件以文档为准：

• 一个 Azure 账户；
• 一个包含静态网站代码的 GitHub 仓库。由于应用代码在 ML-For-Beginners 仓库中，文档给出的做法是 Fork 该仓库，然后基于自己的 Fork 进行部署；
• 部署前建议先在本地确认应用可以构建（见下文"本地构建验证"）。

应用与构建参数确认

quiz-app 使用 Vue CLI 构建。package.json 中build脚本为vue-cli-service build，文档中给出的两处部署配置与此对应：

• 应用代码位置（App Location /app_location）：/quiz-app，即代码位于仓库根目录下的quiz-app目录；
• 构建产物位置（Output Location /output_location）：dist；
• API 位置（API Location）：可选项，quiz-app 没有后端 API，文档示例中该字段为空。

在 Azure 门户创建 Static Web App

以下步骤来自 quiz-app/README.md 的 "Deploying to Azure" 章节：

1. Fork 仓库：确保静态网站代码在你的 GitHub 仓库中。Fork ML-For-Beginners 仓库。
2. 创建资源：进入 Azure 门户，点击 "Create a resource"，搜索 "Static Web App"，点击 "Create"。
3. Basics 页签依次填写：
   • Subscription：选择你的 Azure 订阅；
   • Resource Group：新建一个资源组或使用已有资源组；
   • Name：为静态 Web 应用命名；
   • Region：选择离你的用户最近的区域。
4. Deployment Details 页签：
   • Source：选择 "GitHub"；
   • GitHub Account：授权 Azure 访问你的 GitHub 账户；
   • Organization：选择你的 GitHub 组织；
   • Repository：选择包含静态 Web 应用的仓库（即你的 Fork）；
   • Branch：选择要部署的分支。文档示例工作流针对main分支触发。
5. Build Details 页签：
   • Build Presets：选择应用所用的框架，quiz-app 属于 Vue；
   • App Location：/quiz-app；
   • API Location：可选，无 API 时留空；
   • Output Location：dist。
6. Review and Create：核对设置后点击 "Create"。Azure 会创建相应资源，并在你的仓库中自动创建 GitHub Actions 工作流文件。

Azure 生成的工作流文件

创建资源后，Azure 会在你的仓库中自动生成.github/workflows/azure-static-web-apps-<name>.yml（<name>为 Azure 生成的应用标识），该工作流负责构建和部署。注意这个文件出现在你 Fork 后的仓库里，上游仓库中并不存在该文件。文档给出了一个示例工作流文件，说明其大致结构（文档示例，实际文件由 Azure 自动生成，无需手工创建）：

name: Azure Static Web Apps CI/CD on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main jobs: build_and_deploy_job: runs-on: ubuntu-latest name: Build and Deploy Job steps: - uses: actions/checkout@v2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.GITHUB_TOKEN }} action: "upload" app_location: "/quiz-app" # App source code path api_location: "" # API source code path, optional output_location: "dist" # Built app content directory - optional

其中app_location与output_location两个值正是上一步在 Build Details 中确认的/quiz-app和dist。按 AGENTS.md 的说明，该工作流在推送到 main 分支时自动执行构建和部署，后续代码变更通过 push 即可触发重新部署，无需再次进入 Azure 门户操作。

检查部署结果

文档给出的验证方式是两步（见 quiz-app/README.md 第 6 步 "Monitor the Deployment"）：

1. 打开 GitHub 仓库的 "Actions" 页签，确认可以看到工作流正在运行。这是部署已触发、构建流程已启动的判断依据。
2. 等待工作流执行完成。文档的完成条件是：工作流结束后，应用即上线在 Azure 提供的 URL 上——用该 URL 访问，页面正常展示 quiz-app，即部署成功。

如果 Actions 页签看不到工作流运行，说明部署尚未被触发；文档中的触发条件是资源创建成功且推送了所选分支，可先核对仓库中是否已出现azure-static-web-apps-*.yml工作流文件、以及所选分支是否已有提交。

本地构建验证与常见问题

部署前可以先在本地跑一遍构建，提前暴露环境问题。quiz-app/README.md 给出的命令（在quiz-app目录下执行）：

npm install npm run build # Compiles and minifies for production npm run lint # Lints and fixes files

AGENTS.md 的 Testing 一节也把npm run build（"Build to verify no errors"）作为 quiz-app 的验证手段，Troubleshooting 一节给出了三个本地构建/运行问题的处理办法：

• npm install失败：清理 npm 缓存后重试：npm cache clean --force；
• 开发服务器端口冲突：npm run serve -- --port 8081换用 8081 端口；
• 构建错误：删除node_modules目录后重新安装，文档给出的命令是rm -rf node_modules && npm install。该命令会删除quiz-app/node_modules目录（仅依赖缓存，会被npm install重建），执行前确认当前工作目录是quiz-app。

以上问题都属于本地环境问题，处理完重新执行npm run build确认能成功构建后，再按 Azure 侧流程触发部署。部署链路本身的判断仍然以 Actions 页签的工作流状态和 Azure URL 的访问结果为准。

【免费下载链接】ML-For-Beginners12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all项目地址: https://gitcode.com/GitHub_Trending/ml/ML-For-Beginners