DEV Community

Cover image for In depth tutorial on deploying to Azure by SilvenLEAF
SilvenLEAF
SilvenLEAF

Posted on • Updated on

In depth tutorial on deploying to Azure by SilvenLEAF

Ahoy there! Another step onto the DevOps World! Let's deploy our App to cloud. We'll be using azure here! Really excited to learn about Azure VM and deployment!!

Step 0: Create a VM

To deploy to azure, first create a free azure account if you don't have one! You'll see something like this when you log in:

Azure Dashboard

Click on the "Virtual machines". If you don't see it listed there, search it on the search bar (situated on top).

Search Virtual machines

It's the top result here. Once you click it, you'll see something like this:

Virtual machines page

Click on the create button and you'll see 2 options.

Click create

Click "Virtual machine" and you'll see something like this:

Create VM 1

Choose your subscription. Now, here we are only interested in these fields

  1. Virtual machine name
  2. Image
  3. Size
  4. Authentication type
  5. Username
  6. SSH public key source
  7. Key pair name
  8. Select inbound ports

We'll keep everything else default.

Anyway, let's go one by one.

Sub-Step 1: Subscription

Choose your subscription from the dropdown. For "Resource Group", keep it default. One thing to note is that, since we didn't choose any Resource Group, it's going to create one for us (in this case named "DemoVM_group". This name was given automatically).

Sub-Step 2: Virtual machine name

Give a name of your Virtual machine. I gave "DemoVM".

Choose a different region if you wish to. We're gonna leave everything default.

Sub-Step 3: Image

For "image", We are choosing "Ubuntu". It's already chosen by default so you don't have to do anything. Just note that it'll be the OS of the VM. You can choose Debian, Red hat, Windows or whatever you want. I prefer "Ubuntu".

Create VM 2

Sub-Step 4: Size

Now the MOST Dangerous part!! Be VERY CAREFUL HERE!! Choose the size as cheap as possible. Because we are using it only for learning purposes and we don't have to buy an expensive one. Click the dropdown and it'll open up something like this:

Create VM 3

Click on "see all sizes" and you'll see this page.

Create VM 4

Click on the "Cost/month" tab to sort them based on cost. Select the cheapest one and click "Select". (I selected the "$4.82" option)

The only important part is that you don't accidentally select a costly one. As long as you are careful here, it's ok.

Sub-Step 5: Authentication type

There are 2 types of authentication that you can choose. We are going to choose "SSH public key". See that the azure will automatically create the SSH Key pair for you!

Create VM 5

Now give a username on the "Username" field.

For the "SSH public key source" field, we'll use the default "Generate new key pair" option. But if you want to use an existing one, you can select that from this dropdown. But for now, we are gonna select this so that Azure creates a new pair for us.

Now, give a key pair name for your SSH key on the "Key pair name" field. (I gave "DemoVM_key")

For "Select inbound ports" field, make sure that it's chosen "SSH (22)"

Once all that done, click the "NEXT: something" button. You'll see another page, keep clicking "NEXT:something" button until you reach the review page. We don't have to change anything else. Let's keep everything as default.

Create VM 6

Once you reach the Review Page, make sure everything you chose are ok. Then click the "Create" button.

You'll be prompted with this. Click on the "Download private key and create resource" to dowload the key that azure generated for you and create the resource. Wait a while and it'll download that ssh file and also create the VM.

Create VM 7

Step 2: Log into the VM

Once the previous step is done, open your terminal in the folder where the SSH secret key is.

NOTE: After downloading that SSH secret file, it was inside the "downloads" folder. I moved it into the "Blogs" folder and opened my terminal there (git bash in this case, you can use any terminal)

File manager

Type "ls" command in your terminal to make sure you have the file there.

Terminal

Now let's go back to the VM in the Azure Portal. In the last step, after clicking that button, it'll start creating and deploying that VM. Once done, you'll see this page

Open VM 0

Click "Go to resources" button and you'll come here

Open VM 1

Click on the "Connect" button on top left and choose SSH
Open VM 2

Then you'll see this page.

Open VM 3

Copy the command on 4th section. This one I meant

ssh -i <private key path> azureuser@23.97.60.68
Enter fullscreen mode Exit fullscreen mode

In this case, "azureuser" is our username and the last part is the IP address of the VM.

Now remember we opened our terminal where the SSH Key was. Go to that terminal and paste this command. Replace the "<private key path>" with the SSH private key name there. It'll look something like this

ssh -i DemoVM_key.pem azureuser@23.97.60.68
Enter fullscreen mode Exit fullscreen mode

Type it and hit enter. You'll be asked this

Are you sure you want to continue connecting (yes/no/[fingerprint])?
Enter fullscreen mode Exit fullscreen mode

Terminal VM 1

Type yes and hit enter. You'll get inside the VM. It'll look something like this

Terminal VM 2

Yippie!! We are inside the VM. Now let's host our web app.

Step 3: Host our APP

You must have a project repo to host I suppose. Clone the repo inside the VM. (Same as how you clone it in your computer). Note, the VM is just a computer but hosted somewhere else and you can access it.

git clone https://github.com/SilvenLEAF/demoVM.git
Enter fullscreen mode Exit fullscreen mode

NOTE: This repo doesn't exist anymore. So, Use your own Project repo.

once done, type "ls" to see your repo there, and "cd" into it.

ls
Enter fullscreen mode Exit fullscreen mode

It'll show that my demoVM repo is there. Now let's go inside it

cd demoVM
Enter fullscreen mode Exit fullscreen mode

Great! Type "ls" again to see its content. See, all your source code is there.

Now, note, I cloned my JavaScript project (It can be NodeJS or React or TypeScript or anything). So to run a nodejs project what do we type? We first install the packages with

npm install
Enter fullscreen mode Exit fullscreen mode

Then type

npm start
Enter fullscreen mode Exit fullscreen mode

Right? But just like my Laptop, this VM computer doesn't come with NodeJS installed. So let's install it.

Checkout this link to learn more about how to install nodejs into the VM.

https://github.com/nodesource/distributions/blob/master/README.md

Install NodeJS in Ubuntu

Since we are using "Ubuntu" in our VM, we'll use the command for "Ubuntu". (See that above link). Let's download Node.js v17.x. Type this

curl -fsSL https://deb.nodesource.com/setup_17.x | sudo -E bash -
Enter fullscreen mode Exit fullscreen mode

Then this

sudo apt-get install -y nodejs
Enter fullscreen mode Exit fullscreen mode

Sweet! It'll install NodeJS and with NodeJS we get npm for free. Now let's run our app.

Assuming in you "package.json" file you have these scripts

{
  ...other package.json stuff
  "scripts": {
    "start": "YOUR_START_SCRIPT",
    "build": "YOUR_BUILD_SCRIPT",
  },
 ...other package.json stuff
}
Enter fullscreen mode Exit fullscreen mode

NOTE: You start your app the same way you start it in your computer. The VM is just a computer that you can access.

So, inside our project repo, type this

npm install
Enter fullscreen mode Exit fullscreen mode

Then type this build command, only if your project has this commmand

npm run build
Enter fullscreen mode Exit fullscreen mode

And then start your app

npm start
Enter fullscreen mode Exit fullscreen mode

NOTE: If you are using python or anything else, then you might have your own command to start the app, like "python app.py" or something. So simply start your app the way you start it on your computer.

Great!! Our app is running in that VM, just like how we ran in our computer (localhost). But great part, this computer (VM) can be accessed by anyone in the world and we can see it live!! Great!

App running on VM

Step 4: Access our App from anywhere

Well, we started our Server there. But how to access it from anywhere? Currently our app is running on port 5000 and it is not open for the world. So, let's open it up for the world!!

Go to your VM on Azure Portal and click on the "netoworking" tab on the left. And then click on "Add inbound port rule"

VM Network Tab

You'll see something like this
Add inbound rule 1

Provide your port, I gave "5000" because that is where our app is running. Then give it a name. I gave "Port_5000_For_The_World".

Add inbound rule 2

