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:

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

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

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

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

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".

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:

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

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!

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.

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.

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)

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

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

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

Click on the "Connect" button on top left and choose SSH

Then you'll see this page.

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

ssh -i <private key path> azureuser@23.97.60.68

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

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

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

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

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

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

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

cd demoVM

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

Then type

npm start

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

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 -

Then this

sudo apt-get install -y nodejs

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
}

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

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

npm run build

And then start your app

npm start

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!

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"

You'll see something like this

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".

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

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

23.97.60.68:5000

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

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.

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 &

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 &

OR, in other words

nohup npm start > log.txt &

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

tail -f log.txt

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

It'll show you something like this

Then type this following command to kill it

kill YOUR_PID

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

kill 15134

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

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.

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

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

Now click "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