reactjsazurecontainersvitecaddy

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.


Solution

  • 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 .
    

    enter image description here

    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
    

    enter image description here

    Local with Caddy server :

    enter image description here

    enter image description here

    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
    

    enter image description here

    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"
    

    enter image description here

    enter image description here

    enter image description here

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

    enter image description here