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?

Question

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.

P Sampath · Accepted Answer · 2024-07-18 14:37:21Z

0

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

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

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

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

answered Jul 18, 2024 at 14:37

P Sampath

4,2652 gold badges7 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Armaan Shah Over a year ago

While this didn't work directly, the trick was the try_files directive. handle /react-app* { root * /app reverse_proxy localhost:3001 try_files {path} /index.html file_server } This is the config that worked. Thanks!

Collectives™ on Stack Overflow

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?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related