Running multiple application under 1 domain name

Help
1

Hi, is it possible run multiple application under 1 domain name in Caddy? For example:

www.example.com/app1

www.example.com/app2

Are there any example Caddyfile that I can look at? Thanks.

2

Hi @darkdragon,

This is doable multiple ways. If you’re serving the apps as files off disk from two different locations:

www.example.com/app1 {
  root /path/to/app1
}

www.example.com/app2 {
  root /path/to/app2
}

If you’re reverse proxying to two separate upstream apps:

www.example.com {
  proxy /app1 localhost:8081
  proxy /app2 localhost:8082
}
3

So I tried taking the proxy approach where my Caddy file looks like this:

:80 {
  proxy / localhost:8080 (Vue webpack server)
  proxy /some-app localhost:5000 (some other Vue webpack server)
}

However when I click on the /some-app link, it sends me back to the / route, do you know what I am doing wrong here?

4

What do you mean by this, exactly?

Are you getting some kind of redirect?

Can you try curl -IL localhost:80/some-app and post the output so we can see what’s happening?

5

Did some quick testing.

The example works fine for me on Caddy v1:

~/test 
➜ echo "I'm backend 8080!" > backend8080/index.txt

~/test 
➜ echo "I'm backend 5000!" > backend5000/some-app/index.txt

~/test 
➜ cat Caddyfile
http:// {
  proxy / localhost:8080
  proxy /some-app localhost:5000
}

:8080 {
  root ./backend8080/
}

:5000 {
  root ./backend5000/
}

~/test 
➜ curl localhost:80
I'm backend 8080!

~/test 
➜ curl localhost:80/some-app/
I'm backend 5000!
6

Update: So I got it semi working with this configuration basing off the structure you gave me:

http:// {

proxy /some-app localhost:5000 {
insecure_skip_verify
without /some-app
}

proxy / localhost:8080 {
insecure_skip_verify
}

}

:8080 {
root ./website/
}

I am able to access app1 via / and the reverse proxy brings me to some-app, however now my problem is when I visit the link localhost/some-app, the some-app application doesn’t load because the resources like Javascript and CSS paths return a 404. What should I do in this case for it to point to the correct resources?

7

This happens because your app thinks it’s accessible at /, so it’s directing the browser based off that, but you’re only proxying requests prefixed with /some-app to the app.

You need to either tell the app to prefix resources with /some-app (commonly reffered to as a Base URL, although this option isn’t incredibly commonplace), OR you can do a whole lot of filtering with http.filter to prefix all of the resources in the HTML as it comes back to the client.

Some apps just aren’t happy being shoved in a subfolder, unfortunately.

2 Likes
8

I was able to get it to work by updating the baseURL in the Vue CLI. I have one last problem with this set-up, the favicon for the main application is giving me a 502 error. My current Caddyfile now looks like this:

http:// {

   proxy /some-app localhost:5000 {
    insecure_skip_verify
    without /some-app
  }

  proxy / localhost:8080 {
    insecure_skip_verify
    websocket
    transparent
  }
 
}

While my Vue directory for the main app looks like this:

src
public
    - favicon.ico
    - index.html
caddyfile

So it seems to serve every file except for the favicon correctly (the some-app favicon also gets served properly), how would I properly serve the favicon for the main application?

9

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.