Lauffähig in einem Container

[phico2]

Moin,
ersteinmal vielen Dank für das interessante Tool!
Ich habe versucht das Programm in einem Container laufen zu lassen, bisher aber ohne Erfolg.

Das Dockerfile sieht wie folgt aus:

FROM node:10

# Create app directory
WORKDIR /usr/src/app

#Install app dependencies
COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 8080

CMD ["npm", "run" , "dev"]

Beim aufrufen mit docker run -p 8344:8080 fpb_js:0.0.1 bekomme ich folgende Meldung:

> [email protected] dev /usr/src/app
> webpack-dev-server --content-base=public --open

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/public
ℹ ｢wdm｣: Hash: 376d386be342978ee3c0
Version: webpack 4.41.2
Time: 12249ms
Built at: 12/03/2019 1:57:54 PM
                                  Asset       Size  Chunks                   Chunk Names
                                 app.js   4.08 MiB  bundle  [emitted]        bundle
                             app.js.map   4.32 MiB  bundle  [emitted] [dev]  bundle
                     css/diagram-js.css   11.3 KiB          [emitted]        
                          css/fpbjs.css   18.4 KiB          [emitted]        
         fpb/layer-panel/LayerPanel.css   1.84 KiB          [emitted]        
fpb/properties-panel/PropertiesView.css  324 bytes          [emitted]        
                             index.html   1.27 KiB          [emitted]        
Entrypoint bundle = app.js app.js.map
[1] multi (webpack)-dev-server/client?http://localhost:8080 ./app/app.js 40 bytes {bundle} [built]
[./app/app.js] 1000 bytes {bundle} [built]
[./app/config.json] 124 bytes {bundle} [built]
[./app/configPP.json] 1.24 KiB {bundle} [built]
[./app/fpb/FpbModeler.js] 8.98 KiB {bundle} [built]
[./app/fpb/layer-panel/index.js] 415 bytes {bundle} [built]
[./app/fpb/properties-panel/index.js] 426 bytes {bundle} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {bundle} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {bundle} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {bundle} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {bundle} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {bundle} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {bundle} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {bundle} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {bundle} [built]
    + 404 hidden modules
ℹ ｢wdm｣: Compiled successfully.

Sieht denke ich schon nicht so schlecht aus, leider erreiche ich die Seite aber über den Port 8344 bzw. 8080 nicht. Hat jemand eine Idee?

[HamiedNabizada]

Hi, leider habe ich (noch) keinerlei Erfahrung mit Docker. In den nächsten Tagen werde ich mich da jedoch einarbeiten und nach einer Lösung für das Problem suchen.

[aljoshakoecher]

Auf den (schnellen) ersten Blick sieht das Dockerfile gut aus. Es scheint da allgemein Probleme mit einem WebPack dev-setup in docker zu geben. Siehe hier: webpack/webpack-dev-server#547

Vielleicht hilft der Vorschlag von Merapi aus diesem Issue (webpack/webpack-dev-server#547 (comment))? Ich habe aktuell leider Docker nicht installiert, kannst du das vielleicht mal testen, @phico2? Falls es auch nach Ändern der IP in der package.json nicht klappt, schaue ich mir das nochmal genauer an 😉

[phico2]

Vielen Dank für die Hilfe,

mit dem Tipp von @aljoshakoecher habe ich es hinbekommen. Das Script läuft jetzt lokal in einem Container. Ich musste bloß zwei Zeilen in der package.json anpassen.

Vorher:

{
  "name": "fpbjs",
  "version": "0.1.0",
  "description": "Graphical tool used for formalized process description according to VDI/VDE 3682",
  "main": "app/app.js",
  "scripts": {
    "all": "run-s build",
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --content-base=public --open",
    "start": "run-s dev",
    "starttest": "webpack-dev-server --open --watch"

Nachher:

{
  "name": "fpbjs",
  "version": "0.1.0",
  "description": "Graphical tool used for formalized process description according to VDI/VDE 3682",
  "main": "app/app.js",
  "scripts": {
    "all": "run-s build",
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --content-base=public --open --host 0.0.0.0",
    "start": "run-s dev",
    "starttest": "webpack-dev-server --open --watch --host 0.0.0.0"

[phico2]

Soll ich ein Pullrequest mit den Änderungen erstellen?
Evtl. haben auch auch andere Interesse daran, das Script in eine, Container laufen zu lassen.

[HamiedNabizada]

@phico2 Sehr gerne, ich teste dann ob das irgendwelche ungewünschten Auswirkungen auslöst. Falls nicht pushe ich die Änderung dann in den Master.