Preparing ASP.NET 5, Release 6: Continuous Deployment with Visual Studio Team Services - Complete Guide
Following the great announcements from the Connect 2015 conference, we continue to acquaint you with the scenarios for the use of new technologies and services for the organization of continuous development and testing of your applications.
We recently talked about implementing continuous development and testing processes using Visual Studio Team Services (formerly Visual Studio Online). The article describes in detail how, based on Git repositories in Visual Studio Team Services, to organize the development process based on Scrum and using integration with Visual Studio to ensure a continuous process of testing and developing code (Continuous Integration & Testing).
In this article, we will look at the next step in building a complete DevOps cycle — ensuring continuous deployment (Continuous Deployment) with the help of new features of custom templates for building and publishing projects in Visual Studio Team Services. We will use the project based on ASP.NET 5 and see how for such projects to provide a full cycle from editing the code to the automatic assembly and deployment in the Azure cloud (can be any place).
It is assumed that you have already created a Visual Studio Team Services account. If this is not the case, then refer to the online registration guide .
')
To start from the download page of the new collector component, install a Windows agent that will allow you to build Windows projects, Azure and other Visual Studio projects, as well as Java and Android projects. To install you need to go to:
https: // {your_account} .visualstudio.com / _admin / _AgentPool
and download the agent locally. After installation (say, in the folder C: \ Agent), you must run as administrator C: \ Agent \ ConfigureAgent.cmd. Other steps and details read the link .
Creating a Visual Studio Team Services Project
In Visual Studio Team Services, create a team project, in my case VsoCdDemo (Figure 1).
Fig.1. - Creating a team project in Visual Studio Team Services
Connecting Visual Studio Team Services in Visual Studio 2015
In Visual Studio 2015, in the Team Explorer panel connect to your team project (Figure 2)
Fig. 2. - Select team project
After connecting, you will be asked to clone the still empty team project repository (Figure 3).
Fig. 3. - Team Explorer panel in Visual Studio 2015
Creating a project in Visual Studio 2015
In Visual Studio 2015, create an ASP.NET 5 Web Application project, uncheck the “Host in the cloud” checkbox when creating (Figure 4).
Fig. 4. - Creating an ASP.NET 5 Web Application Project in Visual Studio 2015
The project will be created and the process of restoring assemblies on which it depends will automatically start in the background. Run the project locally to make sure the build runs fine. You can make the first commit and send the code to the server. To do this, right-click on the solution in the Solution Explorer panel, select the Commit item. Enter a description of the commit (Figure 5) and click the Commit and Push action in the drop-down menu,
Fig. 5. - Execute commit and push to repository
After the commit with the push action, you can see your code in the Visual Studio Team Services repository by going to the Code tab (Figure 6).
Fig. 6. - Repository Content in Visual Studio Team Services
It's time to set up a continuous build and publish process in Azure (or any other place).
In Visual Studio Team Services, go to the Build tab and click the Actions button (green plus). In the window, select Visual Studio as the assembly definition template (Figure 7).
Fig. 7. - Build definition templates
In the next window (Figure 8), make sure that the correct repository type is selected, the repository itself and by clicking on the Manage link make sure that the Build Agent is configured correctly. Important! Tick ​​the need to enable continuous integration - then after each check of the code our build and publish process will start.
Fig. 8 - Build template setup
You will end up with the following customized build order for your project (Figure 9). It defines the following steps in advance: Visual Studio Build to build a solution, test step to run tests, publish symbol files and publish build results.
Fig. 9. - Work with the steps of the build and publish process
For us, only the first step is of value to you - Visual Studio Build; we will customize the remaining three steps in our own way, so that you can remove them or turn them off.
Let's try to build our project, to do this, select the first step and fill in the build parameters (Figure 10):
- select as a solution for the assembly file of your project;
- specify additional assembly arguments (note the name of your project):
/ t: Build, FileSystemPublish / p: PublishConfiguration = $ (BuildConfiguration) / p: PublishOutputPathNoTrailingSlash = $ (Build.SourcesDirectory) \ AspNetCdDemo \ artifacts \ bin \ $ (BuildConfiguration) \ Publish
Fig. 10. - Setting the build step
Click Save and then Queue Build to start the build. You will get access to the console of the collector commands in which the build will take place. Alas, our solution will not be able to get together and you will see the following error (Figure 11).
Fig. 11. - Build result with errors
The error we encountered was the need to configure the DNX environment before building the project. For this we need a more fine-tuning of the assembly.
To build an ASP.NET 5 project, you must first configure the DNX environment and perform some other steps, such as downloading the necessary Nuget packages. In this regard, we need to fine-tune the project assembly process. These steps can be described in the following PowerShell script (note the name of your project):
To use this script, we need to add a new file Prebuild.ps1 to the solution in Visual Studio 2015 in the Solution Items folder, copy the text of the script into this file.
Thanks to the flexible features of the Visual Studio Team Services assembly mechanism, we can add various steps to the collector's order, including calling up the necessary PowerShell scripts. Return to assembly definition (Figure 12)
Fig. 12. - Editing the description of the assembly steps
And add a new step for the collector by calling the add window with the “Add build step” button. Just go through the list and see how many built-in features exist to define the build in Visual Studio Team Services (Figure 13).
Fig. 13. - Gallery of possible assembly steps
Select the PowerShell step and add it to the build process. Drag the PowerShell step up making it the very first to set the order of execution (Figure 14). In the PowerShell step settings, specify the path to the script: in my case it is AspNetCdDemo / Prebuild.ps1.
Fig. 14. - Editing the PowerShell build step
Since we configure DNX on our own and also restore packages on our own, then in the Visual Studio Build step, uncheck “Restore NuGet Packages”.
Save the assembly definition.
From Visual Studio 2015 send the added Prebuild.ps1 script with the commit and push to the repository. It will take a couple of minutes and we will see how, thanks to our steps, DNX will automatically deploy and all dependencies, how NuGet packages are loaded and installed.
However, the assembly still ended with an error (Figure 15).
Fig. 15. - Build failed
This is due to the fact that the ASP.NET assembly contains Gulp tasks that have just been installed and cannot be used yet. Just run the assembly again, which will be faster and without errors!
Fig. 16. - Build without errors
So we organized the automatic build of the project on ASP.NET 5 in Visual Studio Team Services. Now let's make continuous publishing to Azure possible.
To publish an ASP.NET5 project in Azure, we need to create an empty instance of the Azure Web App service. I called it AzureCdDemo , you will have to call it differently, the name must be unique. Use the new Azure portal to create your own copy of the Azure Web App (Figure 17).
Fig. 17. - Create Azure Web App in the new portal
To continuously publish an ASP.NET 5 application to Azure, we’ll write another PowerShell script.
In Visual Studio 2015, add a new PublishAspNet5Website.ps1 file to your Solutions Items folder and copy the contents of the script into it.
In the list of build steps, add another step, this time, Azure PowerShell Script. You will need to configure your Azure subscription settings. To do this, click on the Manage link and add a new service through the New Service Endpoint (Figure 18).
Fig. 18. - Enter Azure Subscription Settings
To fill in the parameters above, you will need information about your subscriptions, which can be obtained from the file downloaded at https://manage.windowsazure.com/publishsettings/index .
Back in the step settings for the Azure PowerShell script, select the added subscription and specify the parameters (Figure 19):
- script path: AspNetCdDemo / PublishAspNet5Website.ps1
- script arguments (note the name of the Web App in Azure and the name of your project):
-websiteName AzureCdDemo -packOutput $ (Build.SourcesDirectory) \ AspNetCdDemo \ artifacts \ bin \ $ (BuildConfiguration) \ Publish
Fig. 19. - Configure Azure PowerShell build step
From Visual Studio 2015, commit and push your new script.
The next build process will start, this time ending with the publication of the project in the Azure Web App (Figure 20).
Fig. 20. - Build and publish successfully
If we go to the address of our Azure Web App (in my case http://azurecddemo.azurewebsites.net/ ), then we will be able to make sure that it works (Figure 21).
Fig. 21. - Site running in Azure
Go to Visual Studio 2015 and make any changes. for example, in the Views / Shared / _Layout.cshtml file, change the text and markup. Make a commit and push this file to the repository. Track the automatic build and publishing process in Visual Studio Team Services. Refresh the site and make sure your changes are automatically published (Figure 22).
Fig. 22. - Website in Azure with changes from a continuous build and publishing process
We examined in detail and from scratch the organization of the process of continuous building and publishing a web application based on ASP.NET 5 using Visual Studio Team Services. In the course of our continuous build, we publish code in Git, deploy the DNX environment, load necessary assemblies and npm, execute Gulp scripts, publish the site in the Azure Web App. And all this is automatic.
In conclusion, I would like to say that the new assembly functionality of Visual Studio Team Services allows you to build projects of any type with configuration of any complexity, connecting to a large number of third-party applications, servers and frameworks with preconfigured templates.
We recently talked about implementing continuous development and testing processes using Visual Studio Team Services (formerly Visual Studio Online). The article describes in detail how, based on Git repositories in Visual Studio Team Services, to organize the development process based on Scrum and using integration with Visual Studio to ensure a continuous process of testing and developing code (Continuous Integration & Testing).
In this article, we will look at the next step in building a complete DevOps cycle — ensuring continuous deployment (Continuous Deployment) with the help of new features of custom templates for building and publishing projects in Visual Studio Team Services. We will use the project based on ASP.NET 5 and see how for such projects to provide a full cycle from editing the code to the automatic assembly and deployment in the Azure cloud (can be any place).
Tip! You can try everything yourself or by downloading the source code from GitHub https://github.com/vyunev/VsoCdDemo .
Presetting
It is assumed that you have already created a Visual Studio Team Services account. If this is not the case, then refer to the online registration guide .
')
To start from the download page of the new collector component, install a Windows agent that will allow you to build Windows projects, Azure and other Visual Studio projects, as well as Java and Android projects. To install you need to go to:
https: // {your_account} .visualstudio.com / _admin / _AgentPool
and download the agent locally. After installation (say, in the folder C: \ Agent), you must run as administrator C: \ Agent \ ConfigureAgent.cmd. Other steps and details read the link .
Creating a Visual Studio Team Services Project
In Visual Studio Team Services, create a team project, in my case VsoCdDemo (Figure 1).
Fig.1. - Creating a team project in Visual Studio Team Services
Connecting Visual Studio Team Services in Visual Studio 2015
In Visual Studio 2015, in the Team Explorer panel connect to your team project (Figure 2)
Fig. 2. - Select team project
After connecting, you will be asked to clone the still empty team project repository (Figure 3).
Fig. 3. - Team Explorer panel in Visual Studio 2015
Creating a project in Visual Studio 2015
In Visual Studio 2015, create an ASP.NET 5 Web Application project, uncheck the “Host in the cloud” checkbox when creating (Figure 4).
Fig. 4. - Creating an ASP.NET 5 Web Application Project in Visual Studio 2015
The project will be created and the process of restoring assemblies on which it depends will automatically start in the background. Run the project locally to make sure the build runs fine. You can make the first commit and send the code to the server. To do this, right-click on the solution in the Solution Explorer panel, select the Commit item. Enter a description of the commit (Figure 5) and click the Commit and Push action in the drop-down menu,
Fig. 5. - Execute commit and push to repository
After the commit with the push action, you can see your code in the Visual Studio Team Services repository by going to the Code tab (Figure 6).
Fig. 6. - Repository Content in Visual Studio Team Services
It's time to set up a continuous build and publish process in Azure (or any other place).
Setting up the build process
In Visual Studio Team Services, go to the Build tab and click the Actions button (green plus). In the window, select Visual Studio as the assembly definition template (Figure 7).
Fig. 7. - Build definition templates
In the next window (Figure 8), make sure that the correct repository type is selected, the repository itself and by clicking on the Manage link make sure that the Build Agent is configured correctly. Important! Tick ​​the need to enable continuous integration - then after each check of the code our build and publish process will start.
Fig. 8 - Build template setup
You will end up with the following customized build order for your project (Figure 9). It defines the following steps in advance: Visual Studio Build to build a solution, test step to run tests, publish symbol files and publish build results.
Fig. 9. - Work with the steps of the build and publish process
For us, only the first step is of value to you - Visual Studio Build; we will customize the remaining three steps in our own way, so that you can remove them or turn them off.
Let's try to build our project, to do this, select the first step and fill in the build parameters (Figure 10):
- select as a solution for the assembly file of your project;
- specify additional assembly arguments (note the name of your project):
/ t: Build, FileSystemPublish / p: PublishConfiguration = $ (BuildConfiguration) / p: PublishOutputPathNoTrailingSlash = $ (Build.SourcesDirectory) \ AspNetCdDemo \ artifacts \ bin \ $ (BuildConfiguration) \ Publish
Fig. 10. - Setting the build step
Click Save and then Queue Build to start the build. You will get access to the console of the collector commands in which the build will take place. Alas, our solution will not be able to get together and you will see the following error (Figure 11).
Fig. 11. - Build result with errors
The error we encountered was the need to configure the DNX environment before building the project. For this we need a more fine-tuning of the assembly.
Build ASP.NET 5
To build an ASP.NET 5 project, you must first configure the DNX environment and perform some other steps, such as downloading the necessary Nuget packages. In this regard, we need to fine-tune the project assembly process. These steps can be described in the following PowerShell script (note the name of your project):
# bootstrap DNVM into this session. &{$Branch='dev';iex ((new-object net.webclient).DownloadString('https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.ps1'))} # load up the global.json so we can find the DNX version $globalJson = Get-Content -Path $PSScriptRoot\global.json -Raw -ErrorAction Ignore | ConvertFrom-Json -ErrorAction Ignore if($globalJson) { $dnxVersion = $globalJson.sdk.version } else { Write-Warning "Unable to locate global.json to determine using 'latest'" $dnxVersion = "latest" } # install DNX & $env:USERPROFILE\.dnx\bin\dnvm install $dnxVersion -Persistent # run DNU restore on all project.json files & dnu restore $PSScriptRoot\src\AspNetCdDemo\project.json 2>1 To use this script, we need to add a new file Prebuild.ps1 to the solution in Visual Studio 2015 in the Solution Items folder, copy the text of the script into this file.
Thanks to the flexible features of the Visual Studio Team Services assembly mechanism, we can add various steps to the collector's order, including calling up the necessary PowerShell scripts. Return to assembly definition (Figure 12)
Fig. 12. - Editing the description of the assembly steps
And add a new step for the collector by calling the add window with the “Add build step” button. Just go through the list and see how many built-in features exist to define the build in Visual Studio Team Services (Figure 13).
Fig. 13. - Gallery of possible assembly steps
Select the PowerShell step and add it to the build process. Drag the PowerShell step up making it the very first to set the order of execution (Figure 14). In the PowerShell step settings, specify the path to the script: in my case it is AspNetCdDemo / Prebuild.ps1.
Fig. 14. - Editing the PowerShell build step
Since we configure DNX on our own and also restore packages on our own, then in the Visual Studio Build step, uncheck “Restore NuGet Packages”.
Save the assembly definition.
From Visual Studio 2015 send the added Prebuild.ps1 script with the commit and push to the repository. It will take a couple of minutes and we will see how, thanks to our steps, DNX will automatically deploy and all dependencies, how NuGet packages are loaded and installed.
However, the assembly still ended with an error (Figure 15).
Fig. 15. - Build failed
This is due to the fact that the ASP.NET assembly contains Gulp tasks that have just been installed and cannot be used yet. Just run the assembly again, which will be faster and without errors!
Fig. 16. - Build without errors
So we organized the automatic build of the project on ASP.NET 5 in Visual Studio Team Services. Now let's make continuous publishing to Azure possible.
Continuous publishing to the Azure Web App
To publish an ASP.NET5 project in Azure, we need to create an empty instance of the Azure Web App service. I called it AzureCdDemo , you will have to call it differently, the name must be unique. Use the new Azure portal to create your own copy of the Azure Web App (Figure 17).
Fig. 17. - Create Azure Web App in the new portal
To continuously publish an ASP.NET 5 application to Azure, we’ll write another PowerShell script.
param($websiteName, $packOutput) $website = Get-AzureWebsite -Name $websiteName # get the scm url to use with MSDeploy. By default this will be the second in the array $msdeployurl = $website.EnabledHostNames[1] $publishProperties = @{'WebPublishMethod'='MSDeploy'; 'MSDeployServiceUrl'=$msdeployurl; 'DeployIisAppPath'=$website.Name; 'Username'=$website.PublishingUsername; 'Password'=$website.PublishingPassword} $publishScript = "${env:ProgramFiles(x86)}\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\Publish\Scripts\default-publish.ps1" . $publishScript -publishProperties $publishProperties -packOutput $packOutput In Visual Studio 2015, add a new PublishAspNet5Website.ps1 file to your Solutions Items folder and copy the contents of the script into it.
In the list of build steps, add another step, this time, Azure PowerShell Script. You will need to configure your Azure subscription settings. To do this, click on the Manage link and add a new service through the New Service Endpoint (Figure 18).
Fig. 18. - Enter Azure Subscription Settings
To fill in the parameters above, you will need information about your subscriptions, which can be obtained from the file downloaded at https://manage.windowsazure.com/publishsettings/index .
Back in the step settings for the Azure PowerShell script, select the added subscription and specify the parameters (Figure 19):
- script path: AspNetCdDemo / PublishAspNet5Website.ps1
- script arguments (note the name of the Web App in Azure and the name of your project):
-websiteName AzureCdDemo -packOutput $ (Build.SourcesDirectory) \ AspNetCdDemo \ artifacts \ bin \ $ (BuildConfiguration) \ Publish
Fig. 19. - Configure Azure PowerShell build step
From Visual Studio 2015, commit and push your new script.
The next build process will start, this time ending with the publication of the project in the Azure Web App (Figure 20).
Fig. 20. - Build and publish successfully
If we go to the address of our Azure Web App (in my case http://azurecddemo.azurewebsites.net/ ), then we will be able to make sure that it works (Figure 21).
Fig. 21. - Site running in Azure
Final test
Go to Visual Studio 2015 and make any changes. for example, in the Views / Shared / _Layout.cshtml file, change the text and markup. Make a commit and push this file to the repository. Track the automatic build and publishing process in Visual Studio Team Services. Refresh the site and make sure your changes are automatically published (Figure 22).
Fig. 22. - Website in Azure with changes from a continuous build and publishing process
Conclusion
We examined in detail and from scratch the organization of the process of continuous building and publishing a web application based on ASP.NET 5 using Visual Studio Team Services. In the course of our continuous build, we publish code in Git, deploy the DNX environment, load necessary assemblies and npm, execute Gulp scripts, publish the site in the Azure Web App. And all this is automatic.
In conclusion, I would like to say that the new assembly functionality of Visual Studio Team Services allows you to build projects of any type with configuration of any complexity, connecting to a large number of third-party applications, servers and frameworks with preconfigured templates.
Source: https://habr.com/ru/post/271173/
All Articles