1. The problem I’m having:
I have a dockerized react-vite app using react-router-dom, my domain name is https://nascent.dev.
When I try to access paths such as /library or /chapter (so https://nascent.dev/library) for example I get the page I am looking for, but the problem arises when I refresh the page or try to access it using the URL I get a blank page with a 404 error.
I looked into it and it was recommended to append file_server to the Caddyfile or even the try_files {path} /index.html command but unfortunately I don’t know how I can do this with a containerized environment.
2. Error messages and/or full log output:
404 - The requested path could not be found
3. Caddy version:
alpine2.7.5
a. System environment:
docker ubuntu, stack: react, react-router, vite
b. Caddyfile:
nascent.dev {
reverse_proxy nascent-frontend:8080 {
header_down Strict-Transport-Security max-age: 31536000
}
}
c. docker-compose.yml file:
version: '3'
services:
nascent-api:
container_name: nascent-api
restart: unless-stopped
build:
context: ./bai
dockerfile: Dockerfile
ports:
- "3000:3000"
nascent-frontend:
container_name: nascent-frontend
restart: unless-stopped
build:
context: ./mythril
dockerfile: Dockerfile
ports:
- "8080:8080"
caddy:
image: caddy/caddy:2.7.5-alpine
container_name: caddy-nascent
restart: unless-stopped
ports:
- "80:80"
- "443:443"
volumes:
- $PWD/Caddyfile:/etc/caddy/Caddyfile
- $PWD/site:/srv
- caddy_data:/data
- caddy_config:/config
volumes:
caddy_data:
caddy_config: