Configuración Caddy

Si queremos usarlo para servir contenido estático de una SPA hemos de definir la raíz del proyecto que queremos servir, especificar que vamos a servir contenido estático y definir el algoritmo de compresión a usar (si queremos usarlo).

Para que al recargar el navegador se cargue la página correspondiente de la SPA tenemos que decirle que nos modifique ciertas rutas y nos cargue realmente la raíz, y una vez vez cargado el javascript el enrutador, por ejemplo React Router, ya se encargará de cargar la vista correspondiente.

http://localhost:3016 {
    root * /ruta/a/la/carpeta/con/el/build
    file_server

    encode zstd gzip

    @notStatic {
        not path /assets/* /*.svg /favicon.ico /manifest.json /service-worker.js /precache-manifest.*
    }

    rewrite @notStatic /
}

La directiva @notStatic define una condición para cualquier ruta que no coincida con las rutas especificadas, y reescribe para que se devuelva la ruta raíz, donde se encentra el index.html.

Si queremos que nos haga de proxy reverso a, por ejemplo, dos servicios, tenemos que decir que nos maneje cada una de esas rutas de forma independiente.

http://localhost:2015 {
    handle /foo/bar/baz* {
        uri strip_prefix /foo/bar
        reverse_proxy http://localhost:8080
    }

    handle_path /foo/* {
        reverse_proxy http://localhost:4001
    }
}

La primera ruta nos redirige todo lo que comience por http://localhost:2015/foo/bar/baz a http://localhost:8080/baz, al eliminar con strip_prefix el prefijo /foo/bar y redireccionar al funcionar como un proxy reverso gracias a reverse_proxy.

La segunda ruta maneja toda ruta que no haya sido capturada por la condición anterior², y la redirige de http://localhost:2015/foo a http://localhost:4001/foo.