Configure Nginx for path based deployment of multiple apps
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.