Caddy reverse_proxy 和 React 路由器

Question

我无法设置我的 Caddyfile 以使用 React SPA 应用程序，这样

1. React 路由路由工作
2. 对/api/（例如/api/foo）的调用被反向代理到另一个位置

使用下面我当前的Caddyfile，React 路由器似乎正在工作（访问mysite.com/faq 不会给出 404）但对 API 后端的调用（例如 mysite.com/api/foo）似乎正在尝试加载 React 路由器路由.

我们如何解决这个问题Caddyfile？

www.example.com {
    redir https://example.com{uri}
}

example.com {
    root * /root/example/frontend/build
    file_server
    encode gzip zstd

    reverse_proxy /api/*  api.example.com:8000

    try_files {path} /index.html
    
    tls admin@example.com

    log {
        output file /root/example/logs/access.log {
                roll_size 100mb
                roll_keep 5
                roll_keep_for 720h
        }
    }
}

---

更新：这个Caddyfile 也不起作用，React 路由器不再起作用，访问https://example.com/faq 时收到错误 404。但是，反向代理似乎正在工作：当我们访问 https://example.com/api/foo 时，API 服务器正在获得点击，但它错误地将它们作为 http://api.example.com:8000/api/foo 而不是 http://api.example.com:8000/foo

www.example.com {
    redir https://example.com{uri}
}

example.com {
    root * /root/example/frontend/build
    file_server
    encode gzip zstd

    reverse_proxy /api/*  api.example.com:8000

    @notAPI {
        not {
            path /api/*
        }
        file {
            try_files {path} {path}/ /index.html?{query}
        }
    }
    rewrite @notAPI {http.matchers.file.relative}
    
    tls admin@example.com

    log {
        output file /root/example/logs/access.log {
                roll_size 100mb
                roll_keep 5
                roll_keep_for 720h
        }
    }
}

使用 Caddy v2.4.3

使用caddy start --config ~/foo/Caddyfile启动Caddy

Answer 1

我得到了以下工作：

http://localhost {
    root * ./trial-ui
    route {
        reverse_proxy /api/* http://127.0.0.1:8080
        try_files {path} /index.html
        file_server
    }
}