Implementing a Distributed, Multi-Regional Web Architecture on Azure

Azure Administrator Capstone Project Az-104

You work as an Azure professional for a Corporation. You are assigned the task of implementing the below architecture for the company’s website.
There are three web pages to be deployed:

1. The home page is the default page (VM2)
2. The upload page is where you can upload the files to your Azure Blob Storage (VM1)
3. The error page for 403 and 502 errors

Application Gateway has to be configured in the following manner:

1. Example.com should be pointed to the home page
2. Example.com/upload should be pointed to the upload page
3. Application Gateway’s error pages should be pointed to error.html which should be hosted as a static website in Azure Containers. The error.html file is present in the GitHub repository

The term ‘Example’ here refers to the Traffic Manager’s domain name. The client wants you to deploy them in the East US and the West US regions such that the traffic is distributed optimally between both regions.

Storage Account has to be configured in the following manner:

1. You need to host your error.html as a static website here, and then point the application gateway’s 403 and 502 errors to it.
2. Create a container named upload, this will be used by your code to upload the files.

Technical specifications for the deployments are as follows:

1. Deployments in both regions should have VMs inside VNets.
2. Clone the GitHub repo azproject to all the VMs.
3. On VM1, please run vm1.sh this will deploy the upload page, on VM2 please run VM2.sh, this will install the home page.
4. For running the scripts, please run the following command inside the GitHub directory from the terminal. VM1: ./vm1.sh VM2: ./vm2.sh
5. After running the scripts, please edit the config.py file on VM1, and enter the details related to your storage account where the files will be uploaded.
6. Once done, please run the following command: sudo python3 app.py
7. Both regions should be connected to each other using VNet-VNet Peering.
8. Finally, your Traffic Manager should be pointing to the application gateway of both the regions.

---

Creating VNets §

Create two Virtual Networks (VNets), one in the East US region (Vnet 1) and one in the West US region (Vnet 2).

While creating the VPC, I enable the option to create a Bastion host.

Success

---

Creating VMs §

In each VNet, deploy two Virtual Machines (VMs) - VM1 and VM2.

West US	East US
VM1	VM1
VM2	VM2

Success

---

Using “storage account” hectorstorage12345

• I create a ‘upload’ container with blob access.
  

I download error.html file that renders

I upload error.html to “Static website”

I click ‘Save’ and then receive the endpoints.

I click $web

I make note of the “Primary endpoint”

https://hectorstorage12345.z1.web.core.windows.net/

Success

---

Creating gateways §

app-gate-west-us §

Basics:

Frontends:

I “Add new” Public IP

Backends:

Configuration:

I use the “Primary endpoint” with /error.html at the end

• Listener
  

• Backend targets

  Pool1 is created with VM1 added as a node.
  

  Pool2 contains VM2, which hosts the home page, positioned at the top.
  

Review + create

app-gate-east-us §

Basics:

Frontends:

I “Add new” Public IP

Backends:

Configuration:

I use the “Primary endpoint” with /error.html at the end

• Listener
  

• Backend targets

  Pool1 is created with VM1 added as a node.
  

  Pool2 contains VM2, which hosts the home page, positioned at the top.
  

Review + create

Gateways

---

Configure VMs §

VM1 §

Prerequisite: before running vm1.sh

sudo apt remove python3-blinker -y
sudo apt autoremove -y

I run the script vm1.sh

git clone https://github.com/hectorproko/azproject.git
cd azproject
bash vm1.sh

Inside my local repo azproject I edit file config.py

[DEFAULT]
# Account name
account =accountname
# Azure Storage account access key
key =storageaccountkey
# Container name
container =upload

I replace account name and key with the following commands:

sed -i "s|accountname|hectorstorage12345|" config.py
sed -i "s|storageaccountkey|*********|" config.py

********* represents my storage account key

I execute the Flask application app.py:

sudo python3 app.py

VM2 §

I run the script vm2.sh

git clone https://github.com/azcloudberg/azproject
cd azproject
bash vm2.sh

---

I create traffic manager §

Traffic Manager Endpoints §

I go to my Traffic Manager and navigate to “Endpoints” where I click ”+ Add”

At some point, the public IP of the gateway will need to be assigned a DNS name.

Traffic Manager with endpoints I make note of the “DNS name”

Verify §

I use the “DNS name” from above
I test the path /upload

I upload a file and click “Upload” button

If I navigate to my upload container, I see the file I just uploaded.

Success

Create VNet peering §

I follow the same steps as in Assignment 1: Module 6

Success

I ping each VM in different regions to each other.