CSS wird mit Docker, Nginx und React-App nicht geladen ⇐ CSS

[Guest]

Ich versuche, eine React-App im Docker-Container auf einem Nginx-Server bereitzustellen.
Die Anwendung wird bereitgestellt... aber ich bekomme KEINEN CSS-Stil.Docker-Datei:

Code: Select all

# 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-Datei

Code: Select all

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
}
}

Vom Nginx-Server:
Was ich in Quellen der Chrome-Debugging-Tools sehe
Ist es „normal“, dass index.html fehlt???
Allerdings custom.css scheint auf die Haupt-CSS-Datei zu zeigen??


Lokaler BuildWenn ich npm run build ausführe, sehe ich das im VS-Code
UND die Anwendung hat CSS-Stil.
Beachten Sie, dass es hier eine index.html-Datei gibt, auf die verwiesen wird die Haupt-CSS-Datei.


Referenzartikel
Ich habe diese gelesen (und ausprobiert)
Stapelüberlauf
aus dem Web
Mittel
==================
NEHMEN SIE 2
===================
Ich habe mich dafür entschieden Erstellen Sie eine einfache Reaktions-App (mithilfe von create-react-app) und stellen Sie sie dann bereit
das ist So soll die App aussehen:

< /p>
Docker-Datei

Code: Select all

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

Code: Select all

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 bereitgestellte App
Hier ist der Fehler, den ich sehe:

Code: Select all

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"

Das ist es, was ich jetzt bekomme ... wieder KEIN CSS
Es gibt einen (Index), der einen href enthält die CSS-Datei