部署指南3步把Moonrider发布到GitHub Pages附HTTPS避坑清单【免费下载链接】moonrider Surf the musical road among the stars. Side project built by two people in a few months to demonstrate WebXR.项目地址: https://gitcode.com/gh_mirrors/mo/moonriderMoonrider 是一款免费开源的 WebXR 音游让你在浏览器里就能骑上月亮上的霓虹音轨冲浪打歌。这篇 Moonrider 部署指南带你用3 步把它发布到 GitHub Pages并附上一份 HTTPS 避坑清单帮新手一次搞定在线运行这个 VR 音乐游戏的完整流程 ‍♀️✨第一步准备环境本地跑通 Moonrider 构建1. 克隆仓库仓库只支持较老的 Node 环境先装好Node ≤ 12.18.3 / npm ≤ 6.14.6package.json的engines字段有硬性约束官方推荐 Node 11git clone https://gitcode.com/gh_mirrors/mo/moonrider cd moonrider npm install2. 本地启动确认游戏能跑npm run start浏览器打开http://localhost:3000能看到启动界面就说明环境 OK开发服务器由webpack.config.js配置入口是src/index.js。3. 执行生产构建npm run build构建完成后会生成build/目录压缩后的build/build.js和zip.js。这一步是后续部署的基础务必在本地先跑通再上线。第二步一条命令把 Moonrider 推到 gh-pages 分支项目内置了部署脚本package.json里定义了npm run deploy它实际做了两件事predeploy 阶段重新执行生产构建然后把部署所需的 5 样东西拷贝到.ghpages临时目录 ——index.html、assets、build、vendor、CNAME推送阶段用ghpages工具把.ghpages内容推送到仓库的gh-pages分支推完自动清理临时目录。⚠️新手必踩的坑package.json中deploy脚本默认写死了原作者的仓库地址。如果你部署的是自己的 fork先打开package.json把deploy脚本里ghpages后面的仓库地址改成你自己的仓库否则会往别人的仓库里推代码或提示无权限。另一个稳妥的替代方案是手动推送把上面 5 个部署文件上传到gh-pages分支然后去仓库的 Pages 设置里选择以gh-pages分支为发布源。第三步HTTPS 验证与自查部署完成后访问https://你的用户名.github.io/moonrider/即可在线游玩。WebXR 功能只在安全上下文HTTPS 或 localhost下可用所以 HTTPS 不是可选项而是必须项用地址栏的 图标确认是https://开头页面内加载的所有外部资源A-Frame 引擎、字体、CDN 脚本也都必须走 https出现一个 http 资源就可能触发混合内容拦截导致 WebXR 按钮失效。HTTPS 避坑清单6 个高频问题#症状原因与解决1页面打开但 VR/全屏按钮灰着不可用用了http://访问。WebXR 需要安全上下文务必用 https 地址2控制台报混合内容错误检查index.html内引用的资源是否全部为 https有一个 http 就会被浏览器拦截3部署后一直 404Pages 源分支没选gh-pages或build、assets、vendor目录漏传了4构建直接报错Node 版本过高12。项目依赖 Webpack 4 和老版 Babel请降级到 Node 12 再npm install5绑定自定义域名后证书报错域名需 DNS 一条 CNAME 记录指向你的用户名.github.io然后在 Pages 设置里填入域名等 GitHub 自动签发证书。注意fork 仓库里自带的CNAME文件写的是原作者域名不绑自己的域名就把它删掉否则 Pages 会按错误域名解析6npm run deploy推送失败ghpages工具走 SSH 协议本机没配 SSH key 会失败。可配好 SSH 后重试或改用手动推送方案总结Moonrider 的部署链路其实很直白低版本 Node 构建 → 5 个产物推到gh-pages→ HTTPS 上线。记住三个关键点Node 别超 12、部署脚本里的仓库地址记得改、CNAME 不绑域名就删掉。搞定之后你就可以把这条星空音轨分享给所有人了 部署后想魔改玩法颜色改src/constants/colors.js速度参数改src/state/index.js资源替换在assets/目录下改完重新npm run deploy即可更新线上版本。【免费下载链接】moonrider Surf the musical road among the stars. Side project built by two people in a few months to demonstrate WebXR.项目地址: https://gitcode.com/gh_mirrors/mo/moonrider创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考