AZURE, DEVOPS & CI/CD

 Azure

What is Azure?
  • Azure is Microsoft’s cloud computing platform, offering a wide range of services like virtual machines, storage, databases, and hosting solutions (e.g., Static Web Apps, Blob Storage).
  • For this context, Azure provides the infrastructure to host your Angular 14 application (e.g., via Static Web Apps or Blob Storage) and integrates seamlessly with Azure DevOps.
Why Use Azure?
  • Scalability: Easily scale your app as traffic grows without managing physical servers.
  • Cost-Effective: Pay only for what you use (e.g., storage or compute resources).
  • Integration: Works natively with Azure DevOps for CI/CD, simplifying deployment workflows.
  • Reliability: Offers high availability and global CDN support for fast content delivery.
  • Static Hosting: Services like Static Web Apps or Blob Storage are perfect for Angular apps, which compile to static HTML/CSS/JS files.
How Does Azure Fit into CI/CD?
  • Azure serves as the deployment target. After your Angular app is built in Azure DevOps, it’s deployed to an Azure service (e.g., Static Web App or Blob Storage).
  • Example: You build your Angular app in a pipeline, and Azure hosts the dist/ folder as a live website.
2. Azure DevOps
What is Azure DevOps?
  • Azure DevOps is a set of development tools and services for managing software projects, including:
    • Repos: Git repository hosting.
    • Pipelines: CI/CD automation for building, testing, and deploying code.
    • Boards: Agile project management.
    • Artifacts: Package management.
  • For your Angular 14 project, we primarily use Azure Pipelines to automate CI/CD.
Why Use Azure DevOps?
  • Automation: Automatically build, test, and deploy your code on every commit, reducing manual errors.
  • Collaboration: Teams can track changes and deployments in one platform.
  • Flexibility: Supports any language/framework (like Angular) and integrates with Azure or other clouds.
  • Visibility: Provides logs, history, and status of builds/deployments for troubleshooting.
  • Free Tier: Offers free CI/CD minutes for small projects, making it accessible.
How Does Azure DevOps Enable CI/CD?
  • CI (Continuous Integration): Azure DevOps builds and tests your Angular app whenever code is pushed to the repository.
  • CD (Continuous Deployment): It deploys the built app to Azure (or elsewhere) after a successful build.
  • Example: A pipeline installs Node.js, runs ng build, and publishes the dist/ folder to Azure Static Web Apps.
3. CI/CD (Continuous Integration/Continuous Deployment)
What is CI/CD?
  • CI: Developers frequently integrate code into a shared repository (e.g., every commit), and an automated system builds/tests it to catch issues early.
  • CD: After a successful build, the system automatically deploys the app to a target environment (e.g., production or staging).
  • For Angular 14: CI builds/tests the app, and CD deploys the dist/ folder to Azure.
Why Use CI/CD?
  • Speed: Automates repetitive tasks (building, testing, deploying), saving time.
  • Quality: Catches bugs early with automated tests (e.g., ng test).
  • Consistency: Ensures every deployment follows the same process, reducing human error.
  • Faster Releases: Push updates to users quickly and reliably.
  • Team Efficiency: Developers focus on coding, not deployment logistics.
How to Implement CI/CD with Azure and Azure DevOps?
Here’s a step-by-step breakdown for an Angular 14 project using the classic editor in Azure DevOps (as requested earlier):
How: Step-by-Step CI/CD Implementation
Step 1: Set Up the Project
  • What: Create an Angular 14 project and push it to Azure DevOps.
  • Why: This is the source code that CI/CD will automate.
  • How:

    npm install -g @angular/cli@14
ng new my-angular-app --style=scss --routing=true
cd my-angular-app
git init
git add .
git commit -m "Initial commit"
git remote add origin <azure-devops-repo-url>
git push -u origin main
Step 2: Configure CI in Azure DevOps
  • What: Set up a build pipeline to compile and test the Angular app.
  • Why: Ensures the code is functional before deployment.
  • How:
    1. Go to Pipelines > Builds > New build pipeline.
    2. Select Azure Repos Git, your repo, and main branch.
    3. Choose Empty job, set agent to ubuntu-latest.
    4. Add tasks:
      • Node.js Tool Installer: Version 16.x.
      • Command Line: npm install -g @angular/cli@14 && npm install.
      • Command Line: ng build --configuration=production.
      • Command Line (optional): ng test --watch=false --browsers=ChromeHeadless.
      • Publish Build Artifacts: Path $(System.DefaultWorkingDirectory)/dist, name dist.
    5. Enable CI trigger for the main branch.
    6. Save and queue the build.
