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.
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.
7 Security Measures to Protect Your Servers | DigitalOcean
When setting up infrastructure, getting your applications up and running will often be your primary concern. However…
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
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.
How To Install Nginx on Ubuntu 16.04 | DigitalOcean
Nginx is one of the most popular web servers in the world and is responsible for hosting some of the largest and…
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
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:
How To Set Up Nginx Server Blocks (Virtual Hosts) on Ubuntu 16.04 | DigitalOcean
When using the Nginx web server, server blocks (similar to the virtual hosts in Apache) can be used to encapsulate…
If you wish to deploy your website with “domain name” then follow this article.
How To Set Up a Host Name with DigitalOcean | DigitalOcean
This article will explain how to manage your DNS records using the DigitalOcean Control Panel and can help you decide…