Vite+React+Redux项目Docker构建后docker-compose启动无法访问站点

核心问题 #

你的Dockerfile构建逻辑存在错误，同时可能存在Docker Compose缓存导致的配置未生效问题：

1. Dockerfile流程错误：你先在容器内创建全新的Vite React项目，随后用本地文件覆盖容器内的项目文件。这会导致容器内的node_modules是基于Vite初始项目的package.json安装的，而非你本地包含Redux依赖的package.json，虽然单独构建时可能巧合生效，但依赖环境存在潜在冲突。
2. Docker Compose缓存问题：如果之前构建过镜像，Docker Compose会默认使用缓存镜像，导致后续的配置修改未实际应用到运行的容器中。

修正步骤 #

1. 重构Dockerfile #

删除容器内创建Vite项目的步骤，直接基于本地已有项目构建，同时利用Docker缓存优化依赖安装：

FROM node:latest

# 设置工作目录
WORKDIR /app

# 先复制package文件，仅当package.json变化时才重新安装依赖（利用Docker缓存）
COPY package*.json ./
RUN npm install --silent

# 复制所有项目文件到容器
COPY . .

# 暴露端口
EXPOSE 8080

# 启动开发服务
CMD ["npm", "run", "dev"]

2. 强制重新构建并启动容器 #

执行以下命令，清除旧容器、镜像缓存并重新构建：

docker-compose down -v
docker-compose up --build

3. 验证服务状态 #

查看容器日志确认Vite服务是否正常监听：

docker-compose logs react

正常日志应包含类似内容：

VITE v5.0.0  ready in 300 ms

  ➜  Local:   http://localhost:8080
  ➜  Network: http://0.0.0.0:8080

额外注意事项 #

• 确保本地项目根目录存在.dockerignore文件，排除不必要文件避免复制到容器：

  node_modules
  .git
  .gitignore
  dist
  

• 你的vite.config.js配置是正确的（host: true确保服务监听0.0.0.0，允许容器外部访问），无需修改。

内容的提问来源于stack exchange，提问作者Macfa