找不到所需的文件。名称：index.html in react with docker compose答案

【问题标题】：Could not find a required file. Name: index.html in react with docker compose找不到所需的文件。名称：index.html in react with docker compose
【发布时间】：2019-11-17 12:53:34
【问题描述】：

我用 create-react-app 设置了我的 react 应用程序，我试图用 Docker 容器和 Docker compose 运行它。但是，当我使用 Docker compose 运行它时，出现以下错误。

web_1     | Could not find a required file.
web_1     |   Name: index.html
web_1     |   Searched in: /usr/src/app/web_client/public

我正在使用 Windows 10 和 Docker 快速入门终端

这是我的文件夹结构：

vocabulary-app
   |
    web_client
         |
          node_modules/
          public/
          src/
          package.json
          package-lock.json
          Dockerfile
          yarn.lock
    docker-compose.yml

这里是docker-compose.yml的内容

  ### Client SERVER ###
  web:
    build: ./web_client
    environment:
      - REACT_APP_PORT=80
    expose:
      - 80
    ports:
      - "80:80"
    volumes:
      - ./web_client/src:/usr/src/app/web_client/src
      - ./web_client/public:/usr/src/app/web_client/public
    links:
      - server
    command: npm start

这里是Dockerfile

FROM node:9.0.0

RUN mkdir -p /usr/src/app/web_client
WORKDIR /usr/src/app/web_client

COPY . .

RUN rm -Rf node_modules

RUN npm install

CMD npm start

我也尝试在docker中探索文件系统，得到如下结果：

$ docker run -t -i vocabularyapp_web /bin/bash
root@2c099746ebab:/usr/src/app/web_client# ls
Dockerfile  node_modules       package.json  src
README.md   package-lock.json  public        yarn.lock
root@2c099746ebab:/usr/src/app/web_client# cd public/
root@2c099746ebab:/usr/src/app/web_client/public# ls
favicon.ico  index.html  manifest.json

这个基本上意味着index.html文件在那里，所以我对错误信息更加困惑。

有人对此有解决方案吗？

【问题讨论】：

看到这仍然只有一个月大，我希望你能以某种方式找到答案。我目前正在处理同样的问题。

标签： node.js reactjs docker deployment docker-compose

【解决方案1】：

我在 Ubuntu 18.04 服务器上使用 Docker 部署 React 应用程序时遇到了同样的问题。

问题是我错过了将整个先前构建的内容复制到应用程序的工作目录 (/app) 的步骤。

我是这样解决的：

在RUN npm install 之后和RUN npm run build 步骤之前添加以下步骤：

COPY . ./

我的 Dockerfile：

# Set base image
FROM node:latest AS builder

# Set working directory
WORKDIR /app

# Copy package.json and install packages
COPY package.json .
RUN npm install

# Copy other project files and build
COPY . ./
RUN npm run build

# Set nginx image
FROM nginx:latest

# Nginx config
RUN rm -rf /etc/nginx/conf.d/default.conf
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf

# Static build
COPY --from=builder /app/public /usr/share/nginx/html

# Set working directory
WORKDIR /usr/share/nginx/html

# Start Nginx server
CMD ["/bin/bash", "-c", "nginx -g \"daemon off;\""]

我的 docker-compose 文件：

version: "3"

services:
  web:
    image: my_app-frontend
    build:
      context: .
      dockerfile: Dockerfile
    environment:
      REACT_APP_API_URL: ${REACT_APP_API_URL}
    expose:
      - "3000"
    restart: always
    volumes:
      - .:/app

Nginx 用于提供静态文件：

创建一个名为nginx 的目录，然后在该目录下创建一个名为default.conf 的文件。该文件将具有以下配置：

server {
  listen 80;
  add_header Cache-Control no-cache;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    expires -1;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

我的 .env

创建一个.env 文件，您将在其中存储环境变量：

REACT_APP_API_URL=https://my_api

就是这样。

我希望这会有所帮助

【讨论】：

感谢您添加此答案。你的 docker-compose.yml 是什么样的？对于工作目录，如果有前端和后端，WORKDIR会是WORKDIR /app/frontend吗？
嗨@peyo，我已经用我的docker-compose.yml 文件和其他一些相关配置更新了我的答案。如果您有 frontend 和 backend，那么大多数情况下它们通常是单独 dockerized 并通过 API 调用相互通信。你可以给你的WORKDIR 任何你选择的名字。它不必是 *app，它可以是 web、website、application 或您的任何名字。只要确保在需要的地方适当地引用它。

【解决方案2】：

我做了一个明确的 COPY ./public/index.html 并且这个问题消失了但为 index.js 和 index.css 生成了类似的错误。对这些修复它做同样的事情。

【讨论】：

【解决方案3】：

我没有 docker-compose 文件，但我能够使用 docker 命令运行类似的 React 应用程序

docker run -v ${PWD}:/app -v /app/node_modules -p 3001:3000 --rm app-name:dev

然后我就可以从 localhost:3000 访问我的 react 应用了

【讨论】：