How can I bundle multiple Vue frontend projects into a single domain via nginx reverse proxy?

  docker, docker-compose, nginx, vue.js

I have 3 Vue applications and serve them as independent projects on separate domains using the following documentation on nginx:

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

and each one works well without any problem. But now I want to serve them into a single domain as follows via nginx reverse proxy

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

I tried many different ways to do this but it wont work.

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;
            }
        }
}

Source: Docker Questions

LEAVE A COMMENT