找不到所需的文件。名称：index.html与docker compose反应

Question

我已经使用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文件在那里，所以我对错误消息更加困惑。

有人对此有解决方案吗？

Answer 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

就是这样。

我希望这有帮助

Answer 2

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

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

然后我就可以从以下位置访问我的反应应用程序localhost:3000