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
Contents
Technologies
– Vultr Hosting
– Nginx Server
– Angular
Goal
Video Demo
Objectives
Deploy Angular Client on Nginx remote server:
- Normal deployment ->
- Sub-folder deployment ->
How to achieve it?
Start with production build ng build --prod.
-> Then copy output folder (dist/ by default) to Nginx server.
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:
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:
Install Nginx Server
– Use Putty, login to above server grokonez-angular-deploy:
– Install Nginx server by cmd:
|
1 2 |
sudo apt-get update sudo apt-get install nginx |
– Check your Nginx server: systemctl status nginx
Build Angular Client
– Build Production for Angular Client: ng build --prod
– Output is dist folder:
Deploy Angular Client on Nginx Server
– Use scp to copy building files from local to remote server:
– Restart Nginx server by cmd sudo service nginx restart;
-> Check results:
– Press SignUp button, got 404 Error:
– Press a link on Browser URL, got Error 404 ->
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
server { listen 80 default_server; listen [::]:80 default_server; root /var/www/html; index index.html index.htm index.nginx-debian.html; server_name _; location / { # First attempt to serve request as file, then # as directory, then fall back to displaying a 404. # try_files $uri $uri/ =404; try_files $uri $uri/ /index.html; } } |
– Restart Nginx server by cmd sudo service nginx restart
– Press SignUp button, index.html is redirected:
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:
