NX工作区中React应用Docker容器无法运行，无法访问localhost

我用NX工作区维护两个应用：NestJS后端（ebook-api）和ReactJS前端（ebook-app）。执行以下命令构建ebook-app的Docker镜像并运行容器：

docker build -t ebook-app -f apps/ebook-app/Dockerfile .
docker run -d -p 3000:3000 ebook-app

容器创建成功但无法正常提供服务，访问http://localhost:3000/时无法连接。已排查：

• 容器已创建但无法对外提供访问
• 启动容器时终端和日志无报错信息
• NestJS后端（ebook-api）运行正常，仅React前端存在问题

Docker日志 #

➜  my-app git:(master) ✗ docker logs 1024f80de425            
The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

> nx run ebook-app:serve

> vite serve

The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

  VITE v5.4.11  ready in 1309 ms

  ➜  Local:   http://localhost:3000/

相关配置文件 #

vite.config.ts #

export default defineConfig({
    root: __dirname,
    cacheDir: '../../node_modules/.vite/apps/ebook-app',
    server: {
        port: 3000,
        host: 'localhost',
    },
    preview: {
        port: 3000,
        host: 'localhost',
    },
    plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
    // Uncomment this if you are using workers.
    // worker: {
    //  plugins: [ nxViteTsPaths() ],
    // },
    build: {
        outDir: '../../dist/apps/ebook-app',
        emptyOutDir: true,
        reportCompressedSize: true,
        commonjsOptions: {
            transformMixedEsModules: true,
        },
    },
});

Dockerfile #

FROM docker.io/node:lts-alpine

ENV HOST=0.0.0.0
ENV PORT=3000

WORKDIR /app

RUN addgroup --system ebook-app && \
          adduser --system -G ebook-app ebook-app

COPY . .

RUN chown -R ebook-app:ebook-app .

RUN npm install

CMD ["npx", "nx", "serve", "ebook-app"]

package.json（片段） #

...
 "scripts": {
        "start": "nx serve",
        "build": "nx build",
        "test": "nx test",
        "api": "nx serve ebook-api",
        "app": "nx serve ebook-app",
        "dev": "concurrently \"nx serve ebook-api\" \"nx serve ebook-app\""
    }
...

project.json（ebook-app片段） #

....
 "targets": {
    "docker-build": {
       "dependsOn": ["build"],
       "command": "docker build -f apps/ebook-app/Dockerfile . -t ebook-app"
    }
 }

文件夹结构 #

问题原因及修复方案 #

核心问题 #

Vite配置中server.host硬编码为localhost，导致服务仅绑定容器内部的localhost，外部无法访问。虽然Dockerfile里设置了HOST=0.0.0.0，但Vite配置覆盖了环境变量。

修复步骤 #

1. 修改vite.config.ts
   将server.host和preview.host改为0.0.0.0，或优先读取环境变量：

export default defineConfig({
    root: __dirname,
    cacheDir: '../../node_modules/.vite/apps/ebook-app',
    server: {
        port: 3000,
        host: process.env.HOST || '0.0.0.0',
    },
    preview: {
        port: 3000,
        host: process.env.HOST || '0.0.0.0',
    },
    plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
    build: {
        outDir: '../../dist/apps/ebook-app',
        emptyOutDir: true,
        reportCompressedSize: true,
        commonjsOptions: {
            transformMixedEsModules: true,
        },
    },
});

2. 优化Dockerfile（可选，生产环境推荐）
   当前Dockerfile复制整个项目目录、安装全量依赖，镜像体积过大。建议先构建前端产物，再用Nginx静态镜像部署：

# 构建阶段
FROM node:lts-alpine AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build ebook-app

# 部署阶段
FROM nginx:alpine
COPY --from=builder /app/dist/apps/ebook-app /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

3. 重新构建并运行容器

# 重新构建镜像
docker build -t ebook-app -f apps/ebook-app/Dockerfile .
# 运行容器（原Dockerfile）
docker run -d -p 3000:3000 ebook-app
# 若用优化后的Dockerfile，端口映射改为80
docker run -d -p 3000:80 ebook-app

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