Now save it. Great!! Now let's access our app. Do you remember how we access the app in our computer? We go to "localhost:PORT", right? If it was on our computer, we would have gone here "localhost:5000". Where localhost is our computer's IP address (which is infact 127.0.0.1.). So let's replace this localhost with our VM computer's IP address. What was it do you remember? It was also mentioned in that ssh command

ssh -i DemoVM_key.pem azureuser@23.97.60.68
Enter fullscreen mode Exit fullscreen mode

The part after @ is the IP address of the VM. So after replacing the localhost we get

23.97.60.68:5000
Enter fullscreen mode Exit fullscreen mode

Great!! Open your browser and go here. What do you see?

Live Website

Yay!! Our LIVE website!! Now, share this address with anyone in the world, and they can access it.

NOTE: When you buy a Domain name, let's assume it's "DemoVm.com", and map it to this IP address, then anyone can access it with this DemoVM.com URL.

Well anyway, now let's close up everything. Let's close the VM terminal where this app is running. Now try accessing it again.

Site can't be reached

What? So, whenever you close that terminal, everything that was running on it stops as well. So how to fix it? Because we can't keep our PC running for the rest of our life right?

Easy Peasy!! Prefix your command with "nohup" and end it with "&".

nohup npm start &
Enter fullscreen mode Exit fullscreen mode

Now even if you close your terminal or cancel out this command, it'll still be running on the background. So now shut down your own computer and you'll still see your app running live!

Bonus Step

Now what if you want to track all the logs (useful for storing error logs)? I mean save all your console.log() output in a file (or print() in other languages)? Easy as a cake! Yummy!! I just got hungry!!

nohup COMMAND > FILE &
Enter fullscreen mode Exit fullscreen mode

OR, in other words

nohup npm start > log.txt &
Enter fullscreen mode Exit fullscreen mode

Great!! Now what if you want to see the log file? Easy

tail -f log.txt
Enter fullscreen mode Exit fullscreen mode

By the way, after using that "nohup npm start &", our app was running on the background, and even if we closed the terminal or exited out of the process it was still running. What if you wanted to stop it from running?

Type this command to get the list of all processes that are running on a particular PORT on the background. I gave 5000 because that's our PORT. You can replace 5000 with any port number.

sudo lsof -iTCP:5000 -sTCP:LISTEN
Enter fullscreen mode Exit fullscreen mode

It'll show you something like this

Get running process

Then type this following command to kill it

kill YOUR_PID
Enter fullscreen mode Exit fullscreen mode

In our case, the PID is 15134, so the command will be

kill 15134
Enter fullscreen mode Exit fullscreen mode

Now, after killing it, try visiting your app again.

Site can't be reached

Voila!! It was successfully killed!!

Step 5: Clean up

Now that we learnt how to deploy to azure! Let's delete everything and clean up so that we don't get charged for anything haha!!

Close your terminal and go to your VM on Azure portal.

Open VM 1

Click on the "Overview" tab, and click on the "Delete" Button. It'll prompt you to confirm. Click "Ok".

Now click on the very top left "Microsoft Azure" Button. You'll come here

Azure Homepage

Click on our resource group that was created for our VM (In our case it is "DemoVM_group")!

Resource Group

Now click "Delete resource group".

Confirm Delete resource group

You'll be prompted to type the resource group name to confirm the deletion. Type it and click "Delete"

It'll take a while and then delete everything!! Yay, now everything is cleaned and we got nothing to pay for anymore!!

NOTE: Even if you did not delete that VM, you only have to delete this Resource group. And it'll delete everything that we created, including the VM.

Oh boy that was exciting, right?

What's NEXT?

1. Learning DevOps with Github Actions

2. More on DevOps

3. Improved AI BOT that can do anything

4. Insane stuff with JavaScript/TypeScript

5. Debugging TypeScript with VS Code Debugger

6. Sequelize Hooks

7. How to create an Android APP with NO XP

(including apk generating)

Got any doubt?

Drop a comment or Feel free to reach out to me @SilveLEAF on Twitter or Linkedin

Wanna know more about me? Come here!
SilvenLEAF.github.io

Discussion (0)