Could not find a required file. Name: index.html in react with docker compose
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 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
I had this same issue when working deploying a React App using Docker on an Ubuntu 18.04 server.
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.
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:
COPY . ./
My Dockerfile:
# Set base imageFROM node:latest AS builder# Set working directoryWORKDIR /app# Copy package.json and install packagesCOPY package.json .RUN npm install# Copy other project files and buildCOPY . ./RUN npm run build# Set nginx imageFROM nginx:latest# Nginx configRUN rm -rf /etc/nginx/conf.d/default.confCOPY ./nginx/default.conf /etc/nginx/conf.d/default.conf# Static buildCOPY --from=builder /app/public /usr/share/nginx/html# Set working directoryWORKDIR /usr/share/nginx/html# Start Nginx serverCMD ["/bin/bash", "-c", "nginx -g \"daemon off;\""]
My docker-compose file:
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:
Create a directory called nginx
and then under the directory create a file called 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
Create a .env
file where you will store your environment variables:
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 awaybut similar error generated for index.js and index.css.Doing same for these fixed it.