企业官网建设流程全解析

1. 项目概述与核心价值

最近在做一个AR项目，用Unity的WebGL平台打包，结果卡在了最后一步：怎么让测试人员，特别是那些没有开发环境、不懂技术的小伙伴，能直接用手机打开体验，并且我还能方便地把链接甩给他们？这问题听起来简单，但Unity WebGL打包出来的东西，本质上是一堆HTML、JS和资源文件，它依赖浏览器环境，尤其是对WebGL和WebXR API的支持。直接扔个文件夹给别人是行不通的。经过一番折腾，我总结出了一套从打包到部署，再到生成可分享链接的完整流程。这套方法的核心价值在于，它极大地简化了AR项目的测试分发流程，让非技术背景的同事、客户或早期用户能够像打开一个普通网页一样，在手机上直接体验你的AR效果，无需安装任何App，也无需复杂的配置。这对于快速收集反馈、进行可用性测试或者向投资人展示原型，效率提升不是一点半点。

2. 核心思路与方案选型

2.1 为什么是WebGL + 静态托管？

Unity发布到WebGL平台，生成的是一个可以在现代浏览器中运行的应用。它的优势是跨平台（iOS/Android/PC的浏览器都能跑），且无需用户安装。但它的“部署”和我们传统理解的服务器部署不同，它更像是在托管一个静态网站。因此，我们的核心思路就是：将Unity WebGL构建输出（Build文件夹）的内容，上传到一个支持HTTPS的静态网站托管服务上。

为什么强调HTTPS？因为很多现代浏览器特性，包括访问摄像头（AR必备）、麦克风、陀螺仪等设备API，都要求页面运行在安全上下文（Secure Context）中，简单说就是必须使用HTTPS协议。本地file://协议打开是无法调用这些API的，这也是为什么你直接双击生成的index.html文件，AR功能很可能失效的原因。

方案选型上，我们有几种主流选择：

1. 云服务商的对象存储+CDN：如阿里云OSS、腾讯云COS、AWS S3等。搭配其自带的或绑定的自定义域名（并配置SSL证书），功能强大，适合生产环境。
2. 专门的静态网站托管服务：如Vercel、Netlify、GitHub Pages。它们对前端项目友好，通常自动提供HTTPS，并且与Git集成，可以实现自动化部署。
3. 自有服务器：在自有或租用的服务器上配置Nginx/Apache来托管静态文件。可控性最高，但需要自己维护服务器和SSL证书。

对于测试阶段，追求的是快速、免费、简单。因此，Vercel、Netlify或GitHub Pages是绝佳选择。它们提供免费的HTTPS域名、全球CDN，并且部署过程往往只需拖拽文件夹或连接Git仓库。本文将以Vercel为例进行演示，因为它对前端项目的支持非常友好，部署速度极快，并且其生成的域名在国内的访问速度也相对不错。

2.2 Unity WebGL打包的关键前置配置

在打包之前，必须在Unity编辑器内进行正确配置，否则即使部署成功，AR功能也可能无法工作。这里有几个坑我踩过，必须注意。

Player Settings关键配置：

• 分辨率与展示（Resolution and Presentation）：
  • WebGL模板：建议使用Minimal模板。它生成的页面最干净，没有多余的UI，方便我们后续自定义。Default模板会带一个Unity的Logo和进度条，有时会干扰AR的全屏体验。
  • 默认画布宽度/高度：可以设置为960 x 600或类似比例。这个设置主要影响网页中Canvas元素的初始尺寸，在移动端会被CSS覆盖，所以不必纠结。
• 发布设置（Publishing Settings）：
  • 压缩格式（Compression Format）：强烈推荐使用Brotli。相比Gzip，Brotli压缩率更高，能显著减少加载时的网络传输量。虽然需要现代浏览器支持，但如今移动端浏览器基本都已支持。这能直接解决“Unity WebGL初始化很久”的问题。
  • 数据缓存（Data Caching）：务必勾选。这会让浏览器缓存资源文件，用户第二次访问时加载速度飞快。
  • 代码优化（Code Optimization）：选择Size。测试包优先考虑体积。
• XR插件管理（XR Plugin Management）：
  • 确保你使用的AR SDK（如AR Foundation，以及其背后的ARKit XR Plugin、ARCore XR Plugin）已安装，并且在WebGL平台下已启用。WebGL平台通常使用WebXR插件来实现AR。你需要通过Package Manager安装WebXR Export插件或相关提供WebXR支持的包。

注意：Unity对WebXR的官方支持仍在演进中。如果你使用的是较新的Unity版本（如2022 LTS或更新），可能需要通过Preview Packages来安装WebXR Export插件。务必查阅你当前Unity版本对应的AR和WebGL文档。

项目设置（Project Settings）关键检查：

• 图形（Graphics）：确保你的URP/HDRP管线配置兼容WebGL。WebGL对Shader特性支持有限，复杂的体积光（如URP Volume Light）等效果可能需要简化或移除。
• Quality：为WebGL平台单独设置一个较低的图形质量等级，关闭抗锯齿或使用低级别AA，以提升性能。

3. 一键部署流程实操（以Vercel为例）

3.1 本地构建与产出物确认

首先，在Unity中完成上述配置后，进行WebGL构建。假设你的项目名为MyWebGLAR，构建输出路径为Build文件夹。构建完成后，你会得到类似以下结构的文件：

Build/ ├── TemplateData/ (包含Unity logo、样式和加载脚本) ├── Build/ (包含实际的.wasm、.data、.framework.js等核心文件) └── index.html (入口文件)

这个Build文件夹，就是我们接下来要部署的全部内容。

3.2 注册Vercel并安装CLI工具

Vercel提供了网页拖拽上传和CLI命令行两种部署方式。对于追求“一键”的我们，CLI工具更高效。

1. 访问 vercel.com 并注册账号（支持GitHub等第三方登录）。
2. 在本地电脑上安装Vercel CLI。打开终端（命令提示符或PowerShell），运行：

   npm i -g vercel

   如果你没有Node.js环境，需要先去 nodejs.org 下载安装。

3.3 通过CLI一键部署

这是最关键的一步，实现所谓的“一键”。

1. 打开终端，使用cd命令导航到你的Build文件夹的上一级目录。例如，如果Build文件夹在D:\MyProject\Build，你就进入D:\MyProject。

   cd D:\MyProject

2. 在终端中执行登录命令，并按提示操作：

   vercel login

3. 执行部署命令。这里有个小技巧，为了让Vercel正确地将我们的静态文件服务于根路径，我们需要一个简单的配置文件。在MyProject文件夹下（与Build同级），创建一个名为vercel.json的文件，内容如下：

   { "rewrites": [{ "source": "/(.*)", "destination": "/Build" }] }

   这个配置告诉Vercel，将所有访问请求都重定向到/Build目录下。这样，用户访问你的域名根路径时，实际上看到的是Build/index.html的内容。
4. 现在，运行部署命令：

   vercel --prod

   --prod参数表示直接部署到生产环境（会得到一个固定的URL）。如果不加，则会先部署到一个预览环境。
5. CLI会交互式地询问你几个问题：
   • Set up and deploy “D:\MyProject”?输入Y。
   • Which scope do you want to deploy to?选择你的账户。
   • Link to existing project?输入N（我们创建新项目）。
   • What’s your project’s name?输入一个项目名，如my-webgl-ar。
   • In which directory is your code located?这里非常关键！输入Build。这告诉Vercel我们的代码在Build子目录下。 之后，Vercel会自动开始上传和部署过程。完成后，终端会输出一行类似Production: https://my-webgl-ar.vercel.app的链接。这个链接就是你的可分享测试链接！

3.4 验证与分享

用你的手机浏览器（推荐使用Chrome或Safari）打开这个https://...vercel.app的链接。首次加载可能会花费一些时间，因为浏览器需要下载和编译WebAssembly模块。加载完成后，页面应该会请求摄像头权限，授予后，你的AR场景就应该在手机摄像头拍摄的现实画面中渲染出来了。

你可以将这个链接直接复制到微信、钉钉或任何聊天工具中分享给测试人员。他们点开即可体验。

4. 部署进阶与优化技巧

4.1 自动化部署与Git集成

上述CLI命令已经很快，但我们可以更“懒”。将项目与Git仓库（如GitHub）关联，并推送代码，可以实现自动部署。

1. 在MyProject根目录初始化Git仓库（确保.gitignore文件排除了Library、Temp等Unity工程文件夹）。
2. 将Build文件夹也纳入版本管理（或者更好的做法是，将构建脚本化，让CI/CD在构建后自动将Build内容推送到一个专门的分支，如gh-pages或webgl-build）。
3. 在Vercel网页控制台，导入你的Git仓库。Vercel会自动检测项目并应用我们之前创建的vercel.json配置。
4. 以后，你只需要在本地构建WebGL，然后将Build文件夹的变更推送到Git仓库的特定分支，Vercel就会自动触发部署，更新在线链接。这才是真正的“一键”。

4.2 解决常见加载与性能问题

用户反馈“打开慢”或“初始化很久”是WebGL项目的通病。除了前面提到的使用Brotli压缩，还有以下优化手段：

1. 资源分包与按需加载：Unity的Addressables资源管理系统是解决此问题的利器。不要将所有资源都打包进主包。

• 将初始AR场景必需的资源（如识别图、基础模型）放在本地加载组（Local）。
• 将大的模型、高清纹理、后续场景资源放在远程组（Remote），上传到你自己的CDN或对象存储。
• 在代码中，使用Addressables.LoadAssetAsync来异步加载远程资源。这样，用户可以先快速进入AR核心体验，其他资源在后台流式加载。

2. 优化构建尺寸：

• 纹理压缩：针对WebGL平台，使用ASTC、ETC2或PVRTC压缩格式（取决于目标设备），并合理设置Max Size。
• 模型优化：减少面数，使用合理的LOD。
• 音频压缩：使用Vorbis或MP3格式，降低比特率。
• 剥离引擎代码：在Player Settings的Publishing Settings中，启用Strip Engine Code。

3. 设计友好的加载界面：不要使用Unity默认的蓝色背景和进度条。自定义index.html和TemplateData下的style.css、progressBar.js，设计一个与你项目风格一致的加载页，明确告知用户加载进度和当前状态（如“下载资源中...”、“初始化AR环境...”），能极大提升等待体验。

4.3 自定义域名与访问统计

如果测试范围扩大，或者用于演示，你可能不希望域名是xxx.vercel.app。

1. 在Vercel项目的Settings->Domains中，可以添加你自己的自定义域名（如ar-test.yourcompany.com）。
2. 按照指引，去你的域名DNS服务商那里添加一条CNAME记录，指向Vercel提供的地址。
3. Vercel会自动为你申请并配置SSL证书（通常需要几分钟生效）。

此外，你可以在index.html中集成Google Analytics或百度统计的代码，来收集匿名访问数据，了解用户从哪里进入、加载耗时、交互情况等，为优化提供数据支持。

5. 疑难杂症排查实录

在实际操作中，你几乎一定会遇到下面这些问题。这里是我的排查笔记。

5.1 WebGL上下文创建失败

问题现象：浏览器控制台报错：WebGL: A WebGL context could not be created. Reason: Web page...或者页面一片黑，无法启动。

• 原因1：浏览器不支持或WebGL被禁用。
  • 排查：访问 webglreport.com 检查浏览器WebGL支持状态。在手机浏览器设置中，确保没有禁用硬件加速或WebGL。
  • 解决：引导用户使用Chrome（Android）或Safari（iOS）的最新版本。这是支持最好的浏览器。
• 原因2：GPU驱动问题或设备性能过低。
  • 排查：在一些老旧或低端安卓机上可能出现。
  • 解决：在Unity Player Settings的Publishing Settings中，尝试勾选Exception support为None，以换取更好的兼容性。但更现实的做法是设定最低设备要求。
• 原因3：Unity WebGL构建的模拟器/虚拟机环境。
  • 解决：某些手机厂商的“手机助手”或模拟器环境可能不支持。务必在真机上测试。

5.2 AR功能无法启动（摄像头不打开）

问题现象：页面能加载，Unity Logo也显示了，但摄像头没有启动，或者提示需要HTTPS。

• 原因1：非HTTPS环境。
  • 排查：你的访问链接是否是https://开头？本地用file://或http://打开一定会失败。
  • 解决：确保使用Vercel等提供的HTTPS链接。本地测试可以用localhost（它被视为安全源），但分享必须用HTTPS。
