hawk86104/icegl-three-vue-tres容器化：Docker部署指南

hawk86104/icegl-three-vue-tres容器化：Docker部署指南

【免费下载链接】icegl-three-vue-tres 🎉🎉🎊 一款让你的三维可视化项目快速落地の开源框架 🎊🎉🎉 永久开源免费商用 数字孪生 三维可视化 threejs webgl three three.js tres.js tvt.js 项目地址: https://gitcode.com/hawk86104/icegl-three-vue-tres

🚀 前言：为什么需要容器化部署？

还在为三维可视化项目部署环境配置而头疼吗？每次部署都要重新安装Node.js、配置依赖、处理端口冲突？Docker容器化部署正是解决这些痛点的最佳方案！

通过本文，你将获得：

• ✅ 完整的Docker部署解决方案
• ✅ 生产环境最佳实践配置
• ✅ 多环境部署策略
• ✅ 性能优化技巧
• ✅ 一键部署脚本

📦 项目架构与部署需求分析

技术栈分析

部署环境要求

组件	版本要求	说明
Node.js	≥16.x	运行时环境
Yarn	≥1.22.x	包管理器
内存	≥2GB	构建时需要
端口	3000/8000	开发/预览端口

🐳 Docker化部署方案

1. 基础Dockerfile配置

创建 Dockerfile 文件：

# 使用官方Node.js镜像
FROM node:18-alpine AS builder

# 设置工作目录
WORKDIR /app

# 复制包管理文件
COPY package.json yarn.lock ./

# 安装依赖（使用国内镜像加速）
RUN yarn config set registry https://registry.npmmirror.com/ && \
    yarn install --frozen-lockfile --network-timeout 1000000

# 复制源代码
COPY . .

# 构建生产版本
RUN yarn build

# 生产环境阶段
FROM nginx:alpine AS production

# 复制构建产物到nginx目录
COPY --from=builder /app/dist /usr/share/nginx/html

# 复制nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露端口
EXPOSE 80

# 启动nginx
CMD ["nginx", "-g", "daemon off;"]

2. 多阶段构建配置

针对不同环境的需求，我们提供多阶段Dockerfile：

# 开发环境
FROM node:18-alpine AS development

WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

COPY . .

# 设置环境变量
ENV NODE_ENV=development
ENV HOST=0.0.0.0
ENV PORT=3000

EXPOSE 3000

CMD ["yarn", "dev"]

# 预览环境
FROM node:18-alpine AS preview

WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

COPY . .

ENV NODE_ENV=production
EXPOSE 8000

CMD ["yarn", "pre.dev"]

# 生产环境（如上文基础配置）

3. Docker Compose编排

创建 docker-compose.yml 文件：

version: '3.8'

services:
  # 开发环境
  tvt-dev:
    build:
      context: .
      target: development
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development
    command: yarn dev

  # 预览环境  
  tvt-preview:
    build:
      context: .
      target: preview
    ports:
      - "8000:8000"
    environment:
      - NODE_ENV=production

  # 生产环境
  tvt-production:
    build:
      context: .
      target: production
    ports:
      - "80:80"
    restart: unless-stopped

4. Nginx优化配置

创建 nginx.conf 配置文件：

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    # Gzip压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 单页应用路由支持
    location / {
        try_files $uri $uri/ /index.html;
    }

    # API代理配置（如需）
    location /api/ {
        proxy_pass http://api-server:3001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

🔧 部署脚本与自动化

1. 一键部署脚本

创建 deploy.sh 脚本：

#!/bin/bash

# 部署脚本
set -e

echo "🚀 开始部署 TvT.js 项目..."

# 检查Docker是否安装
if ! command -v docker &> /dev/null; then
    echo "❌ Docker未安装，请先安装Docker"
    exit 1
fi

# 环境选择
ENV=${1:-production}
echo "📦 选择部署环境: $ENV"

case $ENV in
    dev|development)
        docker-compose up --build tvt-dev
        ;;
    preview)
        docker-compose up --build tvt-preview
        ;;
    production|prod)
        docker-compose up --build -d tvt-production
        echo "✅ 生产环境部署完成，访问: http://localhost:80"
        ;;
    *)
        echo "❌ 未知环境: $ENV"
        echo "用法: ./deploy.sh [dev|preview|production]"
        exit 1
        ;;
esac

2. 环境变量配置

创建 .env 文件：

# 应用配置
APP_NAME=TvT.js
APP_VERSION=1.0.0
NODE_ENV=production

# 网络配置
HOST=0.0.0.0
PORT=3000
API_BASE_URL=/api

# 构建配置
NODE_OPTIONS=--max-old-space-size=4096

🚀 部署流程详解

部署流程图

具体部署步骤

1. 环境准备

   # 克隆项目
   git clone https://gitcode.com/hawk86104/icegl-three-vue-tres
   cd icegl-three-vue-tres
   
   # 添加执行权限
   chmod +x deploy.sh
   

2. 开发环境部署

   ./deploy.sh dev
   

3. 预览环境部署

   ./deploy.sh preview
   

4. 生产环境部署

   ./deploy.sh production
   

⚡ 性能优化策略

构建优化配置

在 .fes.js 中添加Docker构建优化：

export default defineBuildConfig({
    viteOption: {
        build: {
            // Docker构建优化
            chunkSizeWarningLimit: 2000,
            rollupOptions: {
                output: {
                    manualChunks: {
                        // 优化chunk分割
                        vendor: ['vue', 'pinia', '@tresjs/core'],
                        three: ['three', '@tresjs/cientos'],
                        ui: ['naive-ui', '@fesjs/fes-design']
                    }
                }
            }
        }
    }
})

镜像大小优化

# 多阶段构建减少镜像大小
FROM node:18-alpine AS builder
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --production --frozen-lockfile

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY --from=builder /app/node_modules /app/node_modules
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

🔍 常见问题排查

问题排查表

问题现象	可能原因	解决方案
构建失败	内存不足	增加Docker内存限制或使用 --max-old-space-size
端口冲突	端口被占用	修改docker-compose中的端口映射
依赖安装慢	网络问题	使用国内镜像源
白屏问题	路由配置	检查nginx的try_files配置

健康检查配置

在docker-compose中添加健康检查：

services:
  tvt-production:
    # ...其他配置
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:80"]
      interval: 30s
      timeout: 10s
      retries: 3
      start_period: 40s

📊 监控与日志

日志配置

# 查看实时日志
docker-compose logs -f tvt-production

# 查看特定服务的日志
docker-compose logs tvt-production

# 查看容器状态
docker-compose ps

资源监控

# 查看容器资源使用情况
docker stats

# 查看容器详细信息
docker inspect <container_id>

🎯 总结

通过本文的Docker容器化部署方案，你可以获得：

1. 环境一致性：消除"在我机器上能运行"的问题
2. 快速部署：一键部署开发、预览、生产环境
3. 资源隔离：每个环境独立运行，互不干扰
4. 易于扩展：支持水平扩展和负载均衡
5. 维护简便：统一的配置管理和版本控制

下一步建议

• 🔧 集成CI/CD流水线自动化部署
• 📦 使用Docker Registry管理镜像版本
• 🚀 结合Kubernetes实现容器编排
• 🔍 添加监控告警系统

立即尝试容器化部署，让你的三维可视化项目部署变得更加简单高效！

---

温馨提示：部署前请确保Docker环境正常，建议使用Docker Desktop或最新版本的Docker Engine。如遇网络问题，可配置国内镜像源加速下载。

【免费下载链接】icegl-three-vue-tres 🎉🎉🎊 一款让你的三维可视化项目快速落地の开源框架 🎊🎉🎉 永久开源免费商用 数字孪生 三维可视化 threejs webgl three three.js tres.js tvt.js 项目地址: https://gitcode.com/hawk86104/icegl-three-vue-tres