Serve ExpressJS API together with Angular/Ionic static site: Nginx config

express-ionic-nginx.md

1. create new file: sudo nano /etc/nginx/sites-available/mysite.com.conf and add:

server {            
        # on which port should nginx listen
        listen 80 default_server;                                                                                                     
        listen [::]:80 default_server;                                                                                                
                                        
        # serve client
        root /home/ionic-app/client/www;                                                                               
        index index.html index.htm;
        
        # access log
        access_log /www/logs/mysite.access.log;                                                                                     
                                           
        # nginx will forward this requests to defined locations
        server_name 123.45.67.89 mysite.com;                                                                               
                                                                                                                                      
        location / {
                # cache
                expires -1;                                                                                                
                add_header Pragma "no-cache";                                                                                
                add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
                
                # angular routing rewrite
                try_files $uri$args $uri$args/ $uri $uri/ /index.html =404;                                                          
        }                                                                                                                             
                   
        // if you want to have express api accessible from public add this block
        // (not needed for ionic static site to work correctly, should be commented out in prod) 
        location /api/v1 {                                                                                                               
                proxy_pass http://localhost:7000/api/v1;                                                                              
                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;                                                                                     
        }
 }

2. add new config to /etc/nginx/sites-enabled folder with symlink (only sites included in this folder are served by nginx) sudo ln -s /etc/nginx/sites-available/mysite.com.conf /etc/nginx/sites-enabled/mysite.com.conf

Hint: if new site config is not picked up by nginx verify that files in /etc/nginx/sites-enabled are included by nginx by reviewing /etc/nginx/nginx.conf:

http {
   ...
   include /etc/nginx/sites-enabled/*.*; // if not works write exact filename like /etc/nginx/sites-enabled/mysite.com.conf
   ...
}

Hint1: if you want to stop serving site with nginx just remove symlink and restart nginx:

sudo rm /etc/nginx/sites-enabled/mysite.com.conf
sudo service nginx restart

Always verify nginx syntax is OK with sudo nginx -t and after every change restart nginx service with sudo service nginx restart so changes takes effect.