REACT VITE APP IN DOCKER BEHIND NGINX REVERSE PROXY IN DUBDOMAIN

[admin]

One can run vite in dev, preview or serve to test the frontend. Serve is used for production. In ideal condition frontend shall be available to the user unobstructed, i mean front end server and user have all ports access. But what if it is required to serve react front end from behind the firewall which created a hurdle. Nginx can proxy pass but simultaneous http and websocket proxy implimentation is bit tricky.
I am describing here docker creation of react vite app and nginx configuration to access front end behind the firewall.
1.Vite has by default sub-folder disable meaning you can browse only at root. To enable subfolder we have to edit vite.config.js.
have to add base: '',
it will look like

Code: Select all

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '',
})
2. Now create docker:

Code: Select all

FROM node:18-alpine
WORKDIR /app
COPY . .
RUN npm --verbose install
RUN npm i -g serve
RUN npm run build
CMD [ "serve", "-s", "dist","-n" ]

3. Build docker

Code: Select all

docker build -t="vite_image" .

4. create docker container:

Code: Select all

 docker create -t -i -p 3000:3000 --name vite vite_image

5. start docker

Code: Select all

docker start vite

6. Configure nginx

Code: Select all

    server {
    listen 80;
    server_name localhost;  # Replace with your domain name or IP address

    location /app/ {
        proxy_pass http://ip_address_docker_host:3000/;  # Forward requests to Vite server on port 3000
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;  # Handle WebSocket connections
        proxy_set_header Connection "upgrade";    # Handle WebSocket connections
        proxy_set_header Host $host;              # Forward Host header
        proxy_set_header X-Real-IP $remote_addr; # Forward real IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # Forwarded for
        proxy_set_header X-Forwarded-Proto $scheme; # Forwarded protocol
    }

    # Optional: Add gzip compression
    gzip on;
    gzip_types text/css application/javascript application/json;
    gzip_min_length 1000;
    }
    

7. Start nginx and now you can access vite app outside firewall.
8. Similarly you have to forward backend also in nginx to run complete project outside of firewall.
Thanks & Regards
Admin