Web continuous integration with Plastic SCM and Azure
Microsoft defines Azure Websites as a fully managed Platform-as-a-Service (PaaS) that enables you to build, deploy and scale enterprise-grade web Apps in seconds. Since most modern web development teams promote new code from staging to production environments, it is important to consider various techniques to automatically deploy your code as part of your ALM (Application Lifecycle Management) process. The technique that we will focus on in this article is Plastic SCM with GitSync. With this technique, your team can quickly and easily publish changes automatically to Azure Websites from GitHub.
Web Development
The concepts we are going to explain and review in this article are applicable to any kind of web development environment you currently use. Since all of the configuration is done on the Plastic SCM server side or in the Azure Management portal, it does not matter if you are using Sublime and MAC OS X, Visual Studio and Windows or any other configuration because the concepts are still valid.
In the example used for this article, we will be using ASP.NET MCV and Visual Studio 2013 because with Visual Studio it is really easy to have a new site up and running with just a few mouse clicks.
Getting Started
In Visual Studio go to the File menu, select New and then select Project. The New Project window is going to open. You can now click on Web in the Installed templates tree on the left side of the window and select the ASP.NET Web Application like this:
After clicking OK, a new window will open and you can select the type of web project you want to create like this:
In this example you will select MVC and press OK.
After pressing OK, your new website is created and ready to run. By pressing the F5 function key you will see the new site home page like this:
The new web site includes the basic functions such as; Bootstrap, JQuery, Modernizr and Respond so you are ready to begin working with the site immediately. The only remaining task is to add the solution to source control so that it is committed to Plastic SCM. If you need help doing this, you can take a look at the article "Getting Started with Plastic SCM Plugin for Visual Studio" where you will find all of the information necessary to connect Visual Studio with Plastic SCM.
Deploying GitHub as an Intermediate Online Repository
One thing that you need to keep in mind is that the sync between Plastic SCM and GitHub is going to occur at the repository level so you will need to create a new repository/workspace containing only the new web site you just created. If you do not perform this step the sync is going to upload to GitHub all the content in your repository so it is important that you limit the sync to only the new web site content.
After committing your new web project to Plastic SCM, you can go to the Plastic SCM Branch explorer and right click on the branch to start the sync. The branch that you clicked on isn't important here because, as we explained previously, only the new repository is going to be synced. You can now select Replication and then select Sync with Git option from the menu like this:
When you select Sync with Git, a new window will open prompting you for the required information to sync with a remote Git repository on GitHub like this:
Once you have entered your Repository URL, Username and Password, you will click on the Sync button start the Plastic SCM sync of both local and remote repositories.
If you use Github and need authentication you cannot use the regular password but a token. It is in 'Developer settings' (settings -> developer settings -> personal access token -> generate new token). More information on this here.
A new window will open so that you can monitor the progress of the sync like this:
You have now completed the synchronization of the Plastic SCM repository with GitHub. The next time that you need to perform a synchronization to update the GitHub repository you will simply repeat these steps.
Creating a New Azure Website
As we stated in the overview, creating and deploying an Azure Website is very easy and can be done with a few mouse clicks in most cases. To get started all you need to do is go to the manage.windowsazure.com site and login to access your account. Once you are in your account you will click on the +NEW button in the bottom left pane to start a new project like this:
By selecting the +NEW button a new item panel will open showing you all available options for your subscription. The website option will be selected by default and three creation options will be displayed: Quick Create, Custom Create and From Gallery like this:
In this article we are going to use the Custom Create option as it will enable you to connect your new site directly to a single source control mechanism for continuous deployment. When you click on Custom Create, the new website window will open prompting you for some additional information that is needed to create the site such as; web site URL, WEB HOSTING PLAN and DATABASE to use and also whether you want to publish from source control like this:
At this point is important to check the "Publish from source control" option. This will then open a new window in the creation process that will enable you to select a source control origin to publish your site from. At this point you will need to select GitHub as your source code location and click on the right pointing arrow like this:
After clicking on the right pointing arrow a new window will open from Git Hub prompting you for your permission to authorize Azure to access your GitHub account like this:
After clicking the "authorize application" green button in the left bottom corner, you will be prompted to enter your password for GitHub to confirm you are the owner of the account. Once your password is accepted the window will close and return to the Azure website creation process where you can select the repository to get the source code from and the branch to deploy to like this:
After clicking on the finish button the website creation process will begin. When this process is finished you can access the website dashboard to view the website statistics or navigate directly to your newly published website that was deployed directly from GitHub and was synced with Plastic SCM like this:
You now have a website published to Azure WebSites. If you need to make changes to your source code all you have to do is sync your repository to GitHub which will upload all changes to GitHub and display these updates like this:
The result is that the Azure website is automatically updated with the new version you synced with GitHub.
Deployment to Azure Websites Using a Git Repository
If you are using a free account on GitHub and you do not want to publish your source code publicly then you can choose to publish your local changes directly from Plastic SCM to Azure Websites instead. You would do this by simply using the local Git repository option that is displayed on the website creation page like this:
Once you click on the Local Git repository you will be prompted for a username and password to connect to the Git repository that Azure is going to create for this new website. Once your new website and Git repository are created you can sync files to it from your local Plastic SCM repository. You can now go to your website deployments page and view the Git repository URL like this:
At this point you simply copy that URL and return to the Plastic SCM branch explorer to Sync your branch with the Azure Git repository, the same way you did previously with GitHub (refer to page 4)
Once you initiate syncing the repository, a new window will open so that you can monitor the progress in the Azure management portal like this:
Conclusion
You are now done with the process of creating your website and syncing the repository. Once Azure finishes the deployment, your new Azure website is going to be online and directly linked to Plastic SCM, without intermediate repositories, thanks to Plastic SCM GitSync technology and Azure Git repositories.
As you have seen in this article, publishing your website to Azure using Plastic SCM GitSync is a fairly easy task. By enabling you to test your website or web app directly on the cloud, you now have a wide array of possibilities, from continuous integration to continuous deployment. If you want to know more about the Plastic SCM GitSync feature go to www.plasticscm.com/gitsync/ for further information.
0 comentarios: