Post

Day-2 - Azure DevOps CI-CD Tour

Day 2: Azure DevOps CI/CD Tour


1. Introduction to CI/CD

What is CI/CD?

  • Continuous Integration (CI): A practice where developers frequently merge code changes into a central repository. Every commit triggers automatic builds and tests to ensure code quality.

  • Continuous Deployment (CD): Extends CI by automatically deploying tested code changes into production environments.

Key Points to Remember:

  • CI helps in improving code quality through automated builds and tests.
  • CD ensures quicker, more reliable deployments by automating the deployment pipeline.

2. Deploying a Portfolio Website to Azure Web App

Step-by-Step Guide:

  1. Create an Azure Web App:
    • Go to Azure Portal.
    • Navigate to App Services → Create.
    • Fill out the required details (Subscription, Resource Group, App Name, etc.) and choose your desired runtime stack (e.g., Node.js, Python).
    • Review the settings and click Create to provision the Web App.
  2. Set Up GitHub Actions for CI/CD:
    • Go to your GitHub Repository and navigate to the Actions tab.
    • Select a template for Azure Web App deployment from GitHub Actions Marketplace.
    • Modify the workflow YAML file to include steps like:
      • Authentication to Azure.
      • Building and deploying the code to the Azure Web App.

Example YAML for GitHub Actions: yaml name: Deploy to Azure Web App

on: push: branches: - main

jobs: build: runs-on: ubuntu-latest

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
steps:
- name: Checkout code
  uses: actions/checkout@v2

- name: Set up Azure CLI
  uses: azure/setup-azure-cli@v1

- name: Login to Azure
  uses: azure/login@v1
  with:
    creds: $

- name: Deploy to Azure Web App
  uses: azure/webapps-deploy@v2
  with:
    app-name: 'YourAppName'
    slot-name: 'production'
    package: '$(System.DefaultWorkingDirectory)/your-app-folder'
  1. Commit and Trigger the Workflow:
    • Once the workflow file is set up, commit the changes and push them to GitHub.
    • Go to the Actions tab in your GitHub repo to see the build and deployment process.

3. Setting Up a Custom Domain on Azure Web App

Steps:

  1. In the Azure Portal, go to your **Web App.
  2. Under Custom Domains, click **Add Custom Domain.
  3. Follow the instructions to:
    • Verify domain ownership (by adding a CNAME or A record in DNS settings at your domain registrar).
    • Point your custom domain to the Azure Web App.

Important Points:

  • DNS settings are crucial for linking your domain to Azure Web App.
  • It may take some time for DNS changes to propagate.

4. Importing Your Project into Azure DevOps

  1. Create an Azure DevOps Organization:
    • Go to Azure DevOps, sign in, and create a new organization.
    • Set up a new Project in Azure DevOps.
  2. Import Your GitHub Repository:
    • In the Repos section of your Azure DevOps Project, click on Import Repository.
    • Paste the URL of your GitHub repository and click Import.

Key Takeaways:

  • Azure DevOps integrates well with GitHub for version control and continuous integration workflows.
  • You can manage your project lifecycle directly in Azure DevOps.

5. Summary of Key Concepts

  • CI/CD Pipelines: Automating code integration, testing, and deployment ensures faster development cycles and higher quality software.

  • GitHub Actions: GitHub Actions helps automate deployment tasks such as build, test, and deployment.

  • Azure Web Apps: A scalable platform to deploy web applications in the cloud with easy integration of custom domains.

  • Azure DevOps: A comprehensive tool for managing the end-to-end software development lifecycle, including code versioning, builds, releases, and project management.


6. Next Steps:

  • Practice:
    Try deploying your own website using the GitHub Actions workflow and setting up a custom domain on Azure Web App.

  • Keep Learning:
    Refer to the Azure DevOps and GitHub Actions documentation to explore additional features like testing automation, artifact management, and security best practices.


Resources for Further Learning:


Like, Share & Subscribe Now

Follow our Creators

Join Our Exclusive Community

Follow us on Social Media

Our Website: Visit us

This post is licensed under CC BY 4.0 by the author.