If you want to run your AngularJS front-end web application and run nginx as your API proxy server, then the following nginx virtual host configuration can help you.
#AngularJS frontend with proxied API backend
server {
listen 80;
server_name your-angularjs-public.url;
root your/angularjs/app/root-directory;
index index.html;
location / {
# If you want to enable html5Mode(true) in your angularjs app for pretty URL
# then all request for your angularJS app will be through index.html
try_files $uri /index.html;
}
# /api will server your proxied API that is running on same machine different port
# or another machine. So you can protect your API endpoint not get hit by public directly
location /api {
proxy_pass http://api-server-url;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
#Static File Caching. All static files with the following extension will be cached for 1 day
location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
expires 1d;
}
}
This will help you lot to configure your Nginx proxy for your API backend and run your API with AngularJS based web application interface.