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"
Select the IP address of the Container Instances to browse the application hosted with the Caddy image.