使用 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本篇技术指南聚焦于 Web-Dev-For-Beginners 课程中 Terrarium虚拟植物盆景项目的发布环节如何将纯 HTML/CSS/JavaScript 构成的静态网页通过Azure Static Web Apps一键托管到公网。读完本文你将掌握从 fork 仓库、点击部署按钮、配置 App root 到验证线上 URL 的完整流程并理解为何这类无后端、无构建步骤的静态站点最适合用 Static Web Apps 承载。Terrarium 项目是什么Terrarium 是 3-terrarium 模块的动手实践项目由三课组成HTML 结构1-intro-to-html、CSS 样式2-intro-to-css、DOM 与闭包交互3-intro-to-DOM-and-closures。其完整实现位于 3-terrarium/solution 目录最终产物是三个静态资源文件彼此通过相对路径引用文件作用index.html页面骨架导航栏、左右两列植物区、玻璃罐容器style.css视觉样式容器布局、玻璃罐质感、导航与页脚样式script.js交互逻辑基于指针事件与闭包实现植物拖拽从 index.html 可以看到页面仅通过link引入本地style.css、通过script defer引入本地script.js植物图片则以./images/plantN.png相对路径引用共 14 张位于 3-terrarium/solution/images。整站不依赖任何运行时、后端服务或数据库——这正是纯静态站点的定义也是选用 Azure Static Web Apps 部署的前提。部署前置理解静态站点的特性在开始部署前需要明确此项目的两个关键事实与部署配置直接相关无 API仓库内没有任何函数计算、数据库或服务端接口。按 3-terrarium/solution/index.html 的结构浏览器加载页面后直接由 JS 完成全部交互因此部署向导中的API 配置可以跳过。无构建步骤项目没有package.json构建脚本也不需要编译产物。源码即产物部署时只需告诉 Static Web Apps静态文件放在哪里即可这个位置就是下文要设置的App root。从源码结构看这正是 Azure Static Web Apps 最典型的适用场景托管静态内容、自动配发 HTTPS 域名、支持后续通过 GitHub Actions 持续集成。部署步骤详解本节完整继承并展开 translations/de/3-terrarium/README.md与英文原版 3-terrarium/README.md 内容一致中的三步流程。第一步Fork 这个仓库首先在代码托管平台对Web-Dev-For-Beginners仓库执行Fork得到一份属于自己的仓库副本。这一步是必需的因为 Azure Static Web Apps 的部署机制基于 GitHub 仓库构建服务会监听 fork 后仓库的分支与提交实现代码推送即自动重新发布。第二步点击 Deploy to Azure 按钮原文档在部署小节中提供了一个Deploy to Azure的一键部署按钮。点击后浏览器会跳转到 Azure 门户的 Static Web Apps 创建向导页面并根据当前登录的 Azure 账号自动预填资源组、应用名称等默认项。该按钮的价值在于省去了在门户中手动逐项选择服务、填表的过程直接把用户带到正确的创建流程入口。第三步跟随设置向导创建应用进入向导后核心配置只有以下几项逐一说明App root应用根目录设置为/solution或你的代码根目录。这是本次部署最重要的参数它告诉 Azure Static Web Apps 静态文件在仓库中的位置若使用课程自带的成品直接填/solution对应仓库中的 3-terrarium/solution 目录该目录下的index.html会被识别为站点首页若你按照课程自己新建了项目例如位于仓库根目录或自己的terrarium文件夹则填对应的代码根目录。跳过 API 配置。由于该项目没有任何后端向导中对应 API 或 Functions 的设置项留空即可向导允许直接跳过不会影响站点功能。.github文件夹会自动创建。向导完成后Azure 会在你的 fork 仓库中自动生成一个.github工作流文件夹其中包含 GitHub Actions 的 workflow 定义。它的作用是每当有代码推送到指定分支通常是main构建服务会自动拉取代码、按 App root 定位静态文件并发布到新的站点 URL。当前仓库本身不包含.github目录从仓库目录列表可确认这正是它由部署向导按需生成的原因。部署完成后的验证向导执行完毕后Azure 会返回一个新的 URL形如https://随机前缀.azurestaticapps.net该 URL 即为线上地址。打开后你应看到与本地一致的 Terrarium 界面页面顶部为导航栏中央是 My Terrarium 标题左右两侧各列出 7 株植物共 14 株见 index.html 中plant1至plant14中部为 CSS 绘制的玻璃罐jar-top、jar-walls、dirt、jar-bottom等元素见 index.html植物可被鼠标或触摸拖拽到页面任意位置由 script.js 的拖拽逻辑驱动。验证技巧部署后右键页面选择查看源代码确认 HTML 中引用的./style.css、./script.js与./images/plantN.png均能正常加载浏览器 DevTools 的 Network 面板可逐一核对 200 状态码。若图片 404通常是 App root 设置错误导致静态文件相对路径失效。源码级解析Terrarium 如何证明自己是纯静态应用为了让你确信该站点不需要任何服务端能力这里结合 script.js 分析其唯一的核心交互——拖拽它完全在浏览器端完成。脚本顶部对 14 个植物元素逐一调用dragElement()见 script.js每个元素通过idplant1plant14从 DOM 中取得与 index.html 中id一一对应。dragElement函数内部定义了pos1pos4四个局部变量script.js并返回嵌套函数pointerDrag、elementDrag、stopElementDragonpointerdown触发pointerDrag记录起始坐标pos3/pos4并挂载全局的onpointermove与onpointerupelementDrag计算坐标增量实时更新元素的style.top/style.leftstopElementDrag在鼠标释放时清理监听避免内存泄漏。这段代码正是闭包的典型应用内层函数引用了外层函数作用域中的pos1pos4即便外层函数执行完毕这些变量仍被内层函数持有从而为每个植物维护独立的拖拽状态。整个过程只依赖浏览器 DOM APIPointer Events不涉及任何网络请求——进一步印证了该项目是无需 API 的静态站点部署配置中跳过 API完全合理。常见问题与排查建议App root 填错导致页面空白/样式丢失检查是否把 root 指向了不含index.html的目录。仓库中正确的成品路径是/solution若填了仓库根目录需要确认根目录下存在可用的入口页。fork 后的修改不触发更新Static Web Apps 通过自动生成的.githubworkflow 监听分支推送。修改代码并提交到对应分支后等待 Actions 运行完成刷新线上 URL 即可看到新版本。本地预览与线上表现不一致先在本地以静态方式打开 index.html或任意静态服务器验证再对照线上 URL通常能快速定位是代码问题还是 App root 配置问题。小结Terrarium 项目以最精简的形式演示了 Web 开发的完整闭环用 HTML 搭结构、CSS 做样式、JavaScript闭包 DOM实现交互最后通过 Azure Static Web Apps 一键发布到公网。掌握本文的部署流程后你不仅能发布 Terrarium还能将任何无后端、无构建的静态页面项目复用到同一套流程中。更深入的项目细节可继续阅读 3-terrarium/solution/README.md 与三节课程文档。【免费下载链接】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），仅供参考