Angular production using NginX

angular-production-nginx.md

Local Machine

Build Angular project

$ ng build --prod

This will generate a /dist distribution directory, upload this directory to your server using scp Secure Copy or something else.

Using Secure Copy

$ scp -r dist/my-app root@11.222.3.444:/var/www/my-app.mydomain.com

More details on this link

Remote Server

Configure NginX

$ cd /etc/nginx/sites-available
$ touch my-app.mydomain.com.conf

Edit NginX configuration my-app.mydomain.com.conf

$ nano my-app.mydomain.com.conf

Put the following values

server {
        server_name my-app.mydomain.com;
        listen 80;
        index index.html;
        root /var/www/my-app.mydomain.com;

        location / {
                try_files $uri$args $uri$args/ /index.html;
        }

        location /api {
                proxy_pass http://api.my-app.mydomain.com;
        }
        
        access_log      /var/log/nginx/my-app.mydomain.com_access.log;
        error_log       /var/log/nginx/my-app.mydomain.com_error.log;
}

Create a Symbolic Link of the configuration

$ ln -s /etc/nginx/sites-available/my-app.mydomain.com.conf /etc/nginx/sites-enabled/my-app.mydomain.com.conf

Validate configuration and restart NginX

$ nginx -t && service nginx restart

Configure SSL with Certbot

$ certbot --nginx