Step 3: Configure CD in Azure DevOps
  • What: Deploy the built app to Azure (e.g., Static Web App or Blob Storage).
  • Why: Makes the app accessible to users automatically.
  • How (Option 1 - Static Web App):
    1. In Azure Portal, create a Static Web App, get the deployment token.
    2. In Azure DevOps, add the token as a service connection (static-web-app-token).
    3. Go to Pipelines > Releases > New pipeline > Empty job.
    4. Add artifact from the CI pipeline (dist).
    5. Add a stage ("Deploy to Static Web App").
    6. Add task Azure Static Web Apps Deploy:
      • Token: static-web-app-token.
      • App location: /.
      • Output location: my-angular-app.
    7. Enable continuous deployment trigger.
    8. Save and create a release.
  • How (Option 2 - Blob Storage):
    1. In Azure Portal, create a Storage Account, enable static website hosting.
    2. In Azure DevOps, create an Azure Resource Manager connection.
    3. Set up a release pipeline (as above).
    4. Add task AzureBlob File Copy:
      • Source: $(System.ArtifactsDirectory)/dist/dist/my-angular-app/*.
      • Subscription: Your Azure connection.
      • Storage account: Your account.
      • Container: $web.
    5. Enable continuous deployment and release.
Step 4: Verify
  • What: Confirm the pipeline works and the app is live.
  • Why: Ensures the CI/CD process is successful.
  • How: Check build/release logs in Azure DevOps and visit the deployed URL (e.g., Static Web App or Blob Storage endpoint).

Comments

Post a Comment

Popular posts from this blog

Interview Tips: Dot NET Framework vs Net CORE

Image
Interview Tips: Dot NET Framework vs Net CORE .NET Framework What :  It's a software development framework created by Microsoft, mainly used for building Windows applications. Why :  It has been around for a long time and is very reliable for building large, complex applications especially for enterprises. How :  You use it to build applications that run exclusively on Windows, making use of a vast array of built-in libraries and features. Why Not :  It can't be used for cross-platform applications, so if you need your application to run on other operating systems like macOS or Linux, .NET Framework isn't the right choice. .NET Core What :  It's a newer, open-source, and cross-platform framework from Microsoft, designed for modern app development. Why :  It's lightweight, high-performance, and can run on multiple operating systems (Windows, macOS, Linux). How :  You use it to build modern, scalable, and quickly deployable applications, especially cloud...
Read more

FREE Webinar: Run Your Own Independent DeepSeek LLM

Image
Faith Infotech Academy, Technopark invites you to an exclusive FREE webinar on "Run Your Own Independent DeepSeek LLM" , where you’ll learn how to deploy and manage DeepSeek LLM effectively. Speaker:  Abhilash Nelson  Trainer & Researcher in AI & Machine Learning  An expert in AI and machine learning, Abhilash will guide you through the process of setting up and running your own independent DeepSeek LLM, empowering you with insights into model deployment, fine-tuning, and real-world applications. What You’ll Learn: ✅ Understanding DeepSeek LLM and its capabilities ✅ Setting up DeepSeek LLM on your own infrastructure ✅ Fine-tuning and optimizing the model for various applications ✅ Use cases and practical demonstrations Key Takeaways: ✅ Mastering DeepSeek LLM for Developers ✅ Boost Your VS Code workflow ✅ Learn to Run DeepSeek locally for AI assistance 📅 Date: 6 February 2025, Thursday 🕒 Time:  10.00 to 11.00 AM 📍 Mode: Online (Webinar link will be shar...
Read more

Delegates and Events

1. What are Delegates in C#? Explain: Delegates are type-safe function pointers. They act as a placeholder for methods that have a specific signature (return type and parameters). Analogy: Imagine a delegate as a contract. It specifies the "shape" of the method it can hold. Any method that fits that shape (same return type and parameters) can be assigned to the delegate. Example: public delegate int MathOperation(int x, int y);  // Define a delegate // Methods that match the delegate signature public int Add(int x, int y) { return x + y; } public int Subtract(int x, int y) { return x - y; } // Use the delegate MathOperation operation = Add; // Assign the Add method to the delegate int result = operation(5, 3); // Call the method through the delegate 2. What are Events in C#? Explain: Events are a mechanism for broadcasting notifications to interested parties (subscribers). They are built upon delegates. Analogy: Imagine an event as a doorbell. When someone presses the d...
Read more