Dockerizing React App：应用程序在容器内启动，但无法从暴露的端口访问

Posted 2023-02-22

【中文标题】Dockerizing React App：应用程序在容器内启动，但无法从暴露的端口访问

【英文标题】：Dockerizing a React App: The app starts inside the container, but it not accessible from the exposed port

【发布时间】：2018-10-28 06:26:03

【问题描述】：

这是一个专门针对教程的问题：http://mherman.org/blog/2017/12/07/dockerizing-a-react-app/#.Wv3u23WUthF by Michael Herman

问题：应用程序在容器内启动，但无法从我刚刚暴露的端口-p 3000:3000 访问它。当浏览到 localhost:3000 时收到 无法访问此站点 错误

docker-compose.yaml

version: '3.5'

services:

  sample-app:
    container_name: sample-app
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/usr/src/app'
      - '/usr/src/app/node_modules'
    ports:
      - '3000:3000'
    environment:
      - NODE_ENV=development

Dockerfile

# base image
FROM node:9.6.1

# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install --silent
# RUN npm install react-scripts@1.1.1 -g --silent # Uncomment to silent logs
RUN npm install react-scripts@1.1.1 -g 

# start app
CMD ["npm", "start"]

#CMD tail -f /usr/src/app/README.md


###################################
# To Run sample app:
# docker run -it -v $PWD:/usr/src/app -v /usr/src/app/node_modules -p 3000:3000 --rm sample-app

Docker 日志：https://docs.google.com/document/d/14LRCgjMLAkmdMiuedxAW2GWUAtxmWeJQCNQB2ezdYXs/edit

在运行 compose 或单个容器之后。它显示成功启动，但此后什么也没有。

当我 docker exec 进入容器时，$ curl localhost:3000 返回正确的 index.html 页面

我使用以下任一方式启动容器：

$ docker run -it -v $PWD:/usr/src/app -v /usr/src/app/node_modules -p 3000:3000 --rm sample-app

sample-app存在）

或

$ docker-compose up

【问题讨论】：

你的应用在监听哪个端口？

3000。正如我上面所说：当我 docker exec 进入容器时，$ curl localhost:3000 返回正确的 HTML 页面 (index.html)。这应该证明应用程序已启动并正在运行，正在收听:3000

尝试将 EXPOSE 3000 添加到您的 Dockerfile 中

已经试过EXPOSE 3000，没区别。

【参考方案1】：

在消除所有其他因素后，我假设您的应用程序正在侦听 localhost。本地主机的范围仅限于容器本身。因此，为了能够连接到它，您必须在容器内。

要解决此问题，您需要让您的应用程序改为监听 0.0.0.0。

【参考方案2】：

问题是您将应用程序严格暴露在 localhost 上。 你必须修改你的package.json 来改变它：

"start": "http-server -a localhost -p 3000"

进入：

"start": "http-server -a 0.0.0.0 -p 3000"

如果您的package.json 的内容与上面的内容有很大不同，重要的部分是-a 选项 - 它必须指向0.0.0.0，因为这意味着http-server 将侦听所有传入的连接。

如果您不确定要更改什么，只需在您的问题中发布package.json 的基本部分，以便我们检查。

【讨论】：

啊，你是，虽然我不想删除我的答案，因为我详细解释了解决方案并希望社区会发现我的答案很有用;)

@LeonardCapacete @trust512 我希望它们都结合在一个答案中，每个答案都有一条信息，而另一个则丢失了。正如 trust512 所说，我的服务器不同，所以我不得不这样做：webpack-dev-server --host 0.0.0.0 --port 3000。请注意，-a 0.0.0.0 -p 3000 不适用于 webpack-dev-server

你总是可以接受一个（更多的积分）并支持另一个（更少的积分但仍然奖励）;)

【参考方案3】：

我在使用create-react-app 时遇到了同样的问题，但我设法通过不暴露Dockerfile 中的docker 端口并运行以下命令docker container run -p ANY_PORT_YOU_WANT:**3000** -d image_name 来解决它。碰巧的是，默认情况下，react-server 在 docker 容器中的 PORT 3000 上运行，并且通过暴露 3000 以外的任何其他端口，该连接流被终止。启动脚本默认使用0.0.0.0。见Issue