如何访问在 docker 容器中运行的反应应用程序？答案

【问题标题】：How to access react app which is ran in docker container?如何访问在 docker 容器中运行的反应应用程序？
【发布时间】：2019-02-05 10:36:14
【问题描述】：

Dockerfile

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

docker-compose.yml

version: "3"
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - /app/node_modules
      - .:/app
    command: ["npm", "start"]

我触发的命令

docker-compose -f docker-compose.yml up --build

之后我去了https://localhost:3000，这个项目没有加载。这是可重复的回购https://github.com/reyanshmishra/My-Portfolio-ReactJS

谢谢

【问题讨论】：

你怎么知道端口是3000？
我在docker-compose.yml中已经提到过
不，我看到您尝试使用此端口，但我们怎么知道，您将 NodeJs 应用程序绑定到此端口？
我没有得到你。
docker-compose up 的输出是什么？

标签： reactjs docker docker-compose dockerfile

【解决方案1】：

你不能通过这样的构建来运行 react 项目。您必须像这样将这一行添加到 Dockerfile 中才能运行您的应用程序，

# Install `serve` to run the application.
RUN npm install -g serve

示例 Dockerfile

FROM node:alpine
WORKDIR '/app'
COPY package.json .

# Copy all local files into the image.
COPY . .

RUN npm install
RUN npm audit fix

# Build for production.
RUN npm run build --production

# Install `serve` to run the application.
RUN npm install -g serve

# Set the command to start the node server.
CMD serve -s build

# Tell Docker about the port we'll run on.
EXPOSE 5000

你可以像这样运行镜像（你的应用默认会运行port 5000。所以你也必须更改docker-compose.yml文件）：

**$ docker run -p 5000:5000 <image name>**

如果需要在不运行容器的情况下访问镜像，

How to access a docker image?
如果你需要访问正在运行的容器

$ docker exec -ti bash

【讨论】：

我想为开发环境设置它，为生产构建和服务它没有问题。

【解决方案2】：

来自webpack-dev-server documentation：

这两种方法都将启动一个服务器实例并开始在端口 8080 上侦听来自 localhost 的连接。

我猜你可以将 docker-compose.yml 修改为：

ports:
      - "3000:8080"

然后您应该能够使用http://localhost:3000 访问您的应用程序。

或

您可以修改您的 webpack 配置以使用端口 3000 而不是默认的 8080：

devServer: {
    contentBase: path.join(__dirname, "src"),
    hot: true,
    inline: true,
    historyApiFallback: true,
    stats: {
      colors: true
    },
    port: 3000
},

【讨论】：

你已经正确重启了docker容器？
尝试了这两个选项都没有运气。
是的，我再次运行了构建命令。重启容器的最佳方式是什么？
我不知道，我唯一确定的是您的应用程序当前正在端口 8080 而不是 3000 上启动。3000:3000 行旨在将您的本地主机的端口 3000 映射到docker 容器的 3000 端口。由于您的应用程序当前是在 8080 上启动的，因此这里至少有一些问题。
出了点问题，这就是原因，我发帖问了，我这两天就头疼了。互联网上几乎所有的东西都试过了。