How to reverse proxy frankenphp

[Asociateone]

I have both my development and production environments running on a single Digital Ocean droplet, using a Frankenphp image. To ensure the correct application is served, I've implemented Caddy.

Since Caddy handled SSL certificate creation, I disabled it within the Frankenphp image by setting SERVER_NAME: :80 in the compose.yaml file. When I visited example.com, it correctly displayed the Laravel default page, which was a good sign.

However, when I attempted to log in, the styling failed to load because the CSS and JavaScript files were being served over HTTP internally. Browsers like Google Chrome don't allow this behavior.

I attempted to resolve this issue by adding a global directive to the Caddyfile of my Caddy image, as suggested in the documentation. Unfortunately, this didn't work as expected. I also consulted the Caddy config documentation, but either my implementation was incorrect, or I misunderstood the instructions.

Does anyone have an idea on how to resolve this issue?

[withinboredom]

CSS and JS urls is not a caddy issue, but something with your configuration and/or app code

[Asociateone]

I believe it is.

The initial call arrives in Caddy, which then directs it toward the correct FrankenPHP image. However, this image operates on HTTP instead of HTTPS. Turning on HTTPS with FrankenPHP seems to disrupt their ability to communicate with each other (or so it appears). As I'm quite new to this, any thoughts or insights would be greatly appreciated. 😊

[withinboredom]

Heh. It isn't. I could probably write a book about the problem you are stuck on, and we have all been stuck on some version of this problem. I don't want to spoil it for you because it's a good learning experience for how the web works... but I will give you a direction.

I recommend reading up on https://laravel.com/docs/11.x/urls and note:

The generated URL will automatically use the scheme (HTTP or HTTPS) and host from the current request being handled

So you need to figure out one of two options:

1. How to keep the original https request to your application visible to your application. (Not sure how to do this with caddy tbh)
2. Manually set the application url in your env and do not rely on the request (this is more secure but depending on your application, may not be realistic).

[Asociateone]

Thank you :)

[larsverp]

Curious to know if you managed to keep the original https request to your application visible to your application in Caddy? Since I'm also going through some struggling with this issue 🧐

[Asociateone]

I'm still not a hero in this so, I will just post below what I did:

Your compose.yaml for your Caddy Reverse proxy container

networks:
  caddy:
services:
  caddy:
    image: caddy:latest
    restart: unless-stopped
    container_name: caddy
    ports:
      - 80:80 
      - 443:443
    volumes:
      - /home/name/caddy/Caddyfile:/etc/caddy/Caddyfile
      - /home/name/caddy/site:/srv
      - /home/name/caddy/caddy_data:/data
      - /home/name/caddy/caddy_config:/config
    networks:
      - caddy
volumes:
  caddy_data:
    external: true
  caddy_config:

Your CaddyFile for your Caddy reverse proxy container

yoururl.com {
    reverse_proxy yourfrankenphpcontainername:80 // Or 8000 if you use Octane
}
dev.yoururl.com {
    reverse_proxy devyourfrankenphpcontainername:80 // Or 8000 if you use Octane
}

Your compose.yaml for running frankenphp

Ensure that you do not serve your FrankenPHP container over HTTPS, if you do the application will throw a 500 error.

services:
  frankenphp:
    container_name: yourfrankenphpcontainername
    restart: always
    build:
      context: .
    entrypoint: php artisan octane:frankenphp --max-requests=1 # remove this line if you do not use octane
    networks:
      - caddy_network # this is the network from the Caddy reverse proxy network
    volumes:
      - .:/app
    environment:
      SERVER_NAME: :80 # make sure it does not serve over HTTPS because the reverse proxy already fixes this for you
volumes:
  caddy_data:
  caddy_config:
networks:
  caddy_caddy:
    external: true

I don't need to specify internal ports for Caddy to communicate with the container, it automatically uses the container's internal ports (either 80 or 8000 for Octane).

Your Laravel application

To ensure that your application runs over HTTPS, add this to your AppServiceProvider.php:

public function boot(): void
{
    URL::forceScheme('https');
}

[dunglas]

Another (cleaner) option would be to use trusted headers:

1. Set the IP of the reverse proxy to trust using the trusted_proxies directive in the FrankenPHP Caddyfile
2. Add the IP of the reverse proxy in your Laravel or Symfony config (Laravel is using Symfony under the hood for this), and mark X-Forwarded-Proto, X-Forwarded-For and X-Forwarded-Host (they are set by default by Caddy) as trusted headers: Laravel docs / Symfony docs

Alternatively, Caddy supports the Proxy Protocol. To enable this feature:

1. Enable the proxy protocol at the reverse proxy level using the proxy_protocol option of the http transport
2. Enable the proxy_protocol listener wrapper in FrankenPHP

Using the proxy protocol is less popular but has the advantage of not requiring to configure the PHP app itself.

Both options have the advantage of also preserving the original Host and IP in addition to the scheme.