Dockerizing一个React App:应用程序在容器内启动,但无法从公开的端口访问

brc7rcf0  于 2023-04-05  发布在  Docker
关注(0)|答案(3)|浏览(116)

这是一个专门针对以下教程的问题:http://mherman.org/blog/2017/12/07/dockerizing-a-react-app/#.Wv3u23WUthF作者Michael赫尔曼
问题:应用程序在容器中启动,但无法从我刚刚公开的-p 3000:3000端口访问。当浏览到localhost:3000时,会出现 * 无法访问此站点 * 错误

停靠-编写.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

停靠文件

# 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

在运行组合或单个容器之后。它显示成功启动,但此后什么都没有。
当我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
qyyhg6bp

qyyhg6bp1#

在排除了所有其他因素之后,我假设你的应用程序正在监听localhost。Localhost的作用域是容器本身。因此,为了能够连接到它,你必须在容器内部。
要解决这个问题,您需要让您的应用程序侦听0.0.0.0。

5ktev3wc

5ktev3wc2#

问题是你的应用程序严格暴露在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服务器将侦听所有传入的连接。
如果您不确定要更改什么,只需在您的问题中发布package.json的基本部分,以便我们可以检查它。

8yoxcaq7

8yoxcaq73#

我在使用create-react-app时也遇到了同样的问题,但我设法解决了这个问题,方法是不暴露Dockerfile中的docker端口,并运行以下命令docker container run -p ANY_PORT_YOU_WANT:**3000** -d image_name。碰巧的是,默认情况下react-server在docker容器中的端口3000上运行,并暴露除3000之外的任何其他端口,start脚本默认使用0.0.0.0。请参见Issue

相关问题