40 C
Dubai
Wednesday, April 30, 2025
Home Blog Page 7

Deploy Next.js App on Azure App Service with Azure DevOps Pipelines

Deploying a Next.js app on Azure App Service using Azure DevOps Pipelines can be done directly within the YAML file itself, incorporating the deployment steps into the build pipeline. By defining deployment configurations in the YAML file, you integrate the deployment process seamlessly into the overall build process without a separate release pipeline.

  1. YAML Configuration: Within the YAML file, define different stages or jobs for building and deploying your Next.js app. This can include steps such as installing dependencies, building the app, and packaging it for deployment.
  2. Deployment Stage: Specify a deployment stage within the YAML file. This stage includes steps tailored to deploy your Next.js app to Azure App Service. You’ll define tasks like configuring the Azure subscription, specifying the app type (webAppLinux in this case), providing the package path, defining the runtime stack, and more.

Step 1 : Create a new project in Azure Devops and add the respective Next js Codes to the repository accordingly.

Step 2 : The Next js application is ready in our repository in main branch. Now lets create a Azure App Service for the Next js application to be deployed.

Check the Default domain URL of the app service this is created.

.

Step 3 : Create a Server Connection between the Azure Web App in the Azure Subscription and Azure Devops.

In Azure Devops click on Project Settings> Server Connection> New Connection. And fill the required parameters for the connection.

.
.

Select the Subscription and the Resource Group that contains the Azure Web App and fill the check box Grand access permissions to all the pipelines.

.

Step 4 : Lets start creating a Pipeline for the Application. Click on Pipelines> New Pipelines.

Select what type of Repository of the Project.

Select the Repository where the application is placed.

Now assign a Create or Assign a YAML file configuration in the Pipeline line creation.

Step 5 : Create variables in for Azure Web Apps this may help us when we use multiple stages of deployment(Dev UAT and Prod).

To create a variable click on Variables> New Variable. Give value as App Service Name.

Use this Yaml file for your project.

trigger:
  branches:
    include:
      - main

variables:
  azureSubscription: '#############'  #Replace it with Azure Subscription ID
  webAppName: '$(appServiceName)'
  environmentName: '$(appServiceName)'
  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)

    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '18.x'
      displayName: 'Install Node.js'

    - script: |
        yarn install
        yarn build 
      displayName: 'yarn install and build'

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

    - publish: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
      artifact: drop

- stage: Deploy
  displayName: Deploy stage
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deploy
    displayName: Deploy
    environment: $(environmentName)
    pool:
      vmImage: $(vmImageName)
    strategy:
      runOnce:
        deploy:
          steps:
          - task: AzureWebApp@1
            inputs:
              azureSubscription: 'next-js-conn' #Replace it with the Service Connection Name
              appType: 'webAppLinux'
              appName: '$(appServiceName)'
              package: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
              runtimeStack: 'NODE|18-lts'

Step 6 : Add a Start Up command in our App Service > Configuration > General Settings.

The Start up command.

pm2 start /home/site/wwwroot/ecosystem.config.js --no-daemon

Step 7 : I have also added a ecosystem.config.js file to my application.

ecosystem.config.js

module.exports = {
apps: [
  {
    name: "property-dev",
    script: "./node_modules/next/dist/bin/next",
    args: "start -p " + (process.env.PORT || 3000),
    watch: false,
    autorestart: true,
  },
],
};

Step 8 : Lets run the pipeline and view the Application

.
.

Important notes & Naming Conventions :(Optional)

1.Create a separate IT admin account for the Devops project with Ownership access.

Ex : itadmin01@azure365pro.com

2.Create all the resources in the same location, so that it is organized and it makes it easier to perform common operations on them.

3.Subscription Naming –

3.Resources Group and Resources Naming –

4.Service Connection Naming –

Deploy a Container Image in a Linux VM

0

