Data-Science-For-Beginners 测验应用如何部署到 Azure Static Web Apps 并监控构建流程【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners这篇文章解决一个具体任务把 Data-Science-For-Beginners 仓库里的quiz-appVue.js 2 测验应用部署到 Azure Static Web Apps并跟踪 Azure 自动生成的 GitHub Actions 工作流直到应用上线。部署路径来自仓库自带文档 quiz-app/README.md 的 “Deploying to Azure” 章节构建参数与 AGENTS.md 的 “Build and Deployment” 一节一致。前提是你有 Azure 账户和 GitHub 账户且应用代码在你的 GitHub 仓库中文档建议 Fork 本仓库。部署前确认本地可以构建出 dist 产物Azure 端部署时构建配置会把quiz-app目录作为源码路径、dist作为输出目录因此部署前值得先在本地验证构建能通过# 安装依赖 cd quiz-app npm install # 构建生产版本 npm run build构建成功后产物位于dist/目录AGENTS.md 明确说明npm run build的 Output is in dist/ folder。quiz-app/package.json 中build脚本的实际内容是vue-cli-service build属于 Vue CLI 标准构建。环境要求来自 INSTALLATION.mdquiz-app 需要 Node.js 和 npm推荐安装 LTS 版本TROUBLESHOOTING.md 在排查 quiz 应用无法启动时给出的检查值是node --version应为 12.x 或更高。在 Azure 中创建并配置 Static Web App以下步骤逐条对应 quiz-app/README.md 的操作说明全部在 Azure portalportal.azure.com的 Web 界面中完成点击 “Create a resource”搜索 “Static Web App”点击 “Create”。Basics页Subscription选择你的 Azure 订阅Resource Group新建一个资源组或使用已有的Name为应用命名Region选择离用户最近的区域。Deployment DetailsSource选择 “GitHub”GitHub Account授权 Azure 访问你的 GitHub 账户Organization选择你的 GitHub 组织Repository选择包含应用的仓库Branch选择要部署的分支。Build DetailsBuild Presets选择应用使用的框架本应用是 Vue按文档示例选择对应的 Vue 预设App Location指定存放应用代码的目录。本仓库的应用在子目录中应填quiz-app根目录是课程文档不是应用代码API Location可选只有存在 API 代码时才填写Output Location指定构建产物目录填dist。检查配置后点击 “Create”。Azure 会创建所需资源并在你的仓库中自动创建 GitHub Actions workflow 文件。第 4 步的两个值是整个部署流程中最关键的两处配置AGENTS.md 给出的部署摘要同样是 App locationquiz-app、Output locationdist与 quiz-app/README.md 示例 workflow 中的app_location: quiz-app、output_location: dist一致。如果 App Location 误填为根目录/Azure 会在仓库根目录找构建配置而根目录没有 quiz-app 的package.json构建无法正确执行。理解自动生成的 GitHub Actions 工作流点击 “Create” 之后Azure 会自动在仓库中写入.github/workflows/azure-static-web-apps-name.yml由它接管后续的构建和部署。quiz-app/README.md 给出了该 workflow 的文档示例name对应你创建的资源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/checkoutv2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deployv1 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说明两点上面的代码块是文档示例Azure 实际生成的文件以仓库中为准。源文档中api_location一行存在排版瑕疵多余引号这里已整理为可解析的 YAML该项为可选配置没有 API 时留空即可。示例触发器绑定的是main分支。创建资源时你在 Branch 一栏选了哪个分支实际的构建部署就跟随哪个分支后续改动要推送到该分支才会触发重新部署。azure_static_web_apps_api_token和repo_token都是 GitHub Actions 的 secret 注入写法不需要你手动填写具体值secrets.GITHUB_TOKEN由 Actions 运行时自动提供AZURE_STATIC_WEB_APPS_API_TOKEN由 Azure 创建资源时配置到仓库 secret 中。监控构建流程与验证上线结果部署后的监控步骤在 quiz-app/README.md 的 “Monitor the Deployment” 一节打开你的 GitHub 仓库的 “Actions” 标签页应能看到正在运行的 workflow即上面那个azure-static-web-apps-*.yml它会构建并部署应用workflow 完成后应用会运行在 Azure 提供的 URL 上。也就是说文档给出的成功判定是Actions 中 workflow 跑完并且访问 Azure 分配的 URL 能看到测验应用。访问该 URL 时可以用浏览器开发者工具F12确认页面加载正常如果页面空白TROUBLESHOOTING.md 中 “Quiz Not Loading or Blank Page” 一节给出的检查项是查看控制台报错、清缓存、换浏览器、确认 JavaScript 已启用、排查广告拦截器。构建失败时的本地排查文档没有给出 Azure 侧 workflow 失败的逐项诊断能依据的是本地构建链的排查步骤。如果本地npm install失败CI 构建失败往往也是依赖问题TROUBLESHOOTING.md 给出的处理顺序是# 清空 npm 缓存 npm cache clean --force # 删除 node_modules 与 package-lock.json会移除本地的依赖目录和锁文件需确认没有未提交的本地修改依赖 rm -rf node_modules package-lock.json # 重新安装 npm install # 仍然失败时尝试 npm install --legacy-peer-deps注意其中rm -rf node_modules package-lock.json会删除本地目录与文件只在quiz-app目录内执行。如果npm run serve起不来先按前述检查node --version是否为 12.x 或更高然后重装依赖再试。提交改动前AGENTS.md 的 PR 检查清单建议先跑npm run lint和npm run build确认代码能构建再依赖推送触发的自动部署。限制与后续需要如实说明的边界文档只描述了部署成功路径workflow 完成、应用上线于 Azure URL和 workflow 自动创建这一事实没有给出 Azure 端构建失败的具体报错对照表遇到 CI 失败时文档能支撑的做法是先回到本地npm run build验证构建链再按 TROUBLESHOOTING 的 quiz 应用问题章节逐项排查。部署完成后向选定分支的每次推送都会触发该 workflow 自动重新构建和部署无需重复走创建流程关于应用本身的后续改动例如新增测验翻译见 quiz-app/README.md 开头 “Adding a translated quiz set” 一节的说明。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考