Azure Practice Day 1

#azuredevops #devops #cicd #azure

Project Setup –
1. Cloning the Repo

Steps in VS Code

git init
git clone <GitHub-repo-URL>
cd <repo-folder>

Source code is now available locally
Next steps:
Install npm dependencies
Build project
Deploy via Azure Web App

*Step 2: Create Azure DevOps Project *

Go to https://dev.azure.com
Click New Project
Give Project Name:
Project created successfully

*Step 3 : Push Code to Azure Repos *

*Step 4: Azure App Service – Hosting the Application *

Create Web App

Go to: https://portal.azure.com
Search App Services
Click Create → Web App

Configuration Details

Subscription
Resource Group
App Name
Publish
Runtime Stack
Version
OS
Region
Select App Service Plan

Verify App
Click Browse
Default Azure App Service page appears (no code deployed yet)

Step 5: Build Pipeline – Classic Editor

-Create Pipeline

Azure DevOps → Pipelines → Create Pipeline
Select Use Classic Editor

Pipeline Tasks

1️⃣ npm install

Task: npm
Command: install
Working Directory: root

2️⃣ npm build

Task: npm
Command: custom run build

3️⃣ Publish Build Artifacts

Task: Publish Build Artifacts
Path: build
Artifact Name: drop

4️⃣ Azure App Service Deploy

Task: Azure App Service Deploy
Service Connection: Authorize (creates Service Principal)
App Type: Web App on Linux
App Name: Created App Service
Package: build
Runtime Stack: Static Site

Step 6:
Go to
App Service → Configuration → Application Settings

Add:

Key	Value
WEBSITE_DYNAMIC_CACHE	0
CACHE_OPTION	never

Save → Restart App Service

✔ App loads successfully

*YAML Pipeline – From Scratch *
YAML Pipeline Code :

trigger:
- main

stages:
- stage: Build
  jobs:
  - job: BuildJob
    pool:
      vmImage: ubuntu-latest
    steps:
    - task: Npm@1
      inputs:
        command: install

    - task: Npm@1
      inputs:
        command: custom
        customCommand: run build

    - task: PublishBuildArtifacts@1
      inputs:
        pathToPublish: build
        artifactName: drop

- stage: Deploy
  jobs:
  - job: DeployJob
    pool:
      vmImage: ubuntu-latest
    steps:
    - task: DownloadBuildArtifacts@0
      inputs:
        artifactName: drop

    - task: AzureWebApp@1
      inputs:
        appType: webAppLinux
        appName: <App-Service-Name>
        package: $(System.DefaultWorkingDirectory)/drop/build
        runtimeStack: STATIC

Final Result