Problem Description:
I am working on a React application using Vite, and I am running it in a Docker container. I use a Dockerfile to build and serve the application, and I also have an nginx.cfg configuration file for NGINX to act as a reverse proxy and provide HTTPS access.
• Dockerfile:
# Build stage
FROM node:18-alpine AS build
# Set the working directory in the container
WORKDIR /app
# Copy package.json and package-lock.json to install dependencies
COPY package*.json ./
# Install project dependencies
RUN npm install
# Copy the rest of the project files
COPY . .
# Build the application
RUN npm run build
# Production stage
FROM node:18-alpine
WORKDIR /app
# Install serve globally
RUN npm install -g serve
# Copy only the build folder
COPY --from=build /app/dist ./dist
EXPOSE 97
CMD ["serve", "-s", "dist", "-l", "97"]
# Build stage
FROM node:18-alpine AS build
# Set the working directory in the container
WORKDIR /app
# Copy package.json and package-lock.json to install dependencies
COPY package*.json ./
# Install project dependencies
RUN npm install
# Copy the rest of the project files
COPY . .
# Build the application
RUN npm run build
# Production stage
FROM node:18-alpine
WORKDIR /app
# Install serve globally
RUN npm install -g serve
# Copy only the build folder
COPY --from=build /app/dist ./dist
EXPOSE 97
CMD ["serve", "-s", "dist", "-l", "97"]
• nginx.cfg:
events {
worker_connections 1024; # Maximum number of connections accepted by each worker
}
http {
server {
listen 443 ssl;
server_name my_domain_here;
http2 on;
ssl_certificate /etc/nginx/ssl/ssl_certificate.crt;
ssl_certificate_key /etc/nginx/ssl/ssl_certificate.key;
location /photo/ {
proxy_pass http://prueba_front:97/photo/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_read_timeout 90s;
proxy_connect_timeout 90s;
proxy_send_timeout 90s;
send_timeout 90s;
}
}
}
docker-compose.yml
services:
nginx:
image: nginx:latest
ports:
- "443:443"
volumes:
- ./nginx.cfg:/etc/nginx/nginx.conf
- ./ssl:/etc/nginx/ssl
networks:
- poc_probe
prueba_front:
build:
context: ./app/front
dockerfile: Dockerfile
ports:
- "97:97"
networks:
- poc_probe
networks:
poc_probe:
driver: bridge
• vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// Desarrollo
export default defineConfig({
base: "/", // Base URL para la aplicación
plugins: [react()],
build: {
outDir: 'dist', // Directorio de salida para la construcción
rollupOptions: {
// Configuración adicional de Rollup si es necesaria
}
},
preview: {
port: 5173,
strictPort: true,
},
server: {
port: 5173,
strictPort: true,
host: true,
origin: "http://0.0.0.0:8080",
},
});
Problem Description:
When I try to access https://my_domain/photo/, I receive an error indicating that the static .js and .css files in the dist folder cannot be found. However, when I enter the container running on port 97, I can see that the files are present.
error image:
https://preview.redd.it/a64orw4vutpd1.png?width=1905&format=png&auto=webp&s=32874662d57d335f045cbaf65bb2eda188971714
I have tried accessing the application using my private IP, and it works correctly, but when using the reverse proxy with HTTPS, I encounter the aforementioned error.
Question: What could be wrong with the NGINX configuration that prevents the static files from being served correctly through the reverse proxy? Is there any way to debug this issue?
I verified that the static files are indeed generated in the dist folder when I build the application. I attempted to configure NGINX to serve these files through the reverse proxy, but I have not been successful in getting it to work as expected. I am quite new to using NGINX, so I may have overlooked something in the configuration.
I was expecting to access the static files via https://my_domain/photo/, and for them to be served correctly without any errors.
