[英]Could not find a required file. Name: index.html in react with docker compose
I have my react app set up with create-react-app and I was trying to run it with Docker container and Docker compose.我用 create-react-app 设置了我的反应应用程序,我试图用 Docker 容器和 Docker compose 运行它。 However, I got the following error when I ran it with 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
I am using Windows 10 and Docker quickstart terminal我正在使用 Windows 10 和 Docker 快速入门终端
Here is my folder structure:这是我的文件夹结构:
vocabulary-app
|
web_client
|
node_modules/
public/
src/
package.json
package-lock.json
Dockerfile
yarn.lock
docker-compose.yml
Here is the content of 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
Here is the Dockerfile
这是
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
I also tried to explore the file system in docker and got the following result:我还尝试在 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
This one basically means that the index.html
file is there, so I got more confused about the error message.这个基本上意味着
index.html
文件在那里,所以我对错误消息更加困惑。
Does someone have solution to this?有人有解决方案吗?
I don't have a docker-compose file, but I was able to get a similar react app to run with the docker command我没有 docker-compose 文件,但我能够获得一个类似的 react 应用程序来运行 docker 命令
docker run -v ${PWD}:/app -v /app/node_modules -p 3001:3000 --rm app-name:dev
I was then able to access my react app from localhost:3000
然后我就可以从
localhost:3000
访问我的反应应用程序
I had this same issue when working deploying a React App using Docker on an Ubuntu 18.04 server.在 Ubuntu 18.04 服务器上使用 Docker 部署 React 应用程序时,我遇到了同样的问题。
The issue was that I missed the step of copying the contents of the entire previous build to the working directory ( /app
) of the application.问题是我错过了将整个先前构建的内容复制到
/app
的工作目录 ( /app
) 的步骤。
Here's how I solved it :这是我解决它的方法:
Add this below as a step after the RUN npm install
and before the RUN npm run build
steps:在
RUN npm install
和RUN npm run build
步骤之前添加以下步骤:
COPY . ./
My Dockerfile :我的 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;\""]
My docker-compose file :我的 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 for serving static files :用于提供静态文件的 Nginx :
Create a directory called nginx
and then under the directory create a file called default.conf
.创建一个名为
nginx
的目录,然后在该目录下创建一个名为default.conf
的文件。 The file will have the following configuration:该文件将具有以下配置:
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;
}
}
My .env我的 .env
Create a .env
file where you will store your environment variables:创建一个
.env
文件,您将在其中存储环境变量:
REACT_APP_API_URL=https://my_api
That's it.就是这样。
I hope this helps我希望这有帮助
I did an explict COPY ./public/index.html and this problem went away but similar error generated for index.js and index.css.我做了一个明确的 COPY ./public/index.html,这个问题消失了,但为 index.js 和 index.css 生成了类似的错误。 Doing same for these fixed it.
对这些做同样的事情修复了它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.