Docker容器中替换http-server，配置NGINX为Vue.js提供JPG文件

首先，我们需要解决三个核心问题：Nginx的配置错误、TEXTURES常量的路径修正，以及Docker容器中同时运行Gunicorn和Nginx的启动方式。

1. 修正Nginx配置（default.conf） #

当前的Nginx配置存在端口冲突和路径映射不准确的问题。因为Gunicorn已经占用了80端口，我们让Nginx沿用原来http-server的8000端口，同时精准映射纹理文件的存储路径：

server {
    listen 8000;  # 和原http-server端口保持一致，降低前端代码适配成本
    server_name localhost;
    charset utf-8;

    # 专门处理纹理文件请求，匹配/textures/开头的路径
    location /textures/ {
        root /app/static/;  # 当请求/textures/xxx.jpg时，Nginx会自动去/app/static/textures/xxx.jpg查找文件
        expires 30d;  # 可选：设置缓存策略提升加载性能
        add_header Cache-Control "public, immutable";
        add_header Access-Control-Allow-Origin "*";  # 替代原http-server的--cors参数，解决跨域问题
    }
}

你的nginx.conf已经包含了include /etc/nginx/conf.d/*.conf;，这部分无需修改。

2. 修改Main.vue中的TEXTURES常量 #

原来的路径指向本地8000端口下的src/assets/textures/，现在需要适配Nginx的新路径规则：

// 替换原来的TEXTURES常量
const TEXTURES = '/textures/';  // 用相对路径，无需关心外部IP，只要前端与Nginx服务同源即可
// 如果前端是跨端口访问容器，可改为完整URL：http://<容器IP或域名>:8000/textures/

3. 调整Dockerfile，让容器同时运行Gunicorn和Nginx #

当前你的Production镜像仅启动了Gunicorn，Nginx并未运行，这是最关键的疏漏！我们用一个简单的shell脚本同时启动两个服务：

步骤3.1：创建启动脚本 #

在项目根目录创建start.sh文件，内容如下：

#!/bin/bash
# 后台启动Nginx
nginx -g "daemon off;" &
# 启动Gunicorn（保持原配置）
gunicorn3 --bind 0.0.0.0:80 --workers 2 --timeout 60 wsgi:app

给脚本添加执行权限：chmod +x start.sh

步骤3.2：修改Dockerfile的Production阶段 #

替换原CMD指令，改为执行启动脚本：

# PRODUCTION IMAGE
FROM base AS production
RUN apt-get install gunicorn3 -y
# 复制启动脚本到容器内
COPY ./start.sh /app/start.sh
RUN chmod +x /app/start.sh
EXPOSE 80 8000  # 同时暴露Gunicorn的80端口和Nginx的8000端口
CMD ["/app/start.sh"]

额外验证步骤 #

• 确认容器内纹理文件路径正确：进入容器执行ls /app/static/textures/，确保目标JPG文件存在。
• 测试Nginx服务：启动容器后，在宿主机执行curl http://localhost:8000/textures/your-texture.jpg，能返回文件内容则说明Nginx配置生效。
• 跨域验证：浏览器控制台无跨域报错，Three.js能正常加载纹理。

这样调整后，Three.js就能正常加载Nginx提供的静态纹理文件了。

内容的提问来源于stack exchange，提问作者schlömilch