Combining multiple repositories with Azure DevOps pipeline (I)

Published Jun 23 2021 07:14 PM 1,489 Views
Microsoft

Azure DevOps, as an end-to-end tool chain for DevOps on the Microsoft Cloud, provides commonly used modules for developing the main features commonly used today, especially the CI and CD that are automated by the Repos source repository combined with the Pipelines pipeline. As current Web applications evolve, separated front and back architectures have become mainstream. Front-end and back-end source code are typically developed by two teams and stored in two source repositories, while automated integration and deployment often require unified deployment to a single resource environment. To implement this common scenario, today we'll take you through the pipelines of Azure Pipelines, familiarize yourself with the basic usage of YAML files, and integrate the docking of pipelines and release lines.

The fundamental deployment

The overall steps for our presentation are:

  1. Build ASP.Net back-end projects into publishable release packages
  2. Build the code on the front end into a publishable Angular project
  3. Package the front and back releases and deploy them to Azure App Service.

First, let's get the source repository and the final deployment target App Service ready.

Prepare the source repository

Demo with app source code can be downloaded here:

https://github.com/xfsnow/container/blob/master/ReposCombine/ASP_Angular.zip

https://github.com/xfsnow/container/blob/master/ReposCombine/ASP_Backend.zip

 

Download the two compression packages, unzip them, and create 2 Azure DevOps Repos with each of these 2 directories and push the source code to the appropriate Repos. For more information, please refer to the document Creating a new Git repository in your project. The two source repositories that are completed are shown in the figure below.  

snowpeak_0-1624500821846.png

 

This is the source repository for the front end, which, as the name suggests, is a pure front-end project that uses Angular.js.  

snowpeak_1-1624500821854.png

 

 

This is the source repository for the back end, which is a back-end project that uses ASP.Net.  

Provision an App Service instance

We use the console to quickly create a web app instance.

snowpeak_2-1624500821862.png

 

The main configuration items are:

Publish: choose Code;

Runtime stack: choose .Net Core 3.1;

Operation System: choose Windows.

Please click Change size to choose Sku and size.

snowpeak_3-1624500821866.png

 

Click on the far-left Dev/Test in the pop-up float and click on 1GB memory type, which is a free model for easy experimentation without charge. You can do this by clicking on the Review-create button at the bottom and clicking on the Create button. The creation process takes a few minutes, and we'll continue with the following tasks while waiting.

