把本地 Three.js 项目部署到云服务器全记录

【保姆级教程】拒绝单机自嗨！零基础小白把本地 Three.js 项目部署到云服务器全记录（附防坑指南）

我用 Three.js + model-viewer 做了一个数字展厅，里面塞满了高精度古希腊陶瓶 GLB 模型——最大的一个足足 65MB！

本地开发时其实超级流畅！我直接在 Windows 上跑了一个本地服务器，命令一敲就显示 “Serving!”，本地用 http://localhost:3000，局域网还能用 http://192.168.127.1:3000，模型加载飞快，预览效果完美。

但是很快我就发现两个让人抓狂的痛点：

  1. 必须一直开着自己电脑——服务器一关，网站就下线，电脑还白白占用内存，睡觉都得挂着机。
  2. 只能局域网内访问——朋友在外网根本打不开，敲任何地址都连不上，完全没法分享成果！

我当时就想：要是能把这个站点搬到云服务器上，既不用占自己电脑资源，又能得到一个随时随地都能打开的公网网址该多好！

于是我决定把整个本地项目完整托管到阿里云服务器上，让用户只需敲 yourdomain.com:8510 就能直接打开整个站点，GLB 模型也稳定加载。结果呢？现在一敲域名，页面秒开。那种**“本地文件夹飞上云端、别人随时随地都能看到我成果”**的成就感，真的太爽了！

下面我把从本地文件夹到云服务器域名访问的全过程，一步步讲给你听。纯小白视角，带坑、带命令、带原理、带截图说明，照着做就能复现。

0. 准备：小白专属部署清单

在正式动手前，咱们先把需要的“装备”清点一下（其实非常简单）：

  • 💻 云服务器（必选）： 比如阿里云 ECS 或轻量应用服务器，操作系统选主流的 Ubuntu 或 CentOS 即可。它就像是你为了办展览，在网上“租的一块24小时不断电的场地”。
  • 📁 完整的本地项目代码（必选）： 包含你的 index.html、JS/CSS 文件以及大头 *.glb 模型文件。这就像是你要展出的“展品”。
  • 🌐 公网域名（强烈推荐，可选）： 可以在阿里云或腾讯云买个喜欢的域名（比如我的 yourdomain.com），一年也就几十块钱。虽然没有域名也能直接用 IP 访问，但有一块好记的“专属招牌”，分享给别人时逼格直接拉满！
  • 🔑 终端连接工具（必选）： 比如 Windows 自带的 CMD/PowerShell、Mac 的 Terminal，或者 Xshell、Tabby。这是用来远程连接服务器敲命令的“钥匙”。

准备好这些，咱们就可以直接起飞了！

1. 项目背景与目标

