Problem with static files when reverse proyxing a webapp running in docker

Help
1

1. Caddy version:

v2.9.1

2. How I installed and ran Caddy:

Installed via apt in Ubuntu 20.04.3 (focal)

b. Command:

sudo systemctl restart caddy.service

d. My complete Caddy config:

domain.com:80 {

        redir /app2 /app2/
        handle_path /app2/* {
           reverse_proxy * http://localhost:8080
        }

        handle_path /apache {
           reverse_proxy :8001  #the apache default page just for testing proxy
        }

        handle_path /api1/* {
           rewrite * /app1/api/v1{uri}
           reverse_proxy :3000 #app1 REST api
        }

        handle_path /* {
           reverse_proxy * :8000        #app1frontend
        }

}

3. The problem I’m having:

I’m new to Caddy. I’m trying to configure it to act as a reverse proxy in order to serve multipleapplications through HTTP/HTTPS.

Currently I have Caddy v2.9.1 running in an Ubuntu-based system. I also have apache2.4.41 for virtual hosting on ports 8000-800x. But one of the applications that i need to deploy runs in a docker container with nginx instead of the local apache2 (app2 in caddyfile).

The rest of the configuration is fine, but when i try to navigate to http://domain.com/app2 the page doesn’t load because Caddy is not handling properly the requests in order to load static files (.css and .js). I know this might be a common issue, but how can it be fixed without the use of a subdomain?

NOTE: If I access the application via port 8080 (ignoring caddy), it works fine. Also if i switch ports to redirect /* to port 8080 and /app2 to 8000, then the problem is trasferred to app1. That assures that the problem has to do with caddy.

Pd: I know that i’m using port 80 instead of 443. Also, i know this can be fixed by using a subdomain but i’m not able to do that as i’m not the domain owner.

4. Error messages and/or full log output:

When accessing http://domain.com/app2 in the navigator, the console shows the following output:

Stylesheet http://domain.com/css/app.xxxxxx.css not loaded because of MIME type, "text/html", is not "text/css"
Script http://domain.com/js/app.xxxxxx.js was loaded even thought its MIME type ("text/html") is not a valid MIME type for JavaScript

Thanks for the help.

2

The app served on /app2 needs to be aware of it being served on a path. Read this article to understand why.

1 Like
3

When app2 requests for static files (/css, /js, /img…) it is being redirected to app1 as it is being server under / path, how can I modifiy the caddyfile to redirect it to app2 without breaking app1?

4

This is what I’m saying in my earlier reply. Your app2 needs to be aware being served on a subpath.

5

I understand that there is not an easy solution for this apart from a subdomain. The app needs the be designed then in order to be behind a reverse proxy

6

Correct