Azure DevOps Series - Azure Pipelines

H A R S H H A A - Sep 16 - - Dev Community

Azure Pipelines automatically builds and tests code projects. It supports all major languages and project types and combines continuous integration, continuous delivery, and continuous testing to build, test, and deliver your code to any destination.

An Azure SPN is a security identity used by user-created applications, services, and automation tools to access specific Azure resources.

This access is restricted by the roles assigned to the service principal, giving you control over which resources can be accessed and at which level.

The service principal name (SPN) is the name that a client uses to identify a service for mutual authentication.

Clone the repository https://github.com/Ibrahimsi/Youtube_clone.git

Go to the azure devops portal create a new project

Go to the azure repo copy the code

Paste the location of the folder terminal

Check the code is update for azure repo

git remote show origin
Enter fullscreen mode Exit fullscreen mode

Not update the remote repository remove that and again add to the azure devops remote repo.

git remote remove origin
git remote add origin https://Ibrahimsi909@dev.azure.com/Ibrahimsi909/Youtube%20Clone/_git/Youtube%20Clone
git push -u origin --all
Enter fullscreen mode Exit fullscreen mode

Check devops portal the code is updated?

Create a webapp from azure portal

Azure App Services is a platform for building, deploying, and scaling web applications and services. It offers a variety of services, each with its own unique capabilities and use cases.

Azure App Service is an HTTP-based service for hosting web applications, REST APIs, and mobile back ends. You can develop in your favorite language, be it . NET, . NET Core, Java, Node. js, PHP, and Python.

Go to → weapp → Create a webapp

Once created a webapp the website is ready

Check the default domain ibrahimsi.azurewebsites.net

Create a Pipeline

Go to pipeline → Create a pipeline → Click classic editor

Select Azure Repos Git → Select repo → Click Continue

Select a template click Empty job

Add another agent

Add the agent

  1. npm install

  2. npm build

  3. Publish artifact

  4. Azure app service deploy

4 Task are set remaining variable,trigger see on later release handson. Click save and queue.

Finally save the pipeline

If you faced problem some error

“Error: No hosted parallelism has been purchased or granted. To request a free parallelism grant”

Follow the below steps:

Finally run the pipeline

Click the URL the page redirect but the same default homepage

Microsoft Azure App Service - Welcome

Edit description

ibrahimsi.azurewebsites.net

Why?

Default enable the cache in app services disable it now.

Go to azure portal → Webapp → Configuration → Finally save the setting

Restart the webservice application. Again hit the URL https://ibrahimsi.azurewebsites.net/

Successfully hosted the applications…

Export to pipeline

YAML code

Another way to create a pipeline

Pipeline → New pipeline → Azure repos git → Youtube Clone → Starter pipeline → Save and run


trigger: 
- main

stages:
- stage: Build
  jobs:
  - job: Build
    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'
        publishLocation: 'Container'

- stage: Deploy 
  jobs:
  - job: Deploy
    pool:
      vmImage: 'ubuntu-latest'
    steps:
    - task: DownloadBuildArtifacts@1
      inputs:
        buildType: 'current'
        downloadType: 'single'
        artifactName: 'drop'
        downloadPath: '$(System.ArtifactsDirectory)'
    - task: AzureRmWebAppDeployment@4
      inputs:
        ConnectionType: 'AzureRM'
        azureSubscription: 'f2d858b2-0b52-4d8e-a750-adae9358c49a'
        appType: 'webAppLinux'
        WebAppName: 'ibrahimsi'
        packageForLinux: '$(System.ArtifactsDirectory)/drop'
        RuntimeStack: 'STATICSITE|1.0'
Enter fullscreen mode Exit fullscreen mode

Finally run the code

Successfully completed the job

Rehit the URL

Microsoft Azure App Service - Welcome

Edit description

ibrahimsi.azurewebsites.net

Thank you 🙏 for taking the time to read our blog.

👤 Author

banner

Join Our Telegram Community || Follow me on GitHub for more DevOps content!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .