silas_ue
(silas ue)
March 25, 2022, 8:07pm
1
1. Caddy version (caddy version
):
caddy:2.1.1-alpine
2. How I run Caddy:
I run Caddy in my mern stack application. The frontend has the Caddyfile and in the dockerfile I reference the Caddyfiles.
a. System environment:
Ubuntu
b. Command:
FROM caddy:2.1.1-alpine
ARG CADDYFILE
COPY ${CADDYFILE} /etc/caddy/Caddyfile
COPY --from=builder /usr/src/app/build/ /srv
d. My complete Caddyfile or JSON config:
www.example.com:80{
handle_path /ui/* {
root * /srv
file_server
}
handle_path /backend/* {
reverse_proxy api-server:3050
}
}
3. The problem I’m having:
I want to run the UI on a path. If I use route instead of handle_path and without of the /ui/ path, everything works. But I want to acces my react app under /ui/ instead of the root path.
4. Error messages and/or full log output:
It only reads the index.html file but all other react pages don’t work.
5. What I already tried:
www.example.com:80{
root * /srv
handle_path /ui/* {
file_server
}
handle_path /backend/* {
reverse_proxy api-server:3050
}
}
www.example.com:80{
route /ui/* {
root * /srv
try_files {path} {path}/ /index.html
file_server
}
handle_path /backend/* {
reverse_proxy api-server:3050
}
}
silas_ue:
caddy:2.1.1-alpine
That’s a very old version. Please upgrade to v2.4.6.
silas_ue
(silas ue)
March 25, 2022, 8:29pm
3
I upgraded caddy but its still doesnt work.
What do you mean by “don’t work”?
Enable the debug
global option. What’s in your logs?
Show example requests with curl -v
, and explain what you see happen and what you expected to happen instead.
1 Like
silas_ue
(silas ue)
March 26, 2022, 10:05am
5
the curl output is
$ curl -v mediasurvy.informatik.uni-hamburg.de
* Trying 134.100.14.53:80...
* Connected to mediasurvy.informatik.uni-hamburg.de (134.100.14.53) port 80 (#0)
> GET / HTTP/1.1
> Host: mediasurvy.informatik.uni-hamburg.de
> User-Agent: curl/7.74.0
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Server: Caddy
< Date: Sat, 26 Mar 2022 10:00:53 GMT
< Content-Length: 0
<
* Connection #0 to host mediasurvy.informatik.uni-hamburg.de left intact
Silas@DESKTOP-KH8PPPG MINGW64 ~/Desktop/BA21 (master)
$ curl -v mediasurvy.informatik.uni-hamburg.de/ui/
* Trying 134.100.14.53:80...
* Connected to mediasurvy.informatik.uni-hamburg.de (134.100.14.53) port 80 (#0)
> GET /ui/ HTTP/1.1
> Host: mediasurvy.informatik.uni-hamburg.de
> User-Agent: curl/7.74.0
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Accept-Ranges: bytes
< Content-Length: 643
< Content-Type: text/html; charset=utf-8
< Etag: "r9cjrehv"
< Last-Modified: Sat, 26 Mar 2022 09:59:38 GMT
< Server: Caddy
< Date: Sat, 26 Mar 2022 10:01:01 GMT
<
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Silas BA</title><script defer="defer" src="/static/js/main.9c07af71.js"></script><link href="/static/css/main.ad055604.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>* Connection #0 to host mediasurvy.informatik.uni-hamburg.de left intact
And the Debug output is:
{"level":"info","ts":1648288861.0156107,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_addr":"134.100.14.251:50280","proto":"HTTP/1.1","method":"GET","host":"mediasurvy.informatik.uni-hamburg.de","uri":"/ui/","headers":{"User-Agent":["curl/7.74.0"],"Accept":["*/*"]}},"common_log":"134.100.14.251 - - [26/Mar/2022:10:01:01 +0000] \"GET /ui/ HTTP/1.1\" 200 643","user_id":"","duration":0.000620453,"size":643,"status":200,"resp_headers":{"Etag":["\"r9cjrehv\""],"Content-Type":["text/html; charset=utf-8"],"Last-Modified":["Sat, 26 Mar 2022 09:59:38 GMT"],"Accept-Ranges":["bytes"],"Content-Length":["643"],"Server":["Caddy"]}}
So my goal is to server my UI under a path. The settings to run my ui on the index path is
mediasurvy.informatik.uni-hamburg.de:80 {
root * ../srv
route {
try_files {path} {path} /index.html
file_server
}
handle_path /backend/* {
reverse_proxy api-server:3050
}
}
But I can’t run it over the index path because I need to run multiple application on this domain.
So i want to access all my react pages with Silas BA instead of http://mediasurvy.informatik.uni-hamburg.de
emilylange
(Emily Lange)
March 26, 2022, 11:39am
6
You need to make your frontend stack aware, that it is running in a subdirectory.
All the links in your initial index.html
are absolute paths (beginning with a /
).
For example:
/logo192.png
will be resolved as
http://mediasurvy.informatik.uni-hamburg.de/logo192.png
(not working) instead of http://mediasurvy.informatik.uni-hamburg.de/ui/logo192.png
(working).
The same applies for all other assets, but most importantly for all .js
bundles.
You will need to fix that in React and I feel like an explanation how to do that is out of scope of this thread here. Especially considering there are already many docs and guides out there, and it comes down to how you actually set up your router.
That being said, I would argue Deployment | Create React App (#building-for-relative-paths ) is a good starting point.
PS: Please consider removing :80
from your site directive to enable auto-https .
2 Likes
silas_ue
(silas ue)
March 26, 2022, 1:05pm
7
Thanks mate, you saved my life, that is indeed the right answer to my problem
2 Likes
matt
(Matt Holt)
March 26, 2022, 3:11pm
8
We often point people to this wiki article:
Have you ever tried to reverse proxy an app into its own little subfolder of your domain name?
Makes things neat, doesn’t it? Using example.com/foo/ for one app, example.com/bar/ for another. If you’re coming here from one of the selfhosted communities, you might be thinking along the lines of example.com/sonarr/, example.com/radarr/ etc.
Chances are, you’ve tried some configuration along these lines:
example.com {
redir /sonarr /sonarr/
handle_path /sonarr/* {
reverse_proxy localhost…
system
(system)
Closed
April 24, 2022, 8:08pm
9
This topic was automatically closed after 30 days. New replies are no longer allowed.