How do I serve a React.js Vite app hosted on an Azure container instance over a custom route, where routing is managed by Caddy?

I want to serve my React app from a different route, so that I can keep all of my servers on the same container group.

My Caddyfile looks like this:

fqdn {
    handle_path /backend* {
        reverse_proxy http://localhost:8000
    }

    handle_path /react-app* {
        reverse_proxy http://localhost:3001 {
            header_up Host {host}
            header_up X-Forwarded-Host {host}
            header_up X-Forwarded-For {remote}
            header_up X-Forwarded-Proto {scheme}
        }
    }

    handle {
        reverse_proxy http://localhost:3000
    }


    # This will handle all other requests and route them to port 5000
    handle {
        reverse_proxy http://localhost:5000
    }
}

It is clear that my backend server, and my two frontend servers are hosted on 8000, 3000, and 3001 respectively. Everything else works perfectly. If I host the react app on another container group, it works fine, as the route is then "/".

Here's my vite config:

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

export default defineConfig({
 plugins: [react()],
 server: {
   host: true,
   port: 3001,
   strictPort: true,
 },
 base: '/react-app/',
 preview: {
   port: 3001,
 }
})

And my main.jsx for reference to routing:

  ReactDOM.createRoot(document.getElementById('root')).render(
    <Router basename="/">
    <Routes>
      <Route path="/" element={<Login />} />
      <Route path="/app" element={<App />} />
    </Routes>
  </Router>
  )

The issue I am facing is that since both the vite config, and caddyfile are pointing towards /react-app, I get infinite redirects, if I change the basename prop in the Router component. If I remove it, like in the above code, vite still searches for resources at the base path, so nothing gets loaded then also. For example, the below files do not get loaded as vite looks for them in fqdn/src/, instead of fqdn/react-app/src.

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Login from './Login.jsx';

I serve the react app using npm run dev, which while amateurish is working fine for me so far. This is done using the dockerfile.

I would appreciate any insights on how to solve this frustrating issue. Thanks.

To configure the Caddy server to serve a React app created with react-router on an Azure Container Instance, you need to modify your Caddyfile as follows:

I used this reference link to implement try_files in the Caddyfile.

To pull the latest Caddy image from Docker Hub, use the command below:

docker pull caddy

Place the Caddyfile and Dockerfile in the main path:

:80 {
    root * /usr/share/caddy
    file_server
    try_files {path} /index.html
}

I referred to this link for configuring React Router with Caddy.

Docker

FROM  caddy

COPY  ./dist  /usr/share/caddy

COPY  ./Caddyfile  /etc/caddy/Caddyfile

Command to build the Docker image:

docker build -t caddy:dockerfile .

Use docker run commands to start a Docker container with the caddy image, exposing port 80 in the container to port 8080 on the host machine:

docker run -p 8080:80  caddy:dockerfile
docker run -p 8080:80 -d caddy:dockerfile

Local with Caddy server :

Steps for hosting Caddy server on Azure Container Instances:

The docker tag command is used to tag an image with a new name, often useful when pushing the image to a container registry like Azure Container Registry (ACR):

docker tag caddy:dockerfile AzureContainer RegistryName.azurecr.io/caddy:dockerfile

To log in to Azure Container Registry (ACR), use the Azure CLI command below:

az acr login --name "AzureContainerRegistryName"

az acr login --name "AzureContainerRegistryName" --password "Password" --username "UserName"

• Navigate to the Container Registry and select "Run instance" to create Azure Container Instances.

Select the IP address of the Container Instances to browse the application hosted with the Caddy image.