In depth tutorial on deploying to Azure by SilvenLEAF
Tags: javascript, typescript, webdev, silvenleaf
Published: 2021-11-09 13:55:23

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpsjpx0bhx3hcq2gz763.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sic9489gpi1oygh4depp.png)

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

![Virtual machines page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozovv3q8tirthc7izf28.png)

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

![Click create](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p53xg5w8pfnxnweps34x.png)

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

![Create VM 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsv9hok1752hjswvyqpd.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/te56gcewxz8lywltl5cp.png)


##### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kju1ql9hr2swc37dtqab.png)

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

![Create VM 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwi8s9hha6gnky5k6ovv.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9agc9mrn34jkwqd38ds.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1selhijsll5uxkixwi5w.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mom8lmlcce8f4et11xt.png)



### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8r4gzxqvmhhyc644inh.png)

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

![Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hd2hgrkipywzacc71pe8.png) 

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbxjtu5ewxnvc7jj9ols.png)

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

![Open VM 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wt3hw1tlnst9yfqq1os.png)

Click on the **"Connect"** button on top left and choose SSH
![Open VM 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a31eh279yop34zy5yntz.png)

Then you'll see this page.

![Open VM 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gynyarp4qet6dsh1r5e7.png)

Copy the command on 4th section. This one I meant
```bash
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
```bash
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])?
```

![Terminal VM 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yd6fcbbs793sgqieyamd.png)

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

![Terminal VM 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32bs69kdhcwa8jwbxjem.png)

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.

```bash
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.
```bash
ls
```
It'll show that my demoVM repo is there. Now let's go inside it
```bash
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 
```bash
npm install
```
Then type 
```bash
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](https://github.com/nodesource/distributions/blob/master/README.md)

![Install NodeJS in Ubuntu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhweb9g69r2p31uynabb.png)

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
```bash
curl -fsSL https://deb.nodesource.com/setup_17.x | sudo -E bash -
```
Then this
```bash
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
```json
{
  ...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
```bash
npm install
```
Then type this build command, only if your project has this commmand
```bash
npm run build
```
And then start your app
```bash
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!

![App running on VM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrgei4qrbieodsxwbsod.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jsyg1okoagm53us70tj.png)

You'll see something like this
![Add inbound rule 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcla84uy9u3m8uc76tcu.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weglch5dxbv4fghvfp17.png)

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
```bash
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?

![Live Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uastrx6sdb26qz3ah436.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wl542zx60j45gg8nv48.png)

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 **"&"**.
```bash
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!!
```bash
nohup COMMAND > FILE &
```
OR, in other words
```bash
nohup npm start > log.txt &
```
Great!! Now what if you want to see the log file? Easy
```bash
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

![Get running process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gewm05danfqlcmvd34tq.png)

Then type this following command to kill it

```bash
kill YOUR_PID
```

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

```bash
kill 15134
```
Now, after killing it, try visiting your app again.

![Site can't be reached](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wl542zx60j45gg8nv48.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wt3hw1tlnst9yfqq1os.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2iq86yyrsyl110e3scsr.png)

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

![Resource Group](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h86z7mlcrglcdvzmw4ff.png)

Now click **"Delete resource group"**.

![Confirm Delete resource group](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yy7y4c53u2x1n266mewu.png)

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](https://www.linkedin.com/in/silvenleaf/)

Wanna know more about me? Come here! 
[SilvenLEAF.github.io](https://SilvenLEAF.github.io)