当时我面临的核心问题是：本地静态站点（index.html + app.js + 大量 models/*.glb）无法稳定公网访问，尤其是 GLB 大文件加载慢且容易失败。

最根本的原因其实是我想让别人看到我的网址和成果，所以目标非常明确——把整个本地项目完整托管到阿里云服务器，让用户通过 yourdomain.com:8510 就能直接打开整个站点，同时接入现有导航页面，并大幅提升 GLB 加载稳定性和速度。

这就是典型的本地 Three.js 部署痛点：本地 file:// 协议下浏览器安全限制太多，GLB 大文件又特别吃网络。我决定一步到位，先上云再说。

2. 本地文件是怎么“飞”到云服务器的？（最关键的一步）

这是整个流程最核心的部分——我要把本地电脑里的文件夹完整传到服务器 /opt/html 目录。

我的项目本质就是纯静态资源 + 大量二进制模型，结构超级清晰：

1
2
3
4
5
6
7
8
9
10
11
12
DigitalExhibition/          # 本地项目根目录
├── index.html              # 站点入口
├── js/
│   └── app.js
├── css/
│   └── app.css
├── models/                 # 大头！GLB 文件都在这里
│   ├── xxx.glb
│   └── ...
└── DigitalExhibition/      # 子展厅页面
    ├── index.html
    └── models/default_vase.glb

上传后，服务器上对应就是 /opt/html，路径 1:1 映射。

所有上传方法我都试过，我把常见方法全部列出来给你参考，按推荐顺序：

方式 A：rsync（最推荐，大 GLB 必备）

1
rsync -avzP --delete "/.../你的本地路径/DigitalExhibition/" root@YOUR_PUBLIC_IP:/opt/html/

支持断点续传，65MB 文件中断也不怕。

方式 B：scp（我实际用的！超级简单）

我在阿里云控制台「基本信息」页直接复制公网 IP，然后一条命令搞定：

1
scp -r "/.../你的本地路径/DigitalExhibition/" root@YOUR_PUBLIC_IP:/opt/html

这就是我当时的操作——只需要找到公网 IP 就够了，不用任何额外工具，5 分钟传完所有 GLB。

**💡 避坑提示：**上传后服务器端记得整理一下权限，防止 Nginx 读取不到文件：

1
2
3
chown -R root:root /opt/html
find /opt/html -type d -exec chmod 755 {} \;
find /opt/html -type f -exec chmod 644 {} \;

3. 服务器基础环境与域名端口绑定原理（重点教安全组放行）

文件传上去了，接下来要把域名和端口打通。为什么通过公网 IP 或域名，就能访问云服务器上的网站呢？这个问题小白最容易卡住，我用一个“寄快递 + 商场窗口”的比喻，你一下就懂了。

  • 1）公网 IP 是“互联网上的唯一门牌号”：想象你的云服务器是一栋楼，公网 IP（比如 YOUR_PUBLIC_IP）就是这栋楼在全城唯一的门牌号。只要有这个门牌号，全网的人都能找到这栋楼。而 192.168.x.x 这种局域网 IP，更像“你家里的房间号”——在你家内部有用，出了小区别人根本找不到。
  • 2）域名是“店铺招牌”，DNS 是“通讯录翻译员”：门牌号（IP）太难记了，所以我们用域名（比如 yourdomain.com）当“招牌名”。那浏览器怎么知道这个名字对应哪栋楼？靠 DNS 解析。你可以把 DNS 想成手机通讯录：你输入的是“张三（域名）”，通讯录查到的是“手机号（IP）”。
  • 3）端口 8510 是“具体服务窗口”，Nginx 是“窗口接待员”：找到这栋楼之后，还要知道“去几号窗口办事”。这里的 :8510 就是窗口号。

所以访问 yourdomain.com:8510 的真实含义是：先把域名翻译成公网 IP → 再去这台服务器的 8510 窗口 → 这个窗口的接待员是 Nginx → Nginx 按你配置的路径，把模型文件递给访问者！

DNS 绑定怎么做？超级简单！

在阿里云域名解析页面，点击“添加记录”：

  • 记录类型选 A：意思是把域名直接指向一个 IPv4 地址（也就是我们的服务器门牌号）。
  • 主机记录填 @：意思是不带 www，让大家直接敲主域名 yourdomain.com 就能访问。
  • 记录值填服务器的公网 IP（YOUR_PUBLIC_IP）。

8510 端口如何公网可达（阿里云安全组详细教学）

这是小白最容易卡住的一步。我当时在阿里云控制台「网络与安全组」页面操作：

  1. 点开「网络与安全组」标签 → 找到当前安全组。
  2. 在「入方向」规则里点击「添加入方向规则」。
  3. 配置如下（我当时为了快速测试，直接用了最宽松的设置）：
    • 授权策略：允许
    • 协议类型：所有 TCP
    • 访问来源：任何位置 (0.0.0.0/0)
    • 访问目的：端口范围填 8510/8510

**⚠️ 重点避坑：*我当时为了快速上线全开放了 TCP，但*生产环境强烈建议只放行 8510 端口，否则安全风险太大！

记住三层放通检查：云安全组（必须）、服务器防火墙（ufw allow 8510）、Nginx 监听 8510。任何一层没开，外网就不通。

4. 代码与文件部署过程

我最终切到 Nginx 直出，配置如下（核心就是把 /opt/html 映射成站点根目录）：

1
2
3
4
5
6
7
8
9
server {
     listen 8510;
     root /opt/html;
     location / { try_files $uri $uri/ /index.html; }
     location ~* \.glb$ {
         types { model/gltf-binary glb; }
         add_header Cache-Control "public, max-age=2592000, immutable";
     }
}

重点来了！在云服务器上到底敲什么指令，网站才算“真的跑起来”？

你看，这一步其实超级简单。本地你习惯 npx serve，云服务器上我们换成了 Nginx 托管静态文件，所以核心动作就两步：先检查配置有没有写错，再让 Nginx 重新加载配置。终端敲下面这两行：

1
2
3
4
5
6
7
8
# 1) 先检查 Nginx 配置语法（非常重要）
sudo nginx -t

# 2) 让配置生效（推荐“重载”，不中断服务）
sudo systemctl reload nginx

# 如果你想粗暴一点“重启服务”，排障的时候也可以用：
# sudo systemctl restart nginx
  • sudo nginx -t：就像“交卷前先做一次错别字检查”，它会告诉你配置文件有没有语法错误。
  • sudo systemctl reload nginx：像“让前台接待员换上新流程继续上班”，服务不中断，用户几乎无感。

只要记住：每次改完配置，先 nginx -t，再 reload nginx。

5. 关掉电脑网站会不会挂？（小白终极焦虑）

这个问题我太懂了，几乎每个小白都会怕：“我现在能访问，是不是因为我电脑还开着？我一关黑框框/关机，网站就没了？”

你放心，程序的运行有三个等级，咱们继续用大白话讲清楚：

  1. 前台运行（比如 npx serve 直跑）：就像你自己举着店铺招牌站街。你一走（关掉终端黑框框、断开 SSH），招牌就倒了，网站就挂了。
  2. 后台运行（比如用 nohup 或 pm2）：就像你雇了个保安替你举招牌。你回家睡觉没问题，网站还能在线；但如果“商场停电”（云服务器意外重启），保安下班了就不会自己回来，网站还是会挂。
  3. 开机自启 / 系统服务（守护进程）：这就是**“你和高级物业签了托管合同”**。就算停电又来电（服务器重启），物业也会第一时间自动把招牌重新挂上去！

我们前面费劲配置的 Nginx，就是这第三种**“最高级的物业托管”**级别！它不是靠你一直开着命令行窗口硬撑着，而是交给系统托管，稳定性完全不是一个级别。

为了做到万无一失，你一定要在终端补上这条极其重要的命令：

1
sudo systemctl enable nginx

这条命令的意思是：把 Nginx 设置成开机自启。从此真正做到 24 小时无人值守：哪怕你关电脑、断 SSH，甚至云服务商的机器重启了，你的展厅依然可以随时随地被访问！

6. 测试与验证步骤

  • 本地测试：用 npx serve . 检查没问题。
  • 云端测试：敲 curl -I http://yourdomain.com:8510/models/xxx.glb 检查头部信息，只要 HTTP 状态码和 Cache-Control 都在，就一切 OK。

7. 最终架构与原理设计总结

理顺一下，你的整个心血是怎么传递给外网用户的：

1
2
3
4
5
6
7
8
9
10
11
12
13
[本地电脑]
DigitalExhibition 文件夹
  | (scp 一条命令飞上云端)
  v
[阿里云服务器]
/opt/html
  | (交给系统托管)
  v
[Nginx :8510] + 安全组放行 8510
  | (解析公网门牌号)
  v
[公网用户]
http://yourdomain.com:8510   ← 别人现在就能看到我的成果！

8. 成本、维护与后续扩展

成本主要是云主机 + 带宽，目前很省。后续计划上 HTTPS 加密和 CDN 加速，让全国各地的加载速度起飞。

总结：

从本地文件夹到云服务器域名访问，现在别人敲 yourdomain.com:8510 就能看到我的 Three.js 展厅，GLB 加载又稳又快。整个过程让我彻底理解了本地 Three.js 部署、GLB 大文件托管、Nginx 静态站点的精髓。

给小白的 3 条血泪建议：

  1. 大文件直接用 scp + 阿里云公网 IP，最快！别折腾花里胡哨的工具。
  2. 安全组先开 8510 测试，千万别长期全开所有 TCP。
  3. 先跑通域名访问，再慢慢优化缓存和模型体积。

9. 最终成果展示与总结：一切心血都值了！

当你在浏览器地址栏敲下 yourdomain.com:8510，按下回车的瞬间，看到自己辛辛苦苦在本地调整的 3D 模型完美展现在公网上，那一刻真的成就感爆棚！

放一张我部署成功后的真实截图：

（图注：只要在有网的地方打开浏览器，高清的古希腊陶瓶 3D 模型瞬间加载完毕，还能随意旋转缩放，再也不用局限在本地的 localhost 孤芳自赏了！）

总结： 从本地文件夹到云服务器域名访问，现在别人敲域名就能看到我的 Three.js 展厅，GLB 加载又稳又快。整个过程让我彻底理解了本地部署、云端托管、域名解析以及 Nginx 静态代理的精髓。

觉得有帮助的话，欢迎点赞收藏！你也是用阿里云吗？踩过什么 GLB 或 Nginx 相关的坑？欢迎在评论区一起讨论~