javascript - 使用 webpack-dev-server 启动时,Docker 容器未按预期发布端口

标签 javascript node.js docker npm webpack

我有一个简单的 Dockerfile 来创建一个图像,作为我的 Node 应用程序的开发环境。问题是容器和我的机器之间的端口绑定(bind)没有按预期工作。

docker 文件:

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

最后从 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 启动 webpack 服务器。在我的机器上或从 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 时,我什么也没看到。我不明白,为什么服务器已经启动并在容器中正常运行,但端口绑定(bind)不起作用?

最佳答案

注意 webpack-dev-server!它默认绑定(bind)到 localhost

将其更改为:

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

您需要更新您的 webpack-dev-server(在您的 package.json 命令和 webpack.config.json 中)配置以将主机绑定(bind)到 0.0.0.0本地主机(默认!)。 localhost 只是您操作系统中的一个别名,它在容器中不可用。

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

关于javascript - 使用 webpack-dev-server 启动时,Docker 容器未按预期发布端口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52895177/

相关文章:

node.js - 架构 : Mongoose modelling 中的递归元素

javascript - 如何从表格单元格中获取文本

javascript - 从 toLocaleTimeString 中删除秒数

javascript - 为所有图像添加宽度和高度属性

docker-compose 构建镜像或构建上下文

sbt - sbt-native-packager 的 docker :publishLocal do? 是什么意思

python - Flask 应用程序在 docker 上运行,但不是从主机运行

javascript - Babel 和 TypeScript 之间的主要区别是什么

python - 如何在 Google Cloud Platform 中为 Node 应用程序安装 Python3

mongodb - 通过 Node.js 插入 MongoDB