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-BeginnersML-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_locationdistAPI 位置API Location可选项quiz-app 没有后端 API文档示例中该字段为空。在 Azure 门户创建 Static Web App以下步骤来自 quiz-app/README.md 的 Deploying to Azure 章节Fork 仓库确保静态网站代码在你的 GitHub 仓库中。Fork ML-For-Beginners 仓库。创建资源进入 Azure 门户点击 Create a resource搜索 Static Web App点击 Create。Basics 页签依次填写Subscription选择你的 Azure 订阅Resource Group新建一个资源组或使用已有资源组Name为静态 Web 应用命名Region选择离你的用户最近的区域。Deployment Details 页签Source选择 GitHubGitHub Account授权 Azure 访问你的 GitHub 账户Organization选择你的 GitHub 组织Repository选择包含静态 Web 应用的仓库即你的 ForkBranch选择要部署的分支。文档示例工作流针对main分支触发。Build Details 页签Build Presets选择应用所用的框架quiz-app 属于 VueApp Location/quiz-appAPI Location可选无 API 时留空Output Locationdist。Review and Create核对设置后点击 Create。Azure 会创建相应资源并在你的仓库中自动创建 GitHub Actions 工作流文件。Azure 生成的工作流文件创建资源后Azure 会在你的仓库中自动生成.github/workflows/azure-static-web-apps-name.ymlname为 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/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其中app_location与output_location两个值正是上一步在 Build Details 中确认的/quiz-app和dist。按 AGENTS.md 的说明该工作流在推送到 main 分支时自动执行构建和部署后续代码变更通过 push 即可触发重新部署无需再次进入 Azure 门户操作。检查部署结果文档给出的验证方式是两步见 quiz-app/README.md 第 6 步 Monitor the Deployment打开 GitHub 仓库的 Actions 页签确认可以看到工作流正在运行。这是部署已触发、构建流程已启动的判断依据。等待工作流执行完成。文档的完成条件是工作流结束后应用即上线在 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 filesAGENTS.md 的 Testing 一节也把npm run buildBuild 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ML-For-Beginners 如何把 quiz-app 部署到 Azure Static Web Apps 并检查部署结果？
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-BeginnersML-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_locationdistAPI 位置API Location可选项quiz-app 没有后端 API文档示例中该字段为空。在 Azure 门户创建 Static Web App以下步骤来自 quiz-app/README.md 的 Deploying to Azure 章节Fork 仓库确保静态网站代码在你的 GitHub 仓库中。Fork ML-For-Beginners 仓库。创建资源进入 Azure 门户点击 Create a resource搜索 Static Web App点击 Create。Basics 页签依次填写Subscription选择你的 Azure 订阅Resource Group新建一个资源组或使用已有资源组Name为静态 Web 应用命名Region选择离你的用户最近的区域。Deployment Details 页签Source选择 GitHubGitHub Account授权 Azure 访问你的 GitHub 账户Organization选择你的 GitHub 组织Repository选择包含静态 Web 应用的仓库即你的 ForkBranch选择要部署的分支。文档示例工作流针对main分支触发。Build Details 页签Build Presets选择应用所用的框架quiz-app 属于 VueApp Location/quiz-appAPI Location可选无 API 时留空Output Locationdist。Review and Create核对设置后点击 Create。Azure 会创建相应资源并在你的仓库中自动创建 GitHub Actions 工作流文件。Azure 生成的工作流文件创建资源后Azure 会在你的仓库中自动生成.github/workflows/azure-static-web-apps-name.ymlname为 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/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其中app_location与output_location两个值正是上一步在 Build Details 中确认的/quiz-app和dist。按 AGENTS.md 的说明该工作流在推送到 main 分支时自动执行构建和部署后续代码变更通过 push 即可触发重新部署无需再次进入 Azure 门户操作。检查部署结果文档给出的验证方式是两步见 quiz-app/README.md 第 6 步 Monitor the Deployment打开 GitHub 仓库的 Actions 页签确认可以看到工作流正在运行。这是部署已触发、构建流程已启动的判断依据。等待工作流执行完成。文档的完成条件是工作流结束后应用即上线在 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 filesAGENTS.md 的 Testing 一节也把npm run buildBuild 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考