无法使用 docker 容器运行 react 应用程序

IT技术 reactjs docker create-react-app
2021-04-30 17:53:32

我有一个 react-app,它简单地显示 hello-world 消息,但我喜欢通过 docker-container 运行该应用程序,但遇到了这个问题。此消息后,进程停止而不运行应用程序..

ℹ 「wds」: Project is running at http://172.17.0.2/
ℹ 「wds」: webpack output is served from
ℹ 「wds」: Content not from webpack is served from /app/public
ℹ 「wds」: 404s will fallback to /
 Starting the development server...

无法理解我应该做什么,因为我在 Dockerfile 中有一个带有基本代码的非常小的应用程序

FROM node:alpine
RUN mkdir /app
COPY . /app
WORKDIR /app
COPY package.json ./
RUN npm install
CMD ["npm", "start"]

我是否需要安装 webpack-dev-server,我试过了,但出现版本错误,例如“手动添加的服务器”的版本低于已经服务器的版本。所以我重新安装了 webpack-dev-server。

我已经用“create-react-app”创建了应用程序,所以我认为每个依赖项都是自动管理的..有谁知道,我该如何解决问题..提前致谢(顺便说一句..)

我用来构建的命令: docker build . -t lucki

运行镜像命令: docker run -p 3000:3000 lucki

这是项目结构: 在此处输入图片说明

在 Dockerfile 中添加 DEBUG=* 后,我的响应为: 在此处输入图片说明

3个回答

问题是如果不是交互式终端,则开发模式将无法运行。

更改您的 docker 命令以包含交互式终端:

添加-it到您的docker run命令(-i交互式、-t伪 TTY)例如docker run -it -p 3000:3000 your_container

规范故障排除

确保代码在没有 docker 的情况下运行

请问npm start在命令行上工作?

显示调试信息

添加DEBUG=*为容器内的环境变量。DEBUG是一个环境变量,用于控制许多 Node module的日志记录。

在您的Dockerfile, 添加

ENV DEBUG=*

或者在命令行上,添加-e 'DEBUG=*'到您的docker命令中。

这可能有助于发现以某种方式被吞没的错误消息

直接运行节点

不要运行npm start而是直接运行您的文件。例如在你的Dockerfile

CMD ["node", "index.js"]

尝试运行另一个 docker 容器

如果这是您的 docker 设置的问题,运行一个已知良好的容器可能会帮助您发现它。

docker run --rm -it node:alpine

改进

Dockerfile也可以简化一点。

FROM node:alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
CMD ["npm", "start"]
  • mkdir不需要,因为会WORKDIR自动创建目录。
  • package*.json 也会复制 package-lock.json
  • --production 将跳过安装 devDependencies
  • COPY命令放在最后将更好地利用缓存(npm install除非您的依赖项已更改,否则您不必重新运行

您可能还想使用TiniTini 转发信号,这意味着docker stop在交互式终端中按 control+c 实际上会立即停止节点进程。

如果您使用的是 Docker 1.13+,请添加--init到命令行以转发信号和收割进程。在旧版本上,请按照自述文件中的说明进行操作

我遇到了同样的问题,它已通过使用以下命令修复

问题原因:- 由于react项目设置,它需要一个输入触发器来启动服务器,否则它会自动停止

FIX: - -itdocker run命令

例子:- docker run --name main-app -it -p 3000:3000 main-image-react

当我使用 like 时,它​​解决了同样的问题

docker run -it -p 3000:80 <image name>

使用-it以外-p-d解决了问题。