IoT for Beginners 项目 Quizzer 测验应用：本地搭建与 Azure Static Web Apps 部署实战指南
【免费下载链接】IoT-For-Beginners12 Weeks, 24 Lessons, IoT for All!项目地址: https://gitcode.com/GitHub_Trending/io/IoT-For-Beginners
导读
本文以translations/da/quiz-app/README.md（丹麦语版 Quizzer 应用指南）为主体，系统讲解微软《IoT for Beginners》课程配套测验应用（Quizzer）的项目结构、本地开发命令，以及如何借助 Azure Static Web Apps 与 GitHub Actions 将其持续集成、持续部署（CI/CD）到云端。读完本文，你将能够：在本地初始化并运行该 Vue 测验应用；理解其多语言与路由机制；并独立完成"Fork 仓库 → 创建 Azure 静态 Web 应用 → 配置部署参数 → 监控 Actions 流水线"的完整上线流程。同时，文章会结合仓库内 quiz-app 的源码，说明关键配置项与底层实现，帮助你不仅"会部署"，更能理解为什么这样部署。
一、Quizzer 应用概览与定位
Quizzer 是《IoT for Beginners》课程（12 周、24 节课）的课前/课后测验应用。课程中每一课都有对应的知识测验，帮助学生在上课前自测基础、下课后巩固所学。应用中每个测验固定包含 3 道题，答对全部题目即显示完成提示，答错则给出错误反馈，并可立即重试。
从仓库结构看，Quizzer 是一个基于 Vue 3（依赖声明为vue ^3.5.18，见 quiz-app/package.json）构建的单页应用，工程脚手架由 Vue CLI 5 提供。其代码组织如下：
- quiz-app/src/main.js：应用入口，初始化 Vue 实例、路由（
vue-router）与国际化（vue-i18n）； - quiz-app/src/App.vue：根组件，包含导航栏与语言切换下拉框；
- quiz-app/src/components/Quiz.vue：核心测验组件，负责逐题渲染与答题判定；
- quiz-app/src/views/Home.vue 与 quiz-app/src/views/NotFound.vue：测验列表首页与 404 兜底页；
- quiz-app/src/assets/translations：多语言题库与界面文案（JSON 文件）。
说明：本文指向的《Quizzer》文档为丹麦语翻译版（位于
translations/da/），其英文源文档为 quiz-app/README.md，两者技术内容一致。
二、本地环境搭建与开发命令
2.1 安装依赖
克隆仓库并进入quiz-app目录后，安装项目全部依赖：
npm installnpm install会根据 quiz-app/package.json 中的dependencies与devDependencies声明安装 Vue、Vue Router、Vue I18n、Core JS 以及 Vue CLI 插件（babel、eslint、service）等。安装完成后即可使用下面的四条核心命令。
2.2 开发模式：热重载
npm run serve该命令对应vue-cli-service serve，会启动本地开发服务器，默认地址通常为http://localhost:8080。开发服务器支持热重载（hot-reload）：修改src/下的组件、视图或翻译文件后，浏览器页面会即时更新，无需手动刷新。此模式最适合日常编辑题库与样式调试。
2.3 生产构建：编译与压缩
npm run build对应vue-cli-service build。构建产物默认输出到quiz-app/dist/目录，包括压缩、混淆后的 HTML、JavaScript 与 CSS 文件，供生产环境（如 Azure Static Web Apps）直接托管。构建配置由 quiz-app/babel.config.js 通过@vue/cli-plugin-babel/preset提供 Babel 转译支持，保证代码向后兼容现代主流浏览器。
2.4 代码检查：Lint 与自动修复
npm run lint对应vue-cli-service lint。ESLint 规则定义在package.json的eslintConfig字段中，extends了plugin:vue/essential与eslint:recommended。该命令会报告代码风格与潜在错误，并尽可能自动修复可自动修复的问题。
2.5 自定义配置
项目使用 Vue CLI 5 作为构建基础设施。如需深度自定义，可查阅 Vue CLI 官方配置参考文档（见原文档中的 Konfigurationsreference 链接，本文不再展开外部链接）。常见做法是在quiz-app目录下新建vue.config.js覆盖默认配置，例如修改outputDir、publicPath或配置开发服务器代理。
2.6 应用内部的测验数据结构
了解部署前，先快速看一下应用如何读取测验数据，这有助于理解构建产物的组成。所有测验内容集中在翻译 JSON 文件中。以 quiz-app/src/assets/translations/en.json 为例，每个测验对象的结构如下：
{ "id": 1, "title": "Lesson 1 - Introduction to IoT: Pre-Lecture Quiz", "quiz": [ { "questionText": "The I in IoT stands for:", "answerOptions": [ { "answerText": "Internet", "isCorrect": "true" }, { "answerText": "Iridium", "isCorrect": "false" }, { "answerText": "Ironing", "isCorrect": "false" } ] } ] }quiz-app/src/assets/translations/index.js 将ar、bn、en、zh-cn四个语言的 JSON 汇总为messages对象注入vue-i18n；quiz-app/src/App.vue 中的语言下拉框根据 ISO 639-1 代码切换$i18n.locale，实现界面与题目的多语言切换。答题逻辑位于 quiz-app/src/components/Quiz.vue：每题按answerOptions渲染按钮，点击后依据isCorrect判定——正确则进入下一题（每测验固定 3 题），全部答对后显示complete提示文案；答错则显示error提示并要求重试。路由则由 quiz-app/src/router/index.js 定义/（Home）、/quiz/:id（测验页）与通配 404 路由，并采用history模式。
理解以上结构后，即可进入本文的核心环节——部署到 Azure。
三、部署到 Azure Static Web Apps 完整流程
原文档提供了一份六步走的上线指南，下面逐步展开，并结合仓库补充要点。
第 1 步：Fork 仓库
确保你的静态 Web 应用代码位于自己的 GitHub 仓库中。具体做法是 Fork 本仓库（IoT-For-Beginners），Fork 后你拥有独立的仓库副本，后续 Azure 的 GitHub Actions 工作流会基于该副本执行构建与部署。
第 2 步：创建 Azure Static Web App 资源
- 注册/登录 Azure 账户；
- 打开 Azure 门户；
- 点击"创建资源"（Create a resource），搜索"Static Web App"；
- 点击"创建"（Create）进入配置向导。
第 3 步：配置静态 Web 应用
配置向导分为三大部分，关键字段如下：
基础（Basics）
| 字段 | 说明 |
|---|---|
| 订阅（Subscription） | 选择你的 Azure 订阅 |
| 资源组（Resource Group） | 新建或选择现有资源组 |
| 名称（Name） | 为静态 Web 应用命名 |
| 区域（Region） | 选择离目标用户最近的区域 |
部署详情（Deployment Details）
| 字段 | 说明 |
|---|---|
| 来源（Source） | 选择GitHub |
| GitHub 账户（GitHub Account） | 授权 Azure 访问你的 GitHub 账户 |
| 组织（Organization） | 选择你的 GitHub 组织 |
| 仓库（Repository） | 选择包含静态 Web 应用代码的仓库（即 Fork 后的IoT-For-Beginners） |
| 分支（Branch） | 选择要部署的分支（默认main） |
构建详情（Build Details）
| 字段 | 说明 |
|---|---|
| 构建预设（Build Presets） | 选择应用所用的框架。Quizzer 是 Vue 应用，应选择 Vue（或 Vue.js）预设 |
| 应用位置（App Location） | 指定应用代码所在目录。Quizzer 位于仓库根下的quiz-app目录，因此填quiz-app |
| API 位置（API Location） | 如有后端 API 则填写其目录（可选）。Quizzer 无后端 API，可留空 |
| 输出位置（Output Location） | 构建产物输出目录。Vue CLI 的npm run build默认输出到dist，因此填dist |
第 4 步：审阅并创建
核对上述设置无误后点击"创建"（Create）。Azure 会自动创建所需云资源，并在你的仓库中生成一个 GitHub Actions 工作流文件。
第 5 步：GitHub Actions 工作流
Azure 会在仓库的.github/workflows/目录下自动生成名为azure-static-web-apps-<名称>.yml的工作流文件，负责后续每次推送/拉取请求时的构建与部署。原文档给出的工作流示例如下（含注释说明）：
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" # 应用源码路径 api_location: "" # API 源码路径（可选，本项目为空） output_location: "dist" # 构建产物目录（可选）对该工作流的关键点说明如下：
- 触发条件：
push到main分支时执行完整"上传（upload）"部署；pull_request打开/同步/重开/关闭时也会触发，用于生成预发布环境； azure_static_web_apps_api_token：Azure 生成的部署令牌，作为仓库 Secret 注入，无需手动填写；repo_token：使用 GitHub 自动提供的GITHUB_TOKEN，让工作流具备仓库写入权限；action: "upload"：执行构建并上传产物；app_location: "quiz-app"：与门户中的"应用位置"一致，指向 Vue 源码目录；output_location: "dist"：与"输出位置"一致，指向npm run build的产物目录。
这里有一个值得注意的部署细节：Quizzer 的路由使用history模式（见 quiz-app/src/router/index.js），直接访问/quiz/1这类深层路径时，静态托管服务需要把请求回退到index.html，否则会返回 404。仓库为此在 quiz-app/public/routes.json 中提供了 SPA 回退规则：
{ "routes": [ { "route": "/*", "serve": "/index.html" } ] }该文件位于public/下，构建时会原样复制进dist/，Azure Static Web Apps 会自动读取routes.json实现前端路由的兜底，这可以推断是本项目能够在 history 路由模式下正常工作的关键配置。
第 6 步：监控部署
打开 GitHub 仓库的Actions标签页，可以看到工作流正在运行。工作流会执行代码检出、依赖安装、npm run build构建以及向 Azure 上传产物等步骤。当工作流成功完成后，应用即会通过 Azure 提供的 URL 对外提供访问。
四、部署后的持续更新流程
部署上线后，Quizzer 的内容更新（例如为新增课程补充测验题目、调整界面文案或修改样式）遵循标准的 Git 工作流：
- 在本地修改
quiz-app/src/下的组件、样式或 quiz-app/src/assets/translations 中的 JSON 题库； - 使用
npm run lint检查代码质量，必要时修复； - 提交并推送到
main分支； - GitHub Actions 检测到
push事件后自动重新构建并部署，无需手动干预。
由于测验数据完全由翻译 JSON 文件驱动，新增一节课的测验通常只需在对应语言的 JSON 中追加一个quizzes条目，前端组件 quiz-app/src/components/Quiz.vue 与首页 quiz-app/src/views/Home.vue 会自动渲染新测验的入口链接，这一机制可以从其基于$t("quizzes")动态渲染的逻辑中得到印证。
五、注意事项与适用前提
- 环境要求：本文部署流程需要 Node.js 与 npm 环境来执行本地构建命令；Azure 侧需要有效的 Azure 订阅与 GitHub 账户授权。
- 版本前提：仓库中
package.json声明的构建链基于 Vue CLI 5（@vue/cli-service ~5.0.8）与 Vue 3 依赖（vue ^3.5.18），上述serve/build/lint命令的行为以当前仓库实际依赖版本为准。 - Secret 管理：
azure_static_web_apps_api_token由 Azure 创建资源时自动写入仓库 Secrets，无需也不应手动提交任何密钥到仓库。 - 部署产物：构建输出目录为
quiz-app/dist（该目录为构建生成，不在仓库中提交），部署以该目录为准。 - 原文致谢：原文档致谢最初的简单 Vue 测验应用实现（simple-quiz-vue），Quizzer 在其基础上扩展而来。
六、总结
本文围绕《IoT for Beginners》配套 Quizzer 测验应用，完整梳理了从本地开发（npm install、npm run serve/build/lint）到 Azure Static Web Apps 生产部署（Fork 仓库、创建资源、配置构建参数、GitHub Actions 自动 CI/CD、监控部署）的全过程。结合仓库源码可以看到：测验数据以多语言 JSON 驱动、vue-i18n负责语言切换、Quiz.vue实现逐题判定、routes.json解决 history 路由回退——这些细节共同保证了应用既能在本地顺畅运行，也能在 Azure 静态托管下稳定上线。对课程维护者而言，后续只需维护翻译 JSON 与触发main分支推送，即可完成测验内容与版本的持续交付。
【免费下载链接】IoT-For-Beginners12 Weeks, 24 Lessons, IoT for All!项目地址: https://gitcode.com/GitHub_Trending/io/IoT-For-Beginners
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
 报错参数多？TaoToken 这样改 Codex 通道再查)
