Контейнер Docker не публикует порт должным образом при запуске с webpack-dev-server

Question

У меня есть простой Dockerfile для создания образа, который будет действовать как среда разработки для моего приложения узла.Проблема в том, что привязка порта между контейнером и моей машиной не работает должным образом.

Dockerfile:

FROM node:10.12.0
EXPOSE 8080

Из этого файла я создаю образ с помощью следующей команды:

docker build -t node:10.12.0.bern ./images/node/

Я запускаю контейнер с помощью следующей команды:

docker run --rm --name=run-client \
    -v $(CURDIR)/client:/app/client:rw \
    -v $(CURDIR)/kawax-js:/app/kawax-js:rw \
    -v $(CURDIR)/enigma:/app/enigma:rw \
    -v $(CURDIR)/client-init/init-client.sh:/usr/local/bin/init-client.sh:rw \
    -p 8080:8080 \
    node:10.12.0.bern \
    /bin/sh -c "sh /usr/local/bin/init-client.sh"

и вот мой скрипт init-client.sh:

#!/usr/bin/env bash

cd /app/enigma/
npm link

cd /app/kawax-js/
npm link

cd /app/client/
npm link enigma
npm link kawax-js

npm run dev

, который в конце запускаетсяМой скрипт dev из файла package.json:

  "scripts": {
    "dev": "npm run dev:server & npm run sass:watch & npm run lint:watch",
    "build": "npm run client:build && npm run sass:build",
    "dev:server": "webpack-dev-server --mode development --hot",
    "dev:watchOnly": "webpack --progress --watch -d",
    "client:build": "webpack --mode production",
    "client:minify": "NODE_ENV=production npm run client:build",
    "client:analyze": "___WEBPACK_ANALYZE__=true webpack",
    "sass:build": "node-sass --source-map true --include-path scss scss/app.scss dist/css/bernstein.css",
    "sass:watch": "npm run sass:build & nodemon -e scss -x 'npm run sass:build'",
    "lint": "eslint src/**",
    "lint:changed": "git status | grep .js\\$ | awk '{print $NF}' | xargs eslint ",
    "lint:watch": "nodemon -e js -x 'npm run lint -- --fix'",
    "test": "jest --verbose",
    "test:watch": "jest --verbose --debug --watchAll",
    "deploy:staging": "./scripts/deploy.staging.sh",
    "deploy:production": "./scripts/deploy.production.sh"
  },

Запуск этого скрипта на моем компьютере или контейнер запустит сервер веб-пакетов на порту 8080. Нет проблем при запуске сервера на моем компьютере или изКонтейнер Docker (журналы из контейнера):

Rendering Complete, saving .css file...
Wrote Source Map to /app/client/dist/css/bernstein.css.map
Wrote CSS to /app/client/dist/css/bernstein.css
[nodemon] clean exit - waiting for changes before restart
clean-webpack-plugin: /app/client/dist/js has been removed.
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /assets
ℹ ｢wds｣: Content not from webpack is served from /app/client/public
ℹ ｢wds｣: 404s will fallback to /index.html

Я вижу, что все связки были выполнены правильно, если я посмотрю на свой подключенный том.Запуск docker ps Я получаю:

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                      NAMES
db2c5d45c9a6        node:10.12.0.bern        "sh /usr/local/bin/i…"   2 minutes ago       Up 2 minutes        0.0.0.0:8080->8080/tcp   run-client

Проблема в том, что когда я захожу на 0.0.0.0:8080 в своем браузере, я ничего не вижу.Я не понимаю, почему привязка порта не работает, хотя сервер запущен и нормально работает в контейнере?

Answer 1

Остерегайтесь webpack-dev-server!По умолчанию он привязан к localhost.

Измените его на:

"dev:server": "webpack-dev-server --mode development --hot --host 0.0.0.0"

Вам необходимо обновить ваш webpack-dev-сервер (в вашей команде package.json и webpack.config.json) конфигурация для привязки хоста к 0.0.0.0 вместо localhost (по умолчанию!).localhost - это просто alias в вашей операционной системе, он недоступен в контейнере.

https://webpack.js.org/configuration/dev-server/#devserver-host

Answer 2

Важное изменение Заменить Project is running at http://localhost:8080/

должно быть запущено на http://0.0.0.0:8080/

в вашем приложении.

Использовать netstate -tulpn.ИЛИ ss -tln на хост-компьютере и найдите порт 8080 и убедитесь, что он связан с 0.0.0.0 или ip-адресом хост-машины.

Кроме того, в браузере доступ к нему осуществляется следующим образом, если егопривязан только к локальному хосту:

http://127.0.0.1:8080

ИЛИ это, если привязан к ip хоста или 0.0.0.0

http://host -ip: 8080

также убедитесь, что вы можете свернуть его на 8080 как внутри контейнера, так и на хосте, используя либо 127.0.0.1, либо localhost и IP-адрес хоста