使用 Azure Static Web Apps 部署 Web-Dev-For-Beginners 中的 Terrarium 项目
【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners
Terrarium 是 Web-Dev-For-Beginners 课程中一个经典的实战项目：用纯 HTML、CSS 与原生 JavaScript 构建一个可拖拽植物的虚拟植物园，共分三课完成。本文以仓库内 Terrarium 部署指南 为核心，完整讲解如何将这一纯前端项目通过Azure Static Web Apps免费发布到公网，并深入结合 solution 源码 说明部署配置背后的原理，让读者掌握"静态站点托管"这一 Web 开发者必备技能。
为什么 Terrarium 适合静态托管
在动手部署前，先明确一个关键判断：Terrarium 是一个纯静态（无后端）应用，这正是 Azure Static Web Apps 的最佳适用场景。
从仓库源码可以确认这一点。整个 3-terrarium/solution 目录只有四类文件：
index.html——页面结构，包含导航栏、植物陈列区与玻璃罐容器；style.css——全部视觉样式，包括用 CSS 绘制的玻璃罐（jar-top、jar-walls、jar-bottom、dirt等）与光影反射；script.js——全部交互逻辑，利用 Pointer Events 与闭包实现 14 株植物的拖拽；images/——plant1.png至plant14.png共 14 张植物素材。
没有任何服务端代码、数据库或密钥。JavaScript 只通过document.getElementById()操作 DOM 并改写元素样式，script.js 中可以看到 14 次dragElement(...)调用，全部逻辑都在浏览器本地完成。这样的应用无需服务器动态渲染，交给静态托管服务后，访问者获得的就是"原样的文件 + 全速 CDN 分发"。
部署前置条件
开始部署前需要准备：
- 一个 GitHub 账号：Azure Static Web Apps 的自动构建与发布机制依赖 GitHub 仓库（仓库 fork 后会自动生成
.github工作流文件，详见下文）； - 本仓库的 fork：将 Web-Dev-For-Beginners 仓库 fork 到自己的账号下，从而获得可被 Azure 授权访问、可写入的副本；
- 一个 Azure 账号：用于进入创建向导并承载托管资源，首次使用可关注其免费层的额度适用范围（具体以 Azure 官方定价为准，此处不展开）。
提示：如果你只想本地体验项目效果，无需任何部署——直接用浏览器打开 3-terrarium/solution/index.html 即可运行。
三步完成部署
原文档给出的部署流程精炼为三步，下面逐一展开并补充每一步的细节与原理。
第 1 步：Fork 本仓库
进入本仓库首页，点击右上角的Fork，将仓库复制到自己的 GitHub 账号下。
这一步的意义在于：Azure Static Web Apps 需要在你的仓库中写入一个 GitHub Actions 工作流文件（.github/workflows/下的配置），只有你拥有写权限的 fork 仓库才能做到。这也是为什么不能直接对只读的上游仓库执行部署。
第 2 步：点击 Deploy to Azure 按钮
在 Terrarium 部署指南 中，原文档放置了一个Deploy to Azure品牌按钮（[](https://portal.azure.com/#create/Microsoft.StaticApp)）。
点击后会自动跳转到 Azure 门户的"创建 Static Web App"向导页面，并预填了创建该类型资源所需的部分参数，省去在门户中逐项查找入口的步骤。这是微软为开源项目提供的标准化部署入口模式。
第 3 步：跟随向导创建应用
进入向导后，按文档要求完成三件关键配置：
3.1 设置 App root
将 App root（应用根目录）设置为/solution或你代码库的根目录。
这是整个部署中最重要的参数。它的含义是：告诉 Azure 构建服务"网站的入口文件index.html在哪里"。对本仓库而言，可直接使用solution子目录，即 3-terrarium/solution——因为该目录下恰好平铺着index.html、style.css、script.js和images/，是完整的可发布单元。
如果你把自己的 Terrarium 代码放在了 fork 仓库的根目录，则设为/（根目录）即可。该参数最终会写入自动生成的 GitHub Actions 工作流中，作为app_location字段。
3.2 跳过 API 配置
此应用没有 API，因此可以跳过 API 配置。
Azure Static Web Apps 支持在同一托管下附带无服务器 API（Azure Functions）。由于 Terrarium 是纯前端应用，向导中的 API location（API 位置）一栏留空即可。这从源码上也能得到印证：solution目录中不存在任何api/子目录或函数代码。
3.3 自动生成的.github文件夹
一个.github文件夹会被自动创建，用于帮助 Azure Static Web Apps 构建并发布你的应用。
点击创建后，Azure 会在你的 fork 仓库中自动写入 GitHub Actions 工作流。其大致作用链路为：
- 工作流文件被写入
.github/workflows/目录； - 每次向托管分支推送代码，GitHub Actions 都会运行"构建"任务；
- 构建服务依据你在向导中填写的App root找到静态文件；
- 产物被发布到 Azure Static Web Apps 的全球边缘网络，并分配一个新的公网 URL。
整个"提交代码 → 自动构建 → 自动发布"的过程是 Azure Static Web Apps 的核心价值：开发者只关心推送代码，发布是自动完成的。
部署完成后的验证与体验
部署成功后，你会获得一个 Azure 分配的 HTTPS 公网地址。打开它，你应该看到与本地运行 3-terrarium/solution/index.html 完全一致的效果：
- 页面左右两侧各陈列 7 株植物；
- 鼠标按住任意植物即可拖拽，植物会"飞进"中间的玻璃罐；
- 玻璃罐的透明度、高光与土壤层均由 CSS 实现。
这段交互体验背后的原理，来自 script.js 的闭包设计：dragElement外层函数为每株植物创建独立的pos1~pos4私有坐标变量，内层pointerDrag、elementDrag、stopElementDrag通过闭包共享并持久化这些状态，从而实现互不干扰的多元素拖拽。部署到静态托管后，这段逻辑以原样静态文件的形式被分发，浏览器加载后即完成全部执行。
进阶：修改后如何更新线上版本
静态托管的更新链路非常简单：
- 在本地修改 3-terrarium/solution 下的
index.html、style.css或script.js； - 提交并推送（push）到 fork 仓库的托管分支；
- 等待 GitHub Actions 工作流自动完成构建与发布；
- 刷新线上 URL 即可看到更新。
这是"GitOps"式发布的最简实践：仓库即真相，推送即发布，无需登录服务器、无需手动上传文件。
从部署到更深层的理解
部署只是项目交付的最后一公里。如果你想把 Terrarium 从"能跑"推进到"懂原理"，仓库内的三节课程是完整的知识链路：
- Part 1: 认识 HTML——学习 DOCTYPE、语义化标签、
<div>容器与<img>布局，搭建页面骨架； - Part 2: 认识 CSS——学习层叠、选择器、定位体系，并用百分比尺寸与透明度"画"出玻璃罐；
- Part 3: DOM 操作与 JavaScript 闭包——通过 Pointer Events 与闭包实现拖拽交互。
理解这三课，你就能明白为何部署一个 Terrarium 只需"静态文件 + 静态托管"，也能举一反三地将同样的部署流程迁移到你自己的任何纯前端项目（个人主页、作品集、小型工具站）上。
【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
