Configure Nginx for path based deployment of multiple apps
Usually we set up separate UI elements and API as separate domains for the ease but here we are doing the same thing based on path.
Recently I had a requirement where I had to deploy multiple angular/react/vue.js apps and an API to separate paths and serve it through Nginx.
Following is the configuration that I used.
server{
server_name nginxangular.vigneshn.in;
location /api{
proxy_pass http://127.0.0.1:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /admin {
alias /data/app/ui/admin;
index index.html index.htm;
try_files $uri $uri/ /admin/index.html;
}
location /client {
alias /data/app/ui/client;
index index.html index.htm;
try_files $uri $uri/ /client/index.html;
}
location /business {
alias /data/app/ui/business;
index index.html index.htm;
try_files $uri $uri/ /business/index.html;
}
location / {
alias /data/app/ui/common/;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
The admin,client,business,common are the angular deployment folders. The common folder is served from / and the rest of them are served from their appropriate paths.