Cant run Mern app under costum path, only index path works

Help
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
    }
}
2

That’s a very old version. Please upgrade to v2.4.6.

3

I upgraded caddy but its still doesnt work.

4

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

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
7

Thanks mate, you saved my life, that is indeed the right answer to my problem :slight_smile:

2 Likes
8

We often point people to this wiki article:

9

This topic was automatically closed after 30 days. New replies are no longer allowed.