Docker容器运行MERN应用时localhost:3000无法访问

Docker容器有独立的网络栈，127.0.0.1仅代表容器自身的回环接口，外部主机（你的电脑）无法通过端口映射访问这个地址的服务，因此出现页面无法加载的情况。

修复步骤 #

1. 修改webpack.dev.js配置 #

将配置中的SERVER_HOST从"127.0.0.1"改为"0.0.0.0"，让服务监听容器的所有网络接口：

const webpack = require("webpack")
const { merge } = require("webpack-merge")
const common = require("./webpack.common")

// 修改监听地址
const SERVER_HOST = "0.0.0.0"
const SERVER_PORT = 3000

module.exports = merge(common, {
  mode: "development",
  devtool: "eval-source-map",
  devServer: {
    host: SERVER_HOST,
    port: SERVER_PORT,
    compress: true,
    open: true,
    hot: true,
    historyApiFallback: {
      index: "/",
    },
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
    },
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
})

2. 重新构建镜像并运行容器 #

执行以下命令更新镜像和容器：

docker build -t douban-client .
docker run -p 3000:3000 -d douban-client

可选替代方案（无需修改配置文件） #

如果不想改动配置文件，可直接在npm start脚本中添加--host 0.0.0.0参数，强制覆盖配置中的host设置：

"start": "cross-env NODE_ENV=development webpack-dev-server --host 0.0.0.0 --config ./build/config/webpack.dev.js"

之后同样需要重新构建镜像并运行容器。

验证：修改完成后，容器日志会显示服务监听地址包含0.0.0.0，此时访问localhost:3000即可正常加载页面。

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