Container images are a lightweight, standalone, and executable software package that includes everything needed to run a piece of software: the code, runtime, system tools, libraries, and settings. These images are the foundation of container-based technologies like Docker, allowing applications to be abstracted from the underlying infrastructure.

  1. Portability: Container images are highly portable and can run consistently across different environments, including development machines, testing environments, and various cloud or on-premises platforms.
  2. Isolation: Containers provide isolation at the application level, allowing multiple containers to run on the same host without interference. Each container runs as an independent process with its own filesystem and resources.
  3. Layered Structure: Images are built in layers, allowing for efficient sharing of common components. When changes are made, only the affected layers need to be updated, reducing image size and improving speed in image distribution and deployment.
  4. Immutable and Reproducible: Container images are immutable, meaning they cannot be modified once built. This immutability ensures consistency and reproducibility across different environments.
  5. Dockerfile and Registries: Images are created using a Dockerfile, which defines the configuration and dependencies needed for the application. Images are stored and distributed via container registries such as Docker Hub, Azure Container Registry, or others.

Step 1 : Now lets create a Linux Virtual Machine and then deploy a Containerized Image in it.

The Linux is deployed, here I have allowed SSH and HTTP

Step 2 : Lets connect to the Linux Virtual Machine using Public IP, with the help of Putty Software.

Login to the Virtual Machine with your credentials.

Step 3 : Once we login into our VM, lets start updating the packages to set up an environment to install Docker in the system.

Use the below codes to create an environment to install Docker.

sudo apt-get update
sudo apt-get install ca-certificates curl gnupg
sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg

echo \
  "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

Step 4 : Now the environment setup is done. Lets install Docker in the system by using the below code.

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

Lets check whether Docker is installed or not.

Step 5 : Once you confirm that Docker is installed in the system. Now lets login to Docker account with your credentials.

Step 6 : Lets install and run, a containerized image in the system.

sudo docker run --name mynginx -p 80:80 -d nginx

Step 7 : Lets check whether in containerized image is published or not.

Successfully published the image in the Virtual Machine.

Configure Azure App Service Deployment Slot

0

Azure App Service Deployment Slots provide a feature that allows you to create multiple deployment slots (or environments) within an Azure App Service. These slots are live web apps with their own hostnames and can be used to deploy different versions of your application, perform testing, and swap between slots for seamless deployment and rollback strategies without causing downtime.

  1. Environment Isolation: Each slot represents a separate environment with its own settings, configurations, and version of the application. This isolation allows you to deploy, test, and validate changes without affecting the production environment.
  2. Staging and Testing: Deployment slots are commonly used for staging and testing purposes. You can deploy your application to a non-production slot, perform testing, and validate changes before swapping it to the production slot.
  3. Zero Downtime Deployment: By leveraging slot swapping, you can achieve zero-downtime deployments. Swapping ensures a smooth transition between slots by redirecting traffic seamlessly without interruptions to end-users.
  4. Rollback Capability: If an issue arises after a deployment to the production slot, you can instantly swap it back to the previous version, allowing for quick rollbacks in case of unexpected problems.

Step 1 : Lets create an Azure App Service with any configuration. But ensure that the app service plan is Standard or Premium, because Deployment Slot feature is only available in those plans.

Lets check whether the App Service URL.

Step 2 : In App Service plan click on App Service Editor, to create a sample application.

Click on WWWROOT folder and create a sample file.

Step 3 : Here I have created a default page for the App Service. So that when we view with the App Service URL in a browser we will be able to view the Default.html file.

Currently the default.html page is available for the App Service

Step 4 : Now in the Deployment section of the App Service, Lets add a slot for the second version of the Application.

Provide the required parameters for the deployment slot.

Now we have created a deployment slot for the second version of the application. It has its own URL

Step 5 : Click on the App service which was created from deployment slot and navigate to App Service Editor.

Create a default. html page and view it with the second app service.

Step 6 : Now navigate to Deployment slot of any App Service and click on Swap.

