How to Deploy an Angular Application to Digital Ocean

  • Akshay Shendkar
  • Oct 6, 2021
angular , digital ocean

Create an account

Create a new account on Digital ocean by using the below link

DigitalOcean Referral Badge


Download MobaXterm

To access SSH and FTP on your server, we need a software called MobaXtream Software. Click on the link below to download: Download MobaXterm


Digital Ocean Setup

1. Add the project name, and description, and select the purpose of the project.

2. Then create a new droplet. Basically in the digital ocean a server or service that you want to use they're called droplets

3. Select droplet settings according to your convenience. For example

4. Select Ubuntu 20.04 x64

5. Choose a starter plan from the plan list (you can choose any plan according to your requirements).

6. You can add backups to your droplet (Again it depends upon you, whether you want to enable it or not)

7. Select a data center region ( Select datacenter that is closer to you and your end-users)

8. Select One-time password Authentication to sign in to your server. Later we will enable SSH private key authentication, In order to do that, we need a one-time password (Please note down the password you are setting somewhere safe).

9. After that select how many droplets you need, add tags and select a project from the dropdown menu to assign droplets to a project.


MobaXterm Setup

1. Open and click on the new session (SSH).

2. Copy the IP address of the newly created droplet and paste it into the remote host input box and specify the root as the username. It will create a new terminal under session and prompt you to enter your droplet password

3. Create a non-root user using this command, adduser oxvsys it will create a new non-root user (folder) under the home folder. Enter the password for the new user and skip for other user info (press enter).

4. Add permission to the non-root user usermod -aG sudo oxvsys.


Setup SSH private keys

1. Open a command prompt on your computer.

2. Generate SSH keys for both root and non-root users using the command, ssh-keygen and change the key name to root and non-root user respectively. (e.g. id_rsa to root and id_rsa.pub to root.pub)

3. Copy the content of root.pub key and goto root/.ssh folder and open the authorized_keys file with a default text editor and paste it into.

4. For non-root users copy the content of non-root.pub key goto home/oxvsys folder and create .ssh folder, within that folder, create an authorized_keys file and paste it into it.

5. To ensure that you are authenticating with keys and you can test that using a command on your computer ssh oxvsys@<ip-address> and type yes and enter a user's password.

6. You can also test this with MobaXterm. Create a new session (SSH) > copy the IP address of the droplet into the remote host input box and specify the user name. > goto Advanced SSH settings > click on Use private key and browse user private ssh key that your previously generated, click on ok and you will authenticate using an ssh key.


Disable Password-based Authentication

1. Before disabling the password-based authentication, please ensure that your private ssh key-based authentication is working and keep your ssh keys safe, take a backup of it.

2. To disable password-based authentication sudo nano /etc/ssh/sshd_config that's gonna open up that file and look for PasswordAuthentication yes and set it to no then ctrl+x to exit > then press y for yes > then press enter.


Setting Up a Basic Firewall

1. sudo ufw app list - it will show available applications.

2. sudo ufw allow openssh- to allow it.

3. sudo ufw enable to enable the firewall, then press y to proceed.

4. sudo ufw status to check the status of what is currently active.


Setup Nginx

1. Run the below commands for setting up the Nginx server.

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

2. After running the last command, you should see the status with “active

3. And finally, go to a web browser and enter the URL http://dropletip-address You should see the default Nginx web page.


Deploy Angular application

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

2. Now we need to transfer dist folder content to the DigitalOcean droplet in the following path /var/www/html/

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

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

4. You should see your Angular application running!


Congratulations

We have deployed our Angular app on Digital Ocean successfully. Stay tuned for the next part where we will register the domain name for our app and set up HTTPS Digital Ocean Ubuntu Server.

Copyright © 2022 Oxvsys Automation Technologies Pvt. Ltd.