基于Vite+React的前端Docker部署异常问题求助

1. 解决宿主机无法访问容器服务的问题 #

你的Vite配置已经绑定了0.0.0.0（允许容器外部访问），但运行容器时必须添加端口映射参数，否则宿主机无法通过[宿主机IP]:3000访问服务。

运行容器的正确命令：

docker run -p 3000:3000 [你的镜像名/ID]

• -p 3000:3000 表示将宿主机的3000端口映射到容器内部的3000端口，配置后即可通过localhost:3000或[宿主机IP]:3000访问服务。

如果使用Docker Compose，需要在docker-compose.yml中补充端口映射：

services:
  frontend:
    build: .
    ports:
      - "3000:3000"

2. 解决依赖预打包警告问题 #

日志中的Could not auto-determine entry point警告，是因为你在vite.config.ts里错误配置了全局entry字段：

entry: "./build/index.html", // 该配置仅适用于构建后场景，dev模式下无效

./build/index.html是构建产物目录的文件，只有执行vite build后才会生成，而你当前运行的是yarn dev开发模式，Vite在dev模式下默认查找项目根目录的index.html作为入口，你指定的路径在dev模式下不存在，导致Vite无法识别入口文件。

修改vite.config.ts，删除全局的entry字段即可：

import { resolve } from "path";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";

export default defineConfig({
  plugins: [react(), tsconfigPaths(), svgr()],
  server: {
    port: 3000,
    host: true,
    open: "/",
  },
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
      },
    },
    commonjsOptions: {
      include: [".yarn/**"],
    },
  },
  cacheDir: "./.vite",
  define: {
    global: "globalThis",
  },
});

修改后Vite会自动识别根目录的index.html作为dev模式入口，警告将消失。

额外验证点 #

• 确认项目根目录存在index.html文件，且文件中正确引入了React入口文件（如src/main.tsx）。

内容的提问来源于stack exchange，提问作者폰강아지