How to Deploy Angular on Nginx remote Server Example – Use Vultr VPS Hosting

deploy-angular-client-on-nginx-server-with-vultr-hosting-feature-imag

In the tutorial, We show how to deploy Angular Client with Production mode on Nginx Remote Server with Vultr Hosting.

Related post:
Angular 6 dynamic Navigation Bar – add/remove Route dynamically

Technologies

– Vultr Hosting
– Nginx Server
– Angular

Goal

Deploy Angular Client on Nginx remote server:

  • Normal deployment ->

    deploy-angular-client-on-nginx-server-with-vultr-hosting-result-2-1

  • Sub-folder deployment ->

    deploy-angular-client-on-nginx-server-with-vultr-vps-hosting-sub-folder-deploy

How to achieve it?

Start with production build ng build --prod.
-> Then copy output folder (dist/ by default) to Nginx server.

deploy-angular-client-on-nginx-server-with-vultr-vps-hosting-copy-production-build-from-local-to-remote-1-2

What are Production --prod optimizations?

  • Ahead-of-Time (AOT) Compilation: pre-compiles Angular component templates.
  • Production mode: deploys the production environment which enables production mode.
  • Bundling: concatenates your many application and library files into a few bundles.
  • Minification: removes excess whitespace, comments, and optional tokens.
  • Uglification: rewrites code to use short, cryptic variable and function names.
  • Dead code elimination: removes unreferenced modules and much unused code.

If the app uses the Angular router, When asked for a file that it does not have, Nginx server will return 404 – Not Found error.
-> Configure 404 error on the server to redirect requests for missing files to index.html:

try_files $uri $uri/ /index.html;

With sub-folder deployment, we re-build our sourcecoded with --base-href option:

ng build --prod --base-href "/grokonez/demo/"

– The HTML base href="..." specifies a base path for resolving relative URLs to assets such as images, scripts, and style sheets.

Then re-upload output(dist/ by default) to sub-folder of Nginx server:

deploy-angular-client-on-nginx-server-with-vultr-hosting-copy-production-build-from-local-to-sub-folder-remote

Practice

Sourcecode for deployment at: link

Start Vultr Hosting Server

Follow the link to Login to Vultr Hosting.

– Create a small server grokonez-angular-deploy such as:

vultr-server-ip-infos

Install Nginx Server

– Use Putty, login to above server grokonez-angular-deploy:

deploy-angular-client-putty-connect-to-vultr-hosting-server

– Install Nginx server by cmd:

– Check your Nginx server: systemctl status nginx

angular-deploy-on-nginx-server-using-vultr-vps-hosting-check-nginx-install

Build Angular Client

– Build Production for Angular Client: ng build --prod

deploy-angular-client-on-nginx-server-with-vultr-vps-hosting-build-angular-production-image

– Output is dist folder:

deploy-angular-client-on-nginx-server-with-vultr-vps-hosting-output-production-image

Deploy Angular Client on Nginx Server

– Use scp to copy building files from local to remote server:

deploy-angular-client-on-nginx-server-with-vultr-vps-hosting-copy-production-build-from-local-to-remote-1-2

– Restart Nginx server by cmd sudo service nginx restart;

-> Check results:

deploy-angular-client-on-nginx-server-with-vultr-vps-hosting-result-1

deploy-angular-client-on-nginx-server-with-vultr-vps-hosting-result-2

– Press SignUp button, got 404 Error:

angular-deploy-on-nginx-server-using-vultr-vps-hosting-404-not-found

– Press a link on Browser URL, got Error 404 ->

angular-deploy-on-nginx-server-using-vultr-vps-hosting-404-not-found-press-bar-browser

Configure 404 Error Redirect

Open nginx configuration: sudo nano /etc/nginx/sites-available/default

Redirect 404 error to index.html file by try_files:

try_files $uri $uri/ /index.html;

-> Details:

– Restart Nginx server by cmd sudo service nginx restart
– Press SignUp button, index.html is redirected:

deploy-angular-client-on-nginx-server-with-vultr-vps-hosting-result-error-1-fixed-redirect-index

Deploy in Sub Folder

Rebuid Angular sourcecode with --base-href as below:

ng build --prod --base-href "/grokonez/demo/"

– Change 404 error redirect to /grokonez/demo/index.html file with try_files as below:

try_files $uri $uri/ /grokonez/demo/index.html;

– Restart Nginx server by cmd sudo service nginx restart

-> results:

deploy-angular-client-on-nginx-server-with-vultr-vps-hosting-sub-folder-deploy

SourceCode

AngularDynamicRoutes

By grokonez | November 18, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*