• 原因2：浏览器权限被拒绝或未正确请求。
  • 排查：检查浏览器地址栏是否有摄像头图标，并确认权限已授予。Unity WebGL的WebXR API请求权限的时机可能较晚。
  • 解决：在Unity脚本中，确保在合适的时机（如一个“启动AR”按钮点击后）调用启动AR会话的代码，这通常会触发浏览器的权限弹窗。避免在Start()函数中自动启动，因为那时用户可能还没与页面交互。
• 原因3：WebXR API不被支持。
  • 排查：在浏览器控制台输入navigator.xr，如果返回undefined，则不支持。
  • 解决：iOS上的Safari从16.4版本开始支持WebXR AR Core。Android Chrome支持较好。务必告知测试者使用足够新的浏览器版本。

5.3 资源加载失败（材质变紫、Mesh丢失）

问题现象：模型显示为洋红色（Missing Material），或者根本看不到模型。

• 原因1：Addressables资源包未正确加载或路径错误。
  • 排查：检查浏览器开发者工具的Network选项卡，查看是否有.bundle文件加载失败（返回404或网络错误）。
  • 解决：
    1. 确认Addressables构建时，远程资源的Catalog和Bundle已上传到正确的CDN地址。
    2. 在Addressables Groups窗口，检查远程资源的Build Path和Load Path设置是否正确指向了你的线上地址（如https://your-cdn.com/remote-assets/{hash}.bundle）。
    3. 在发布WebGL前，运行Addressables -> Build -> New Build -> Update a Previous Build来更新资源目录，确保本地Catalog文件记录了最新的远程资源哈希。
• 原因2：Shader兼容性问题。
  • 排查：WebGL支持的Shader语言是GLSL ES，一些复杂的Surface Shader或只在某些渲染管线（如HDRP）中可用的Shader可能在WebGL中失效。
  • 解决：为WebGL平台使用最简单、标准的Shader。检查变紫的材质，将其Shader替换为Standard或Universal Render Pipeline/Lit等通用Shader。对于URP项目，确保所有材质都使用URP系列的Shader。

5.4 性能卡顿与发热严重

问题现象：在手机上运行AR场景帧率很低，手机很快发热。

• 原因1：每帧渲染负载过高。
  • 解决：
    1. 降低渲染分辨率：在Unity的AR Camera或渲染脚本中，可以尝试动态降低渲染缩放比例（如Screen.SetResolution），在移动端这是非常有效的性能提升手段。
    2. 控制绘制调用：合并静态物体，使用GPU Instancing。
    3. 简化后期处理：关闭或降低屏幕空间反射、环境光遮蔽等效果。
• 原因2：JavaScript与WebAssembly通信开销。
  • 解决：尽量减少每帧在C#脚本与浏览器环境之间的数据传递。例如，避免在Update()中频繁调用Console.Log（它会跨越边界），将一些计算密集型的逻辑放在Job System中处理。

5.5 在特定平台（如微信内置浏览器）中运行异常

问题现象：在Chrome中正常，但在微信或QQ内置浏览器中白屏或功能异常。

• 原因：国内一些主流App的内置浏览器（X5内核等）对WebGL和WebXR的支持不完整或存在兼容性问题。
• 解决：这是一个老大难问题。没有完美的解决方案。
  1. 引导用户“在浏览器中打开”：在页面加载时，检测是否为微信等特定环境，弹出提示框，引导用户点击右上角菜单，选择“在默认浏览器中打开”。
  2. 准备降级方案：如果检测到不兼容的浏览器，可以显示一个静态说明页或视频演示，而不是强行运行可能崩溃的WebGL应用。
  3. 持续关注：X5内核也在更新，关注其官方公告，了解对WebGL/WebXR的支持进展。

部署Unity WebGL AR项目到手机并分享，技术链条较长，涉及Unity配置、构建优化、静态部署和浏览器兼容性。核心在于理解WebGL应用的本质是静态网页，并为其提供一个安全、高速的HTTPS托管环境。Vercel这类工具极大地简化了部署流程，而真正的挑战和功夫，往往花在事前的Unity项目优化和事后的兼容性排查上。我的经验是，建立一个标准的构建-部署清单，每次发布前逐项核对，能避免很多低级错误。最后，永远要在目标用户最可能使用的真机浏览器上进行测试，模拟器永远无法替代真机环境。