Deploying YouTube Clone on Azure using Azure DevOps - Part 1: Repository Setup and App Service Provisioning

I am having nearly 5 yrs of exp in DevSecOps and handling Cloud Deployment. I recently embarked on a journey to explore Azure and Azure DevOps. Coming from a background of AWS cloud and CI/CD solution wiz AWS DevOps, Gitlab CI/CD, I was curious to see how Azure’s offering compared.

This article documents my hands-on journey of deploying a React-based YouTube clone application using Azure services.

The Project: YouTube Clone

For this learning exercise, I chose to work with a YouTube Clone repository - a fully functional React website that mimics YouTube's interface. The beauty of this project is its simplicity: it's a complete working application without database dependencies, allowing us to focus entirely on the build and release pipeline aspects.

Step-by-Step Implementation Journey

Step 1: Forking and Local Setup

I started by forking the YouTube Clone repository to my GitHub account. This React-based project is perfect for our learning objectives.

git clone https://github.com/ashishaman13/Youtube_Clone_ashish.git 

cd Youtube_Clone_ashish

ls -la

Step 2: Azure DevOps Project Creation

1. Login to Azure DevOps: Navigate to dev.azure.com

2. Create New Project: I created a project named "YT-Clone"

3. Access Repositories: Click on "Repos" in the left sidebar

4. Create Repository: Azure will show you a new empty repository

Step 3: Repository Migration

git remote remove origin
git remote add origin https://dev.azure.com/YourOrg/YT-Clone/_git/YT-Clone
git push -u origin main

The Azure DevOps repository page shows exact commands to push existing code

Step 4: Azure App Service Provisioning

Now for the hosting infrastructure setup. In the Azure Portal, I navigated to App Services and clicked "Create."

Azure App Service Creation Options:

Azure presents several deployment options, each suited for different use cases:

• Web App: Standard web application hosting - perfect for our React application

• Static Web App: Optimized for JAMstack applications with global CDN and serverless APIs

• Web App + Database: Integrated solution with managed PostgreSQL/MySQL databases

• WordPress on App Service: Managed WordPress hosting with built-in optimizations

I selected "Web App" as it provides the flexibility and features needed for our React YouTube clone.

What is Azure App Service?

Azure App Service is Microsoft's fully managed Platform-as-a-Service (PaaS) for hosting web applications, REST APIs, and mobile backends. Think of it as Azure's answer to AWS Elastic Beanstalk, but with some enhanced features:

Key Features:

• Auto-scaling: Intelligent scaling based on metrics

• Deployment Slots: Built-in blue-green deployment capability

• Easy SSL: Free SSL certificates and custom domain support

• Multi-platform: Linux and Windows hosting options

• Container-ready: Native Docker and container registry integration

AWS Comparison: App Service is most similar to Elastic Beanstalk but offers more built-in DevOps features like deployment slots, which in AWS would require additional setup with CodeDeploy.

Configuration Decisions

The App Service setup was intuitive and self-guided:

• Runtime Stack: Node.js 18 LTS (for React build process)

• Operating System: Linux (cost-effective and performant)

• Pricing Tier: Free F1 tier (perfect for learning and testing)

Critical Decision: During setup, Azure offered GitHub Actions integration for automatic deployments. However, I deliberately disabled this option because our learning objective is to master Azure DevOps pipelines. While GitHub Actions would work seamlessly, using Azure DevOps end-to-end provides deeper insights into Microsoft's DevOps ecosystem.

What's Coming in Part 2

In the next part of this series, I'll dive deep into:

1. Azure DevOps Build Pipelines

   • Creating pipelines using Classic Editor (visual approach)

   • Building from scratch with YAML (infrastructure as code)

   • Comparing with AWS CodeBuild buildspec files

2. Release Pipeline Setup

   • Automated deployment to Azure App Service

   • Environment management and approval gates

   • Comparison with AWS CodeDeploy strategies