如何让一个 React 项目在 Docker 中运行？答案

【问题标题】：How to get a React Project running in Docker?如何让一个 React 项目在 Docker 中运行？
【发布时间】：2020-01-18 22:44:29
【问题描述】：

我正在尝试使用 Docker 在本地运行我的 react 项目。这是我项目的配置和文件夹结构

  |- public
  | |- index.html
  |- src
  | |- Routes.jsx #can it be because this is not App.js?
  | |- index.js
  |- docker-compose.yml
  |- Dockerfile
  ...

docker-compose.yml

version: "3.7"
services:
  react-dev:
    container_name: sample_container
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3001:3000"
    volumes:
      - ".:/app"
      - "/app/node_modules"
    environment:
      - NODE_ENV=development

Dockerfile

FROM node:alpine
WORKDIR /app
COPY yarn.lock /app/yarn.lock
RUN yarn install --silent
RUN yarn add react-scripts@3.0.1 -g --silent
ENV PATH /app/node_modules/.bin:$PATH
COPY . /app
RUN yarn
CMD ["yarn", "start"]

我成功构建并成功标记了“项目正在 http.....” 但是当我访问链接时，我的项目没有呈现。我确定我的 Dockerfile 中缺少某些内容，因为它无法正常运行...

【问题讨论】：

我认为您需要为容器指定网络，以告诉 docker 容器正在使用与本地计算机的连接。然后你就可以连接到你的容器端口
我需要指定这是 Dockerfile 吗？在我的第一个 docker compose 构建中，docker 确实要求访问我的 Windows 计算机驱动器。这也是你指的吗？
没有。我在想docs.docker.com/network。我不是 docker 专家，但我认为您至少需要一个桥接网络才能将内部 docker 网络连接到您的机器。没有它，容器就会被隔离。
您提到您访问了该链接。但是这个链接是由容器内的应用程序创建的。比如The application is now running on http://localhost:3000，3000就是容器内部的一个端口。然后将它安装在机器上的 3001 端口上。也许是这样？
@VictorTrusov 啊，我现在明白了。我对 Docker 很陌生……所以在 docker-compose.yml - 行端口： - “3001:3000” 正在将容器端口 3000 安装到我的本地主机端口 3001。它现在可以在本地主机：3001 工作。谢谢你:)

标签： reactjs docker docker-compose development-environment

【解决方案1】：

您提到您访问了该链接。但该链接是由容器内部的应用创建的。

例如The application is now running on http://localhost:3000, 3000 - 是容器内的一个端口。然后你把它安装在你机器上的 3001 端口上：

# docker-compose.yml

ports:
  - "3001:3000"

所以正确的链接是http://localhost:3001

【讨论】：