首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >localhost:3000在Docker容器中运行时不显示任何内容

localhost:3000在Docker容器中运行时不显示任何内容
EN

Stack Overflow用户
提问于 2022-08-29 08:28:55
回答 1查看 214关注 0票数 0

我正在尝试修改一个MERN堆栈应用程序,下面是我的客户目录Dockerfile中的代码

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

我构建映像并使用命令运行容器

代码语言:javascript
复制
$ docker build -t douban-client .
$ docker run -p 3000:3000 -d douban-client

我使用“docker”和“docker”命令测试正在运行的容器,输出显示它成功运行。然而,当我打开localhost:3000时,它会显示‘这个页面不工作’。本地主机没有发送任何数据。

有人能告诉我怎么回事吗?真的很感谢你的帮助。

运行码头ps:

代码语言:javascript
复制
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

运行码头日志:

代码语言:javascript
复制
> 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.       

我使用webpack开发服务器,我公开主机和帖子的webpack配置。我的npm启动脚本如下所示

代码语言:javascript
复制
"start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/config/webpack.dev.js"

webpack.dev.js:

代码语言:javascript
复制
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()],
})
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-29 09:04:40

看起来您使用的是webpack开发服务器:

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

默认情况下,dev服务器在127.0.0.1上运行,以便在浏览器上访问localhost:XXXX。但这不会公开Docker容器之外的内容。您需要dev服务器使用0.0.0.0才能从容器外部到达。

根据启动dev服务器的方式,将其修改为将主机设置为0.0.0.0。示例:

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

编辑:

或者,您可以保持npm start脚本不变,但更新webpack.dev.js

const SERVER_HOST = "0.0.0.0"

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73526045

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档