Deploy Angular application in NgInx server on DigitalOcean Ubuntu droplet

DigitalOcean is a cloud platform which provides infrastructure similar to Amazon AWS, Microsoft Azure etc. Ubuntu droplet is most preferred one for deploying websites and servers.

NgInx is a very powerful web server used for creating server blocks and web hosting.

Setup Droplet

Once you have bought new Ubuntu droplet from DigitalOcean, you will have droplet IP address and “root” user’s password. First thing you should do is change default password and provide a very strong password. DigitalOcean recommend setting security and firewalls for new droplet to avoid any DoS and other security attacks.

Setup NgInx

Run below commands for setting up NgInx server.

  • sudo apt-get update
  • sudo apt-get install nginx
  • sudo ufw app list
  • sudo ufw allow ‘Nginx HTTP’
  • systemctl status nginx

After running last command, you should see status with “active”

And finally, go to web browser and enter url http://<droplet-ip-address>

You should see default NgInx web page.

If it status is not “active (running)” then there might be some issue in nginx server setup. Follow below article for detailed steps.

Deploy Angular application

On your development machine, build your application in prod mode using command ng build --prod. This command shall create dist folder in Angular source code folder.

Now we need to transfer dist folder content to DigitalOcean droplet using FTP commands. You can use any FTP software, in this article we are using FileZilla.

In FileZilla, go to “Site Manager” — “New Site” and enter details:

Provide droplet IP address in “Host” text box and select SFTP as a protocol. Click on “Connect” and if shall connect to droplet by listing server folders.

After successful directory listing, enter path /var/www/html in “Remote site”. Generally this path is not visible but should be displayed once typed in text box and pressed Enter key.

On left side, select your “dist” folder created using ng build --prod command.

Select all files in left pane and drag-drop in right pane or use “Upload”

If you face error uploading files, make sure you have write permission on /var/www folder. You can set permission by running command - sudo chmod -R 755 /var/www

After successful file transfer, go back to web browser and hit url http://<droplet-ip-address>.

You should see your Angular application running!

This article covers deploying a website in default server block. NgInx server can be used to deploy multiple websites by creating multiple server blocks.

Follow this article for detailed steps to deploy multiple websites:

If you wish to deploy your website with “domain name” then follow this article.

Cheers!

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store