%3CLINGO-SUB%20id%3D%22lingo-sub-2479084%22%20slang%3D%22en-US%22%3ECombining%20multiple%20repositories%20with%20Azure%20DevOps%20pipeline%20(I)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2479084%22%20slang%3D%22en-US%22%3E%3CP%3EAzure%20DevOps%2C%20as%20an%20end-to-end%20tool%20chain%20for%20DevOps%20on%20the%20Microsoft%20Cloud%2C%20provides%20commonly%20used%20modules%20for%20developing%20the%20main%20features%20commonly%20used%20today%2C%20especially%20the%20CI%20and%20CD%20that%20are%20automated%20by%20the%20Repos%20source%20repository%20combined%20with%20the%20Pipelines%20pipeline.%20As%20current%20Web%20applications%20evolve%2C%20separated%20front%20and%20back%20architectures%20have%20become%20mainstream.%20Front-end%20and%20back-end%20source%20code%20are%20typically%20developed%20by%20two%20teams%20and%20stored%20in%20two%20source%20repositories%2C%20while%20automated%20integration%20and%20deployment%20often%20require%20unified%20deployment%20to%20a%20single%20resource%20environment.%20To%20implement%20this%20common%20scenario%2C%20today%20we'll%20take%20you%20through%20the%20pipelines%20of%20Azure%20Pipelines%2C%20familiarize%20yourself%20with%20the%20basic%20usage%20of%20YAML%20files%2C%20and%20integrate%20the%20docking%20of%20pipelines%20and%20release%20lines.%3C%2FP%3E%0A%3CH1%20id%3D%22toc-hId-1360609158%22%20id%3D%22toc-hId-1360609127%22%3EThe%20fundamental%20deployment%3C%2FH1%3E%0A%3CP%3EThe%20overall%20steps%20for%20our%20presentation%20are%3A%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3EBuild%20ASP.Net%20back-end%20projects%20into%20publishable%20release%20packages%3C%2FLI%3E%0A%3CLI%3EBuild%20the%20code%20on%20the%20front%20end%20into%20a%20publishable%20Angular%20project%3C%2FLI%3E%0A%3CLI%3EPackage%20the%20front%20and%20back%20releases%20and%20deploy%20them%20to%20Azure%20App%20Service.%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3EFirst%2C%20let's%20get%20the%20source%20repository%20and%20the%20final%20deployment%20target%20App%20Service%20ready.%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-2051170632%22%20id%3D%22toc-hId-2051170601%22%3EPrepare%20the%20source%20repository%3C%2FH2%3E%0A%3CP%3EDemo%20with%20app%20source%20code%20can%20be%20downloaded%20here%3A%3C%2FP%3E%0A%3CP%3E%3CSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fxfsnow%2Fazure-multi-region-example%2Fblob%2Fmaster%2FReposCombine%2FASP_Angular.zip%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fxfsnow%2Fcontainer%2Fblob%2Fmaster%2FReposCombine%2FASP_Angular.zip%3C%2FA%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fxfsnow%2Fcontainer%2Fblob%2Fmaster%2FReposCombine%2FASP_Backend.zip%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fxfsnow%2Fcontainer%2Fblob%2Fmaster%2FReposCombine%2FASP_Backend.zip%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EDownload%20the%20two%20compression%20packages%2C%20unzip%20them%2C%20and%20create%202%20Azure%20DevOps%20Repos%20with%20each%20of%20these%202%20directories%20and%20push%20the%20source%20code%20to%20the%20appropriate%20Repos.%20For%20more%20information%2C%20please%20refer%20to%20the%20document%20%3CSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fzh-cn%2Fazure%2Fdevops%2Frepos%2Fgit%2Fcreate-new-repo%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3ECreating%20a%20new%20Git%20repository%20in%20your%20project%3C%2FA%3E%3C%2FSPAN%3E.%20The%20two%20source%20repositories%20that%20are%20completed%20are%20shown%20in%20the%20figure%20below.%20%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22snowpeak_0-1624500821846.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F290848i81C69E85AA7205E5%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22snowpeak_0-1624500821846.png%22%20alt%3D%22snowpeak_0-1624500821846.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThis%20is%20the%20source%20repository%20for%20the%20front%20end%2C%20which%2C%20as%20the%20name%20suggests%2C%20is%20a%20pure%20front-end%20project%20that%20uses%20Angular.js.%20%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22snowpeak_1-1624500821854.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F290850i72C52AE96A70340F%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22snowpeak_1-1624500821854.png%22%20alt%3D%22snowpeak_1-1624500821854.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EThis%20is%20the%20source%20repository%20for%20the%20back%20end%2C%20which%20is%20a%20back-end%20project%20that%20uses%20ASP.Net.%20%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-243716169%22%20id%3D%22toc-hId-243716138%22%3EProvision%20an%20App%20Service%20instance%3C%2FH2%3E%0A%3CP%3EWe%20use%20the%20console%20to%20quickly%20create%20a%20web%20app%20instance.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22snowpeak_2-1624500821862.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F290849i656F5DD1B52EFA1F%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22snowpeak_2-1624500821862.png%22%20alt%3D%22snowpeak_2-1624500821862.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20main%20configuration%20items%20are%3A%3C%2FP%3E%0A%3CP%3EPublish%3A%20choose%20Code%3B%3C%2FP%3E%0A%3CP%3ERuntime%20stack%3A%20choose%20.Net%20Core%203.1%3B%3C%2FP%3E%0A%3CP%3EOperation%20System%3A%20choose%20Windows.%3C%2FP%3E%0A%3CP%3EPlease%20click%20Change%20size%20to%20choose%20Sku%20and%20size.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22snowpeak_3-1624500821866.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F290851i360000FB080DAD21%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22snowpeak_3-1624500821866.png%22%20alt%3D%22snowpeak_3-1624500821866.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EClick%20on%20the%20far-left%20Dev%2FTest%20in%20the%20pop-up%20float%20and%20click%20on%201GB%20memory%20type%2C%20which%20is%20a%20free%20model%20for%20easy%20experimentation%20without%20charge.%20You%20can%20do%20this%20by%20clicking%20on%20the%20Review-create%20button%20at%20the%20bottom%20and%20clicking%20on%20the%20Create%20button.%20The%20creation%20process%20takes%20a%20few%20minutes%2C%20and%20we'll%20continue%20with%20the%20following%20tasks%20while%20waiting.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-2479084%22%20slang%3D%22en-US%22%3E%3CP%3EAzure%20DevOps%2C%20as%20an%20end-to-end%20tool%20chain%20for%20DevOps%20on%20the%20Microsoft%20Cloud%2C%20provides%20commonly%20used%20modules%20for%20developing%20the%20main%20features%20commonly%20used%20today%2C%20especially%20the%20CI%20and%20CD%20that%20are%20automated%20by%20the%20Repos%20source%20repository%20combined%20with%20the%20Pipelines%20pipeline.%20As%20current%20Web%20applications%20evolve%2C%20separated%20front%20and%20back%20architectures%20have%20become%20mainstream.%20Front-end%20and%20back-end%20source%20code%20are%20typically%20developed%20by%20two%20teams%20and%20stored%20in%20two%20source%20repositories%2C%20while%20automated%20integration%20and%20deployment%20often%20require%20unified%20deployment%20to%20a%20single%20resource%20environment.%20This%20article%20will%20walk%20you%20through%20this%20common%20scenario%20and%20create%20a%20YAML%20pipeline%20from%20scratch.%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2479084%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAzure%20DevOps%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Co-Authors
Version history
Last update:
‎Jun 26 2021 12:34 AM
Updated by: