本文介绍如何使用 Docker 和 Docker Compose，快速部署一个基于 React Three Fiber 构建的交互式 3D 太阳系模拟器。该项目适用于展示、教学或个人网站嵌入。
🧱 项目简介
该可视化项目采用以下技术栈：
- React + Three.js + React Three Fiber：渲染 3D 场景与星体
- Vite：构建前端应用
- Nginx：作为静态资源服务器
- Docker：隔离部署环境，快速上线与回滚
🐳 部署步骤
1. 克隆项目代码
git clone https://github.com/<用户名>/solar_system.git
cd solar_system
2. 创建 Dockerfile
# 构建阶段
FROM node:18-alpine AS builder
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
# 生产部署阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
3. 可选：nginx.conf
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
4. 编写 docker-compose.yml
version: '3.8'
services:
solar-system:
build: .
ports:
- "<自定义主机端口>:80"
container_name: solar-system-viewer
restart: unless-stopped
⚠️ 请将
<自定义主机端口>替换为未被占用的端口（如 3000、8888 等）
5. 构建并启动容器
docker-compose build
docker-compose up -d
6. 浏览器访问
http://localhost:<自定义主机端口>
或
http://<服务器IP>:<自定义主机端口>
📋 常用命令
| 操作 | 命令 |
|---|---|
| 构建镜像 | docker-compose build |
| 启动容器 | docker-compose up -d |
| 停止并清理容器 | docker-compose down |
| 查看日志 | docker-compose logs -f |
| 变更后重建并重启 | docker-compose up --build -d |
✅ 部署优势
- 完整封装，无需安装 Node/npm 环境
- 一键启动，适合本地测试与远程部署
- 自带前端路由兼容（避免刷新 404）
- 支持镜像迁移、快速备份与恢复
📦 使用场景
- 科普演示或教学网站嵌入
- 交互式作品集或展示页面
- 个人项目部署的练手案例