如何通过 nginx 反向代理将多个 Vue 前端项目捆绑到一个域中？

Question

我有 3 个 Vue 应用程序，并使用 nginx 上的以下文档将它们作为不同域上的独立项目提供服务：

https://cli.vuejs.org/guide/deployment.html#docker-nginx

每个都运行良好，没有任何问题。但现在我想通过 nginx 反向代理将它们服务到一个域中，如下所示

test.com/            -->> http://app-frontent1:3000
test.com/merchant    -->> http://app-frontent2:3000
test.com/admin-panel -->> http://app-frontent3:3000

我尝试了许多不同的方法来做到这一点，但都行不通。

http {
         server {
            listen 80;
            server_name localhost 127.0.0.1;

            location / {
                proxy_pass          http://app-frontend1:3000/;
                proxy_set_header    X-Forwarded-For $remote_addr;
            }

            location /merchant {
                proxy_pass          http://app-frontend2:3000/;
                proxy_set_header    X-Forwarded-For $remote_addr;
            }

            location /admin-panel {
                proxy_pass          http://app-frontend3:3000/;
                proxy_set_header    X-Forwarded-For $remote_addr;
            }
        }
}

Answer 1

我终于找到了解决方案。我希望以下存储库对您有所帮助

https://github.com/vahidzafari/vue-nginx-reverse-proxy