In this blog, I will guide you through the process of setting up a DevOps environment using Microsoft Azure, specifically focusing on deploying a pre-existing open-source website. As a beginner, it's important to understand how to work with existing code and deploy it effectively. We'll start by creating an Azure virtual machine (VM) that will serve as our hosting infrastructure. Azure offers an intuitive interface for provisioning VMs, making it easy for beginners to get started. Once our Azure VM is up and running, we'll move on to installing Nginx, a popular web server, to handle the website deployment efficiently.
With our Azure VM and Nginx in place, we can proceed to deploy the open-source website. We'll explore how to clone the website's code from a repository, ensuring we have all the necessary files to run it. Then, we'll copy the code to our Azure VM and configure Nginx to serve the website to visitors. Throughout this blog, I will provide step-by-step instructions and practical insights, focusing on the deployment process for beginners. By following along, you'll gain hands-on experience in deploying open-source websites on Azure with Nginx, helping you develop a solid foundation in DevOps practices.
Creating a VM
To begin, let's provide some essential details for setting up our server. We'll need to choose a name for our server that is easy to remember and identify. For the server's location, we'll select Central India as the region where our server will be located.
Next, we'll need to decide on the amount of RAM for our server. RAM, or memory, impacts the performance of our server, so we'll select an appropriate size based on our needs and the expected workload.
To keep things organized, we'll create a new resource group. Think of a resource group as a folder that holds all the information and settings for our server. It's a convenient way to manage and access the details of our server in one place.
By providing these details and creating a resource group, we'll be ready to proceed with setting up our server and deploying our website
To get started, we need to provide a username of our choice. Think of it as your unique identifier when accessing the server. Next, in the SSH public key source, we'll select "Generate new key pair." This generates a password-like file called a pem file, which Azure will create for us. This pem file acts as a security measure, allowing only those who possess it to access our server. By generating the new key pair, Azure knows to create a pem file with the name we specified, such as "sagar-azure-psnl." We'll then download this pem file, which contains the password generated by Azure, enabling us to open our server and establish a secure connection.
Allowing PORTS
Keep everything default
After creating resources it is showing like this
Accessing VM using Ubuntu Terminal
Now time to connect with Instance and I using Ubuntu Terminal
After entering into any server we will always first update and upgrade the machine by running the commands
sudo apt update
sudo apt upgrade
Installing Nginx
sudo apt install nginx
sudo service nginx start
Great, our website is now live and ready to be viewed. To see it in action, we'll need to copy the Public IP address from the Azure console and paste it into our web browser. By doing so, we'll be able to access the Nginx page, which confirms that our website is up and running smoothly.
I don't want this default Nginx page, I am going to replace this with an open-source landing page.
Deploying Website
Go to the root user first
sudo su
Go to the root path by running
cd
Go to the path where the current Nginx html file is located
cd /var/www/html
Now type ls to see what is present in that path
ls
You can see I have highlighted the HTML file of Nginx below -
Now remove this file by running
rm /var/www/html/index.nginx-debian.html
Now you have to clone my code in your server, just run the below code it will copy itself.
git clone https://github.com/BroDevOps/Portfolio-page.git
You can fork my repo and change the code according to you!!
You made it
Now go to your browser and type your public IP address and put slash Portfolio-page/
It should look like " your IP address/Portfolio-page"
Now your Website will look like this -
Thank you for reading my blog, and I hope you find it informative and inspiring. If you have any feedback or questions, please feel free to reach out. Happy monitoring!
Thank you for reading my blog.