{"id":5871,"date":"2015-09-16T10:54:23","date_gmt":"2015-09-16T10:54:23","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/2015\/09\/16\/deploy-to-azure-from-github-with-application-insights\/"},"modified":"2023-09-19T11:12:48","modified_gmt":"2023-09-19T18:12:48","slug":"deploy-to-azure-from-github-with-application-insights","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/deploy-to-azure-from-github-with-application-insights\/","title":{"rendered":"Deploy to Azure from GitHub with Application Insights"},"content":{"rendered":"

Browsing GitHub the other day I found an interesting button in README: Deploy to Azure<\/strong>. This button intrigued me to say the least. With one click I can create my own instance of that web app and try it out. Isn\u2019t it great? And it\u2019s very easy to insert into your own GitHub repo. But every app should include monitoring! So I\u2019ll show you how to extend the button to create a new Application Insights resource. Anyone who deploys your app also gets their own web app monitor that shows the performance and usage of their instance of the app.<\/p>\n

\"image\"<\/a><\/p>\n

Just a button<\/h2>\n

There is a nice blog post on how to implement this button<\/a> for your project. It is very straightforward. All you have to do is to insert this line of code into Readme.md<\/code>:<\/p>\n

\n
\n
   1:<\/span> [![Deploy to Azure](http:\/\/azuredeploy.net\/deploybutton.png)](https:\/\/azuredeploy.net\/) <\/span><\/pre>\n
<\/div>\n<\/div>\n
There are some gotchas:<\/p>\n
    \n
  1. Your repository should be public. <\/li>\n
  2. If your application is .NET and require compilation, the solution should compile in a Visual Studio without extra manual configuration. <\/li>\n
  3. For application with NuGet dependencies you have to enable NuGet restore<\/a>.<\/li>\n
  4. Your readers need an Azure subscription.<\/li>\n<\/ol>\n
    When a reader clicks Deploy to Azure <\/strong>nice deployment wizard will help them to deploy the application from GitHub to Azure.<\/p>\n
    Application Example<\/h2>\n
    To demonstrate the power of the Deploy to Azure <\/strong>feature, I\u2019ve implemented a simple private NuGet feed project following instructions from docs.nuget.org<\/a>. Here is a resulting application: https:\/\/github.com\/SergeyKanzhelev\/PrivateFeed<\/a>. <\/p>\n
    \"image\"<\/a><\/p>\n
    Now if you need a share your test packages with somebody it is very easy to do:<\/p>\n
      \n
    1. Deploy this repository to Azure using Deploy to Azure <\/strong>button <\/li>\n
    2. Open KuDu<\/a> console at http:\/\/<your site name>.scm.azurewebsites.net<\/em> <\/li>\n
    3. Go to Debug Console<\/em> > CMD<\/em> <\/li>\n
    4. Use command cd sitewwwrootapp_data<\/code> to open App_Data<\/code> folder <\/li>\n
    5. Drag and drop your *nupkg<\/code> files to the folder <\/li>\n
    6. Use http:\/\/<your site name>.azurewebsites.net\/nuget<\/em> as a nuget feed <\/li>\n<\/ol>\n
      If you already have your Azure subscription it will take you a minute to set up a private NuGet feed now.<\/p>\n
      Template customization<\/h2>\n
      Once you have deployment set up you can start customizing it. All template customization is done by creating new file in your repository called azuredeploy.json<\/code>. This blog post<\/a> explains how basic template looks like and how customization works.<\/p>\n
      For private NuGet feed it is important to set up a private key for packages publishing from command line. Following instructions from the blog post you need to add new parameter for your template:<\/p>\n
      \n
      \n
         1:<\/span> "NuGetApiKey"<\/span>: {<\/pre>\n
      <\/p>\n
         2:<\/span>   "type"<\/span>: "string"<\/span>,<\/pre>\n
      <\/p>\n
         3:<\/span>   "defaultValue"<\/span>: "{7F2C2BC0-CBEE-41B1-9963-9C4F164CE8C9}"<\/span><\/pre>\n
      <\/p>\n
         4:<\/span> },<\/pre>\n
      <\/div>\n<\/div>\n
      And than use this parameter to set websites settings:<\/p>\n
      \n
      \n
         1:<\/span> "resources"<\/span>: [<\/pre>\n
      <\/p>\n
         2:<\/span>   {<\/pre>\n
      <\/p>\n
         3:<\/span>     "apiVersion"<\/span>: "2014-04-01"<\/span>,<\/pre>\n
      <\/p>\n
         4:<\/span>     "type"<\/span>: "config"<\/span>,<\/pre>\n
      <\/p>\n
         5:<\/span>     "name"<\/span>: "web"<\/span>,<\/pre>\n
      <\/p>\n
         6:<\/span>     "dependsOn"<\/span>: [<\/pre>\n
      <\/p>\n
         7:<\/span>       "[concat('Microsoft.Web\/Sites\/', parameters('siteName'))]"<\/span><\/pre>\n
      <\/p>\n
         8:<\/span>     ],<\/pre>\n
      <\/p>\n
         9:<\/span>     "properties"<\/span>: {<\/pre>\n
      <\/p>\n
        10:<\/span>       "appSettings"<\/span>: [<\/pre>\n
      <\/p>\n
        11:<\/span>         {<\/pre>\n
      <\/p>\n
        12:<\/span>           "name"<\/span>: "apiKey"<\/span>,<\/pre>\n
      <\/p>\n
        13:<\/span>           "value"<\/span>: "[parameters('NuGetApiKey')]"<\/span><\/pre>\n
      <\/p>\n
        14:<\/span>         }<\/pre>\n
      <\/p>\n
        15:<\/span>       ]<\/pre>\n
      <\/p>\n
        16:<\/span>     }<\/pre>\n
      <\/p>\n
        17:<\/span>   },<\/pre>\n
      <\/div>\n<\/div>\n
      Now you\u2019ll have this setting set for your application:<\/p>\n
      \"image\"<\/a><\/p>\n
      Monitoring for your application<\/h2>\n
      Every application needs monitoring. Application Insights<\/a> provides you visibility into application performance and reliability. Since Application Insights is part of Azure, it is very easy to set it up and configure monitoring for your application using a deployment template. All you need is:<\/p>\n
        \n
      1. Create Application Insights resource in Azure<\/li>\n
      2. Get the Instrumentation Key of that resource and set it for your application <\/li>\n
      3. Enable Application Insights Azure WebSite extension <\/li>\n<\/ol>\n
        Here is how you can do it using azure template. <\/p>\n
        Crate Application Insights component<\/h2>\n
        First, new component needs to be created. Everything in Azure is a resource of certain provider. For Application Insights components provider is called Microsoft.Insights<\/code>. Let\u2019s give Application Insights component the same name as your application:<\/p>\n
        \n
        \n
           1:<\/span> {<\/pre>\n
        <\/p>\n
           2:<\/span>   "apiVersion"<\/span>: "2014-04-01"<\/span>,<\/pre>\n
        <\/p>\n
           3:<\/span>   "name"<\/span>: "[parameters('siteName')]"<\/span>,<\/pre>\n
        <\/p>\n
           4:<\/span>   "type"<\/span>: "Microsoft.Insights\/components"<\/span>,<\/pre>\n
        <\/p>\n
           5:<\/span>   "location"<\/span>: "Central US"<\/span>,<\/pre>\n
        <\/p>\n
           6:<\/span>   "dependsOn"<\/span>: [ ],<\/pre>\n
        <\/p>\n
           7:<\/span>   "tags"<\/span>: { "[concat('hidden-link:', resourceGroup().id, '\/providers\/Microsoft.Web\/sites\/', parameters('siteName'))]"<\/span>: "Resource"<\/span> },<\/pre>\n
        <\/p>\n
           8:<\/span>   "properties"<\/span>: { "ApplicationId"<\/span>: "[parameters('siteName')]"<\/span> }<\/pre>\n
        <\/p>\n
           9:<\/span> },<\/pre>\n
        <\/div>\n<\/div>\n
        You may note I created a hidden link between Application Insights component and web site. This link is needed so Azure portal will show Application Insights component in the list of Performance Monitoring providers.<\/p>\n
        Set instrumentation key<\/h2>\n
        Instrumentation key<\/a> is a guid that tells Application Insights SDK where to send telemetry. In Azure templates terms it is a property of Application Insights component. As we want to use instrumentation key to configure website we need to tell azure to create Application Insights component first. So I set a dependsOn<\/code> property for website:<\/p>\n
        \n
        \n
           1:<\/span> "name"<\/span>: "[parameters('siteName')]"<\/span>,<\/pre>\n
        <\/p>\n
           2:<\/span> "type"<\/span>: "Microsoft.Web\/Sites"<\/span>,<\/pre>\n
        <\/p>\n
           3:<\/span> "dependsOn"<\/span>: [<\/pre>\n
        <\/p>\n
           4:<\/span>   "[concat('Microsoft.Web\/serverFarms\/', parameters('hostingPlanName'))]"<\/span>,<\/pre>\n
        <\/p>\n
           5:<\/span>   "[concat('Microsoft.Insights\/components\/', parameters('siteName'))]"<\/span><\/pre>\n
        <\/p>\n
           6:<\/span> ],<\/pre>\n
        <\/div>\n<\/div>\n
        I also use reference function to get property of one resource and use it in another:<\/p>\n
        \n
        \n
           1:<\/span> {<\/pre>\n
        <\/p>\n
           2:<\/span>     "name"<\/span>: "APPINSIGHTS_INSTRUMENTATIONKEY"<\/span>,<\/pre>\n
        <\/p>\n
           3:<\/span>     "value"<\/span>: "[reference(concat('Microsoft.Insights\/components\/', parameters('siteName'))).InstrumentationKey]"<\/span><\/pre>\n
        <\/p>\n
           4:<\/span> }<\/pre>\n
        <\/div>\n<\/div>\n
        Enable Application Insights Azure WebSite extension <\/h2>\n
        Last step configuring Application Insights is an actual deployment of Application Insights SDK so it will monitor your website. You need to enable Azure WebSite extension<\/a> using the siteextensions<\/code> resource:<\/p>\n
        \n
        \n
           1:<\/span> {<\/pre>\n
        <\/p>\n
           2:<\/span>   "apiVersion"<\/span>: "2014-04-01"<\/span>,<\/pre>\n
        <\/p>\n
           3:<\/span>   "name"<\/span>: "Microsoft.ApplicationInsights.AzureWebSites"<\/span>,<\/pre>\n
        <\/p>\n
           4:<\/span>   "type"<\/span>: "siteextensions"<\/span>,<\/pre>\n
        <\/p>\n
           5:<\/span>   "dependsOn"<\/span>: [<\/pre>\n
        <\/p>\n
           6:<\/span>     "[resourceId('Microsoft.Web\/Sites', parameters('siteName'))]"<\/span>,<\/pre>\n
        <\/p>\n
           7:<\/span>     "[resourceId('Microsoft.Web\/Sites\/config', parameters('siteName'), 'web')]"<\/span>,<\/pre>\n
        <\/p>\n
           8:<\/span>     "[resourceId('Microsoft.Web\/sites\/sourcecontrols', parameters('siteName'), 'web')]"<\/span><\/pre>\n
        <\/p>\n
           9:<\/span>   ],<\/pre>\n
        <\/p>\n
          10:<\/span>   "properties"<\/span>: { }<\/pre>\n
        <\/p>\n
          11:<\/span> }<\/pre>\n
        <\/div>\n<\/div>\n
        You can see complete deployment template at GitHub<\/a>.<\/p>\n
        Result<\/h2>\n
        Once you updated template \u2013 you see that the first screen of wizard now has extra parameter \u201cNuGet Api Key\u201d:<\/p>\n
        \"image[34]\"<\/a><\/p>\n
        While deploying you will see that Application Insights component was created and site extension was enabled for your website:<\/p>\n
        \"image\"<\/a><\/p>\n
         <\/p>\n
        And when you browsed your application you will see all your monitoring data in portal on summary page. You can open Application Insights blade or from WebSite blade go to Tools<\/em><\/strong> > Performance Monitoring<\/em><\/strong>.<\/p>\n
        \"image\"<\/a><\/p>\n
         <\/p>\n
        And search blade:<\/p>\n
        \"image\"<\/a><\/p>\n
        Note, to see browser information you need to modify your application and inject JavaScript snippet<\/a>. <\/p>\n
        Summary<\/h2>\n
        Azure provides great flexibility in deployment automation. It is easy to deploy your application, configure it and enable monitoring for it in a single click. With the GitHub integration you can see this power. Give it a try!<\/p>\n","protected":false},"excerpt":{"rendered":"
        Browsing GitHub the other day I found an interesting button in README: Deploy to Azure. This button intrigued me to say the least. With one click I can create my own instance of that web app and try it out. Isn\u2019t it great? And it\u2019s very easy to insert into your own GitHub repo. But […]<\/p>\n","protected":false},"author":397,"featured_media":58792,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[],"class_list":["post-5871","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet"],"acf":[],"blog_post_summary":"
        Browsing GitHub the other day I found an interesting button in README: Deploy to Azure. This button intrigued me to say the least. With one click I can create my own instance of that web app and try it out. Isn\u2019t it great? And it\u2019s very easy to insert into your own GitHub repo. But […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/5871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/397"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=5871"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/5871\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=5871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=5871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=5871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}