AWS Cost-Efficient Cloud Infrastructure
From Zero to Hero: Azure Web App Deployment for Newbies

From Zero to Hero: Azure Web App Deployment for Newbies

Uchechukwu Chinwe Nnaji's photo
Uchechukwu Chinwe Nnaji
·

6 min read

Set-Up Architecture

Microsoft Azure is like your friendly neighborhood cloud platform, offering a range of services to help you bring your digital dreams to life. One of its many talents is hosting web servers, providing a reliable home for your website or web application to flourish.

Deploying a web server on Microsoft Azure is a powerful way to host and manage your web applications in the cloud. Whether you're running a small personal blog or a large-scale enterprise application, Azure provides a flexible, scalable, and secure environment for your needs. By leveraging Azure's Virtual Machines (VMs) or App Services, you can quickly create a robust web server to deliver content and services globally.

This guide will take you step-by-step through the process of creating a web server on Microsoft Azure, from setting up a Virtual Machine, installing the necessary web server software, to configuring security settings and deploying your web application. Whether you're a beginner or an experienced developer, this guide will provide you with the knowledge needed to set up your web server and make it accessible to users around the world. Let's dive in and start building your web server on Azure!
Pre-requisites

Creating a Microsoft Azure account

To embark on your Azure adventure, you first need to create an account. It's like signing up for a gym membership, but instead of treadmills, you get virtual machines and cloud storage.

Exploring Azure pricing options

Before diving in headfirst, take a moment to explore Azure's pricing options. You don't want any surprises on your cloud bill. It's like checking the menu prices before ordering that fancy avocado toast.

1. Creating a Virtual Machine for Web Hosting

Time to get your hands dirty (virtually, of course) by launching a new Virtual Machine . Think of it as giving your web server its own little corner of the cloud to call home.

Step 1: Log In to the Azure Portal

  1. Access the Azure Portal:

    • Go to the Azure Portal and log in with your Azure account credentials.

2. Create a Virtual Machine

3.Create a New Resource:

  • Click on the Create a resource button in the top left corner of the Azure Portal.
  1. Select Virtual Machine:
  • Search for Virtual Machine in the search bar and select Virtual Machine from the list.

5. Configure the Virtual Machine:

  • Subscription: Choose your Azure subscription.

  • Resource Group: Create a new resource group or select an existing one.

  • Virtual Machine Name: Provide a name for your VM (e.g., myWebServer).

  • Region: Select the Azure region where you want to deploy the VM.

  • Availability Options: Choose the appropriate availability option (e.g., no infrastructure redundancy required).

  • Image: Select the operating system image for your web server (e.g., Ubuntu Server, Windows Server).

  • Size: Choose the size of the VM (select a size that matches your web server requirements).

  • Authentication Type: Choose SSH (for Linux) or RDP (for Windows) and provide credentials (username and SSH public key or password).

6. Networking Configuration:

  • In the Networking tab, ensure that a new Virtual Network and Subnet are created (or select an existing one).

  • Make sure that the Public IP is set to Enabled so you can access the VM over the internet.

  • Under Inbound Port Rules, select HTTP (80) and HTTPS (443) to allow traffic to the web server.

7.Review and Create:

  • Click on Review + Create to validate the configuration, and then click Create to deploy the VM.

8. Connect to the Virtual Machine

9. Obtain the Public IP Address:

  • Once the VM is created, go to the Virtual Machines section in the Azure Portal.

  • Select your VM, and under the Overview tab, note the Public IP address.

  1. Connect to the VM:

Step-by-Step Guide: Installing Web Server Software Using VS Code and GitHub

Pre-requisites

Azure Virtual Machine (VM): Ensure you have a Linux or Windows VM set up on Microsoft Azure.

VS Code Installed: Make sure Visual Studio Code is installed on your local machine.

Remote - SSH Extension: Install the Remote - SSH extension in VS Code.

GitHub Account: Have a GitHub account and a repository to store your web server configuration scripts.

SSH Key Pair: Your local machine must have an SSH key pair that is authorized to connect to the Azure VM.

Prepare Your GitHub Repository

Create a New Repository on GitHub:

Go to GitHub and create a new repository(e.g., web-server-setup).

1.Initialize it with a README.md file.

Create a Web Server Installation Script:

1.In the repository, create a new file

2.Add the installation script content:

For Linux (Apache web server):

sudo apt update

sudo apt install apache2 -y

sudo systemctl start apache2

sudo systemctl enable apache2

For Windows (IIS web server):
Install-WindowsFeature -name Web-Server -IncludeManagementTools

3.Commit the Script to GitHub:

  • Commit and push the script to your GitHub repository.

Connect to Your Azure VM Using Visual Studio Code

  1. Install the Remote - SSH Extension:

    • Open VS Code.

    • Go to the Extensions view (Ctrl+Shift+X).

    • Search for "Remote - SSH" and click Install.

  2. Add SSH Configuration for Azure VM:

    • Open the command palette in VS Code (Ctrl+Shift+P).

    • Type "Remote-SSH: Open SSH Configuration File" and select it.

    • Add the SSH configuration for your Azure VM:

Host myAzureVM

HostName <your-vm-public-ip>

User <your-vm-username>

IdentityFile <path-to-your-private-key>

  1. Replace <your-vm-public-ip> with your VM's public IP address, <your-vm-username> with the username, and <path-to-your-private-key> with the path to your SSH private key.

  2. Connect to Your VM:

    • In the command palette, type "Remote-SSH: Connect to Host..." and select your Azure VM.

    • A new VS Code window will open, indicating a successful connection.

Clone the GitHub Repository on Your VM

  1. Open the Terminal in VS Code:

    • In the connected VS Code window, open a new terminal by clicking on Terminal > New Terminal.

  2. Clone the GitHub Repository:

Replace <your-username> with your GitHub username.

  1. Navigate to the Repository Directory:

    • Run:

cd web-server-setup

Run the Installation Script

  1. Make the Script Executable (For Linux):

2. Run the Web Server Installation Script:

For Linux:
./install-web-server.sh

For Windows (PowerShell):
PowerShell -ExecutionPolicy Bypass -File .\install-web-server.ps1

3. Verify the Web Server Installation:

  • For Linux:

    • Check if Apache is running by visiting http://<your-vm-public-ip> in a web browser. You should see the Apache default page.

  • For Windows:

    • Check if IIS is running by visiting http://<your-vm-public-ip> in a web browser. You should see the IIS welcome page.

Commit Any Changes Back to GitHub (Optional)

  1. Make Changes to Configuration:

    • If you make any changes to your web server configuration files, you can commit them back to your GitHub repository:
      git add .

      git commit -m "Updated configuration files"

      git push origin main

      Open a browser and test the deployed web application using the IP address.

Conclusion

By following these steps, you can efficiently set up a web server on an Azure VM using Visual Studio Code and GitHub. This process leverages the power of VS Code's remote development features and GitHub's version control capabilities to manage and deploy your web server configurations with ease.