📘 Automating CI/CD with Azure DevOps: From Code to Deployment

In this guide, we’ll walk you through creating an Azure DevOps project, setting up a pipeline that triggers on code changes, and automatically deploying your application to an Azure Web App. This setup ensures that every time you update your code, a new build is triggered, and the latest version is deployed seamlessly.

---

Table of Contents

1. Create an Azure DevOps Project
2. Initialize a Git Repository
3. Add Sample Code
4. Create a Service Connection
5. Create the CI/CD Pipeline
6. Configure the Trigger for Code Changes
7. Deploy to Azure Web App
8. Run and Monitor the Pipeline
9. Conclusion

---

Step 1: Create an Azure DevOps Project

1. Go to the Azure DevOps Portal.
2. Sign in with your Microsoft account or create one if you don’t have it.
3. Click Create New Organization and set up your organization.
4. Create a new project:
   • Project Name: MyFirstDevOpsProject
   • Visibility: Private or Public
5. Click Create.

---

Step 2: Initialize a Git Repository

1. In your Azure DevOps project, navigate to Repos.
2. Click Initialize to create a new repository.
3. Clone the repository locally:
   bash

Copied!git clone <your-repo-url> cd MyFirstDevOpsProject</your-repo-url>
git clone <your-repo-url> cd MyFirstDevOpsProject

---

Step 3: Add Sample Code

Create a simple Node.js application:

1. Create index.js:
   bash

Copied!touch index.js
touch index.js

2. Add the following code:
javascript

Copied!const http = require('http'); 
const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain');
res.end('Hello, Azure DevOps CI/CD Pipeline!\n'); }); server.listen(3000, () => { console.log('Server running on http://localhost:3000'); });
const http = require('http'); 
const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain');
res.end('Hello, Azure DevOps CI/CD Pipeline!\n'); }); server.listen(3000, () => { console.log('Server running on http://localhost:3000'); });

3. Commit and push the changes:
bash

Copied!git add index.js 
git commit -m "Add sample Node.js application" 
git push origin main
git add index.js 
git commit -m "Add sample Node.js application" 
git push origin main

---

Step 4: Create a Service Connection

A Service Connection allows Azure DevOps to securely connect and deploy to your Azure resources.

Steps to Create a Service Connection:

1. Navigate to Project Settings:
   • Go to your Azure DevOps project.
   • Click Project Settings (gear icon at the bottom left).
2. Create a New Service Connection:
   • Under Pipelines, select Service Connections.
   • Click New Service Connection > Azure Resource Manager.
3. Fill in the Details:
   • Scope Level: Select Subscription.
   • Subscription: Choose your Azure Subscription.
   • Resource Group: Select the relevant Resource Group or leave it as All Resource Groups.
   • Service Connection Name: e.g., my-azure-connection.
   • Grant Access Permission: Check Grant access permission to all pipelines.
4. Save the Service Connection.

Now your pipeline can authenticate and deploy to Azure using this connection.

---

Step 5: Create the CI/CD Pipeline

1. In Azure DevOps, go to Pipelines > New Pipeline.
2. Select Azure Repos Git and choose your repository.
3. Select Starter Pipeline.
4. Replace the content with the following azure-pipelines.yml:
   yaml

Copied!trigger:
  branches:
    include:
      - main
  paths:
    include:
      - '**/*.js'
      - '**/*.json'

pool:
  vmImage: 'ubuntu-latest'

steps:
  - task: ArchiveFiles@2
    inputs:
      rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
      includeRootFolder: false
      archiveType: 'zip'
      archiveFile: '$(Build.ArtifactStagingDirectory)/app.zip'
      replaceExistingArchive: true

  - task: AzureWebApp@1
    inputs:
      azureSubscription: 'my-azure-connection'  # Replace with your Service Connection name
      appName: 'APPDevOps'                   # Replace with your Web App name
      package: '$(Build.ArtifactStagingDirectory)/app.zip'
trigger:
  branches:
    include:
      - main
  paths:
    include:
      - '**/*.js'
      - '**/*.json'

pool:
  vmImage: 'ubuntu-latest'

steps:
  - task: ArchiveFiles@2
    inputs:
      rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
      includeRootFolder: false
      archiveType: 'zip'
      archiveFile: '$(Build.ArtifactStagingDirectory)/app.zip'
      replaceExistingArchive: true

  - task: AzureWebApp@1
    inputs:
      azureSubscription: 'my-azure-connection'  # Replace with your Service Connection name
      appName: 'APPDevOps'                   # Replace with your Web App name
      package: '$(Build.ArtifactStagingDirectory)/app.zip'

5. Save and Run the pipeline.

---

Step 6: Verify the Trigger for Code Changes

The trigger section in the pipeline ensures that builds are triggered automatically when specific files are changed:

yaml

Copied!trigger:
  branches:
    include:
      - main
  paths:
    include:
      - '**/*.js'      # Trigger on changes to JavaScript files
    exclude:
      - README.md      # Exclude changes to README files
trigger:
  branches:
    include:
      - main
  paths:
    include:
      - '**/*.js'      # Trigger on changes to JavaScript files
    exclude:
      - README.md      # Exclude changes to README files

This ensures the pipeline runs when you update files like index.js.

---

Step 7: Deploy to Azure Web App

Create an Azure Web App

1. Go to the Azure Portal.
2. Navigate to Create a Resource > Web App.
3. Fill in the following details:
   • Name: APPDevOps
   • Runtime Stack: Node 20 LTS
   • Region: Choose the closest region.
4. Click Create.

Your Azure Web App is now ready to receive deployments.

---

Step 8: Run and Monitor the Pipeline

1. Make a change to index.js:
   bash

Copied!echo "console.log('New deployment triggered!');" >> index.js
echo "console.log('New deployment triggered!');" >> index.js

1. Commit and push:
   bash

Copied!git add index.js
git commit -m "Update index.js with new changes"
git push origin main
git add index.js
git commit -m "Update index.js with new changes"
git push origin main

1. Go to Pipelines > Runs in Azure DevOps.
2. Monitor the build and deployment process.
3. Once complete, visit your Azure Web App URL:
   arduino

Copied!https://<your-webapp-name>.azurewebsites.net</your-webapp-name>
https://<your-webapp-name>.azurewebsites.net

---

Conclusion

What We Achieved

1. Created an Azure DevOps Project.
2. Initialized a Git Repository and added sample code.
3. Created a Service Connection to securely deploy to Azure.
4. Configured a CI/CD Pipeline that:
   • Automatically triggers on code changes.
   • Archives the application files.
   • Deploys the updated code to an Azure Web App.

This streamlined workflow ensures your latest code is deployed seamlessly with minimal manual intervention. Happy DevOps-ing!