localhost:3000 doesn't display anything when run in Docker container

Question

I’m trying to dockerize a MERN stack app, here’s the code in my client directory Dockerfile

FROM node:16
WORKDIR /usr/src/douban
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
ENV NODE_ENV=development
CMD ["npm","start"]

I build the image and run the container using the command

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

I use ‘docker ps’ and ‘docker logs’ command to test the running container, the output shows it runs successfully. However, when I open localhost:3000, it shows ‘This page isn’t working. localhost didn’t send any data.’

Can anyone tell me what’s wrong? really appreciate your help.

run docker ps:

CONTAINER ID   IMAGE           COMMAND                  CREATED              STATUS              PORTS                    NAMES
8cde2b46c18a   douban-client   "docker-entrypoint.s…"   About a minute ago   Up About a minute   0.0.0.0:3000->3000/tcp   heuristic_wescoff
                        

run docker logs:

> my-app@0.1.0 start
> cross-env NODE_ENV=development webpack-dev-server --config ./build/config/webpack.dev.js

ℹ Compiling STARTING
✔ STARTING: Compiled successfully in 9.08s
assets by path public/ 42.3 KiB
  assets by path public/*.png 19.3 KiB
    asset public/follower.png 8.86 KiB [emitted] [from: public/follower.png] [copied]
    asset public/systemprompt.png 6.16 KiB [emitted] [from: public/systemprompt.png] [copied]
    asset public/message.png 4.32 KiB [emitted] [from: public/message.png] [copied]
  asset public/defaultAvatar.webp 17 KiB [emitted] [from: public/defaultAvatar.webp] [copied]
  asset public/favicon.ico 3.5 KiB [emitted] [from: public/favicon.ico] [copied]
  asset public/index.html 2.1 KiB [emitted] [from: public/index.html] [copied]
  asset public/manifest.json 322 bytes [emitted] [from: public/manifest.json] [copied]
<w> [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://127.0.0.1:3000/
<i> [webpack-dev-server] Content not from webpack is served from '/usr/src/douban/public' directory
<i> [webpack-dev-server] 404s will fallback to '/'
  asset public/robots.txt 67 bytes [emitted] [from: public/robots.txt] [copied]
assets by path js/*.js 11.1 MiB
  asset js/app.js 11.1 MiB [emitted] (name: app)
  asset js/node_modules_web-vitals_dist_web-vitals_js.js 13.1 KiB [emitted]
asset index.html 2.14 KiB [emitted]
orphan modules 905 KiB [orphan] 553 modules
runtime modules 30.1 KiB 18 modules
modules by path ./node_modules/ 3.32 MiB 751 modules
modules by path ./src/ 247 KiB
  modules by path ./src/views/ 118 KiB 26 modules
  modules by path ./src/components/ 47.9 KiB 20 modules
  modules by path ./src/app/ 14.4 KiB 8 modules
  modules by path ./src/api/*.ts 43.3 KiB 8 modules
  modules by path ./src/lib/ 8.37 KiB 7 modules
  modules by path ./src/styles/ 4.21 KiB 4 modules
  modules by path ./src/routes/*.tsx 7.03 KiB 3 modules
  modules by path ./src/*.tsx 1.42 KiB 2 modules
  ./src/reportWebVitals.ts 517 bytes [built] [code generated]
  ./src/providers/index.tsx 1.49 KiB [built] [code generated]
webpack 5.74.0 compiled successfully in 9067 ms
Type-checking in progress...
ℹ Compiling STARTING
✔ STARTING: Compiled successfully in 659.51ms
assets by status 55.5 KiB [cached] 9 assets
assets by status 11.1 MiB [emitted]
  assets by chunk 11.1 MiB (name: app)
    asset js/app.js 11.1 MiB [emitted] (name: app)
    asset app.6e417c1d373746eb7ad3.hot-update.js 847 bytes [emitted] [immutable] [hmr] (name: app)
  asset index.html 2.14 KiB [emitted]
  asset app.6e417c1d373746eb7ad3.hot-update.json 27 bytes [emitted] [immutable] [hmr]
Entrypoint app 11.1 MiB = js/app.js 11.1 MiB app.6e417c1d373746eb7ad3.hot-update.js 847 bytes
cached modules 4.44 MiB [cached] 1384 modules
runtime modules 30.1 KiB 18 modules
webpack 5.74.0 compiled successfully in 661 ms
Type-checking in progress...
No errors found.
No errors found.       

I use webpack-dev-server, and I expose the host and post in the webpack config. My npm start script looks like this

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

webpack.dev.js:

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

const SERVER_HOST = "127.0.0.1"
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()],
})

Answer 1

It looks like you're using webpack-dev-server:

<i> [webpack-dev-server] Loopback: http://127.0.0.1:3000/

By default, the dev server runs on 127.0.0.1 to enable accessing localhost:XXXX on browsers. But this does not expose the content outside of a Docker container. You need the dev server to use 0.0.0.0 in order to be reachable from outside the container.

Depending on how you start your dev server, modify it to set the host to 0.0.0.0. Example:

"start": "webpack-dev-server --host 0.0.0.0 --port 3000"

---

Edit:

Or you can keep your npm start script the same but update your webpack.dev.js:

const SERVER_HOST = "0.0.0.0"

Source: https://dev.to/ku6ryo/run-webpackdevserver-in-docker-1mg5