Select the Source App Service and target App service and click on Swap.

Step 7 : Lets check whether the Swap process between the App Service one and two is successful or not.

App Service 1 with Version 2 of the Application.

App Service 2 with Version 1 of the Application. Swap is Successful.

Deploy Azure Disk Encryption for Data Disk.

0

Azure Disk Encryption is a security feature provided by Microsoft Azure that helps safeguard data on Azure Virtual Machine disks using encryption. It employs industry-standard encryption methods to encrypt both the OS and data disks associated with Azure VMs, helping to protect sensitive information from unauthorized access.

  1. Data Protection: It encrypts the operating system and attached data disks, ensuring that data remains encrypted at rest to prevent unauthorized access even if someone gains physical access to the storage media.
  2. Integration with Azure Key Vault: Azure Disk Encryption uses keys stored in Azure Key Vault, providing a centralized management point for encryption keys and enabling secure key management separate from the encrypted data.
  3. Supported Disk Types: Azure Disk Encryption supports both managed and unmanaged disks and is compatible with Windows and Linux VMs across various Azure services.

Step 1 : Currently we have a Virtual Machine with OS and Data Disk attached to them, and the disks are under “Platform Managed Keys“.

Now we have to convert them to “Customer Managed Keys” for higher Data Encryption.

Step 2 : Now to start the process of encryption, lets create an Azure Key Vault. While creating the Key Vault enable the Purge Protection.

In the next section Select Vault access policy, now leave the other settings in Default and create the Azure Key Vault.

Step 3 : Now we have created a Key Vault, Lets create Key in Azure Key Vault.

Select the preferred Key size and create the keys

Step 4 : Now for Encrypting the Disk we need to create a “Disk Encryption Set“. While creating select the Azure Key Vault that is already created.

Once you created all the required resources Verify that Purge protection is Enabled in the Azure Key Vault

Step 5 : Click on the Required disk that you want to Encrypt and click on Encryption from the left side.

Now lets change the type from Platform Managed Keys to Customer Managed Keys. But we are getting an error here.

Step 6 : To solve the error move to Disk Encryption Set, we have have a pop up to allow permission from the key vault to provide Platform Managed Keys. Click on the option to allow.

Step 7 : Again lets navigate to the disk that we want to encrypt and select the Disk Encryption Set.

Now to process of Encrypting the disk is done.

Step 8 : Lets check weather the Disk Encryption has been moved to Customer Managed Keys.

Create and deploy Specialized VM Images in Azure

0

In Azure, a specialized VM image refers to a virtual machine image that has been pre-configured and customized for specific tasks or roles within an application or system. It typically includes a specific operating system, software configurations, and other settings tailored to meet the requirements of a particular workload or application. Specialized VM images are designed to streamline the deployment process and ensure consistency in the infrastructure, reducing the time and effort required to set up virtual machines for specific purposes.

Custom Configurations: Specialized VM images in Azure are crafted with customized configurations, including operating system settings, software installations, and specific application setups, tailored to meet the unique needs of a particular workload.

Consistent Environments: By using specialized VM images, organizations can ensure consistent and standardized environments across their infrastructure. This reduces the likelihood of configuration errors and enhances overall system reliability.

Version Control and Updates: Specialized VM images can be versioned and updated, allowing for efficient maintenance and management. When there are changes or updates to the configuration, a new version of the specialized image can be created, ensuring that all future deployments incorporate the latest improvements.

Step 1 : Lets create a Virtual Machine and add a Custom Script in it to install Internet Information Services(IIS). So we can use this Virtual machine as a base machine to create a Specialized Image.

In Advance section select on Custom Script Extension and upload the script to install Internet Information Services.

.

The script contains info to install IIS and create a Defalut.html page in it.

Step 2 : Check the deployed Virtual Machine contain IIS installed on it and also to have a Script to produce computer name.

.

Step 3 : Lets start creating Specialized VM Image out of the base virtual machine. In the overview page of the Virtual machine, click on Capture to create a Specialized Image.

