CSS not loading with docker, nginx and react app

I am trying to deploy a react app in docker container on an nginx server.

The application deploys... but I do not get ANY css styling.

Docker file:

# Step 1: Use the official Node.js image for building the app
FROM node:18 AS build

# Set the working directory in the container
WORKDIR /usr/src/app

# Copy package.json and package-lock.json (if available)
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the app for production
RUN npm run build

# Step 2: Serve the built app using Nginx
FROM nginx:alpine

# Copy the built React app from the build stage to the Nginx HTML directory
COPY --from=build /usr/src/app/build /usr/share/nginx/html

# Copy the custom Nginx configuration
COPY nginx.conf /etc/nginx/nginx.conf

# Expose the port that Nginx serves on (default 80)
EXPOSE 80

# Use Nginx to serve the app
CMD ["nginx", "-g", "daemon off;"]

nginx.conf file

worker_processes auto;  # Automatically set the number of worker processes based on available CPU cores

events {
    worker_connections 1024;  # Maximum number of simultaneous connections -- PER -- worker process
}

http {

    include /usr/share/nginx/mime.types;
    sendfile on;

    server {
        listen 80;      # IPv4
        listen [::]:80; # IPv6

        server_name _;

        root /usr/share/nginx/html;
        index index.html

        location / {
            try_files $uri /index.html =404;
        }       

        # Optionally, you can add headers or other settings if needed
    }
}

From Nginx server:

What I see in sources from the chrome debugging tools

Is it "normal" for index.html to be missing ???

However, custom.css seems to be pointing at the main CSS file??

Local Build

when I run npm run build I see this in VS code

AND the application has CSS styling.

notice there is an index.html file here and it points to the main CSS file.

Reference Articles

I have read (and tried) these

Stack overflow

from the web

Medium

===================

TAKE 2

===================

I decided to create a basic react app (using create-react-app ) and then deploy it

this is what the app is SUPPOSED to look like:

Docker File

FROM node:18 AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Step 2: Serve the built app using Nginx
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

worker_processes auto;

events {
    worker_connections 1024;
}

http {

    server {
        listen 80;
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html =404;
        }     

        # Optionally, you can add headers or other settings if needed
    }
}

Nginx deployed app

Here is the error I see:

209.200.223.141 - - [14/Jan/2025:23:13:00 +0000] "GET /static/css/main.f855e6bc.css HTTP/1.1" 304 0 "http://44.243.119.4/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"

This is what I am getting now... again NO CSS

There is an (index) which contains an href to the CSS file

This solves the problem

worker_processes auto;  # Automatically set the number of worker processes based on available CPU cores

events {
    worker_connections 1024;  # Maximum number of simultaneous connections per worker process
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    # Gzip compression for better performance
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml+rss text/javascript;
    gzip_min_length 256;

    server {
        listen 80;
        root /usr/share/nginx/html;

        # Location for serving HTML files (short cache duration)
        location / {
            
            try_files $uri /index.html =404;

            # Ensure index.html is not cached aggressively
            add_header Cache-Control "no-cache, no-store, must-revalidate";
            add_header Pragma "no-cache";
            add_header Expires 0;
        }

        # Location for serving static files (long cache duration)
        location /static/ {

            # Cache static files with hashed names for a long time
            add_header Cache-Control "max-age=31536000, immutable";
            expires 1y;

            # Serve pre-compressed files if available
            gzip_static on;
        }

        # Location for serving other assets (optional)
        location /assets/ {
            add_header Cache-Control "max-age=31536000, immutable";
            expires 1y;
        }

        error_page 404 /404.html;  # Custom 404 page (optional)
    }
}