自定义webpack配置的React应用Docker生产部署后UI无法加载如何解决

核心原因 #

webpack-dev-server 默认仅绑定容器本地的127.0.0.1地址，不会响应来自容器外部的网络请求，这是你宿主机访问localhost:9000返回获取文档失败的根本原因。

解决方法 #

两种方案二选一即可：

方案1：修改webpack配置 #

在webpack.config.js的devServer配置段新增host配置，允许接收所有网卡的请求：

devServer: {
    port: "9000",
    host: "0.0.0.0", // 新增此行
    contentBase: path.join(__dirname, './'),
    publicPath: '/',
},

方案2：直接修改启动脚本（无需改webpack配置） #

修改package.json中的production启动命令，添加--host 0.0.0.0参数：

"production": "webpack-dev-server --mode production --host 0.0.0.0",

其他可选优化（非必须） #

你当前的Dockerfile写了AS build但实际没有用到多阶段构建的逻辑，属于冗余配置，可以直接去掉：

FROM node:14-alpine
WORKDIR /app
COPY package.json ./
COPY yarn.lock ./
RUN yarn install --frozen-lockfile
COPY . /app
RUN yarn build
EXPOSE 9000
CMD ["yarn", "production"]

修改完重新构建镜像启动容器即可正常访问。

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