.
.

Select the Image type, provide a Target Definition and version number.

Step 4 : Once the image is created lets create VM from the Specialized Image.

Select the Specialized VM Image the we have created already.

.
.

Note : The ability to create Username and Password for Administrator in creating a Specialized Image, the information’s about Admin login’s and the Computer name is embedded in the image. So we cannot create new user name and password for the Virtual Machine.

We have to user the same VM credentials which we have created for the base virtual machine.

This is the key difference between the Specialized image and a Generalized image(we can new create user name and password).

Step 5 : Lets check weather the IIS is install and also check for the Default Html page.

Internet Information Services:

Default Html Page:

Note : The Computer name is still embedded in the New Virtual Machine.

To change the Computer name, we should login the VM and do it manually. But the New computer name will be reflected in the Default Html page only if we edit that page.

.
.

Implementing Load Balancers for Multiple Virtual Machines

Exploring the Key Benefits and Use Cases of Azure Load Balancer for Efficient Load Distribution and High Availability in Cloud Deployments.

  • Azure Load Balancer ensures uninterrupted service by dynamically distributing traffic across multiple virtual machines, redirecting requests away from failed instances to maintain system reliability.
  • Easily scale your applications with Azure Load Balancer, distributing incoming traffic among multiple VM instances to handle varying workloads and maintain optimal performance during peak periods.
  • Intelligently allocate requests using round-robin or least connections algorithms, preventing any single VM from becoming a bottleneck and ensuring equitable distribution of network traffic.
  • Proactively monitor VM health with continuous probes, automatically diverting traffic from unhealthy instances to maintain a robust and reliable application infrastructure.

Step 1 : Here I have created two virtual machines in a same virtual network. Since we have creating Load Balancer with a Basic SKU, we have to have the Virtual Machines should be in single availability set or virtual machine scale set. So lets create two Virtual Machines in the same Availability Set.

Step 2 : We have currently created two Virtual Machines in a Resource Group. But there are other additional services which are also deployed and these services are not required for a Load Balancer Implementation, they are Public IP and we need only one Network Security Group for both the machines. So lets disassociate and delete them.

We could have created without an Public IP and Network Security Group in the beginning, but I want to mention that we do not require a Public IP to connect to the Virtual Machines and all the Virtual machines inside the same subnet can have common Network Security Group.

Step 3 : Lets Create a new Network Security Group for the Virtual Machines.

Step 4 : Once this Network Security Group is deployed, lets create some Inbound Security rules in it.

Step 5 : Now we have to Associate this Network Security Group to the Subnet which contains the Virtual Machines.

Step 6 : Now Lets start creating our Load Balancer to facilitate connections with the Virtual Machines, optimizing load distribution and ensuring high availability in our networked environment.

Since its for testing purpose I am going with Basic SKU and we need to connect to the Virtual machines from Internet so I have selected Public IP.

Step 7 : Now we have to Assign an Public IP to our Load Balancer.

.

Step 8 : Now lets add Backend Pool by selection the Virtual Network and the Virtual Machines.

.
.

Step 9 : Once the Load Balancer is deployed we have to create Health Brobes in it. The Health Brobes helps the Load Balancer whether Virtual machines are up and running or not.

Step 10 : Let add Load Balancer rules this helps the Load Balancer what request should be send to the Backend Pools.

Step 11 : Lets create NAT rules for the Load Balancer. the Nat rules helps in logging in to a particular Virtual Machine.

For Virtual Machine 01

For Virtual Machine 02

.

Step 12 : Let connect to both the Virtual Machines using RDP with the IP address do the Load Balancer.

Connecting to Virtual Machine 01. Along with the Public IP of the Load Balancer add the Frontend port number given in the NAT rules.

.

Connecting to Virtual Machine 02.

.

Successfully able to connect to Virtual Machines with the help of Load Balancers.

× How can I help you?