{"id":13,"date":"2021-05-12T15:19:00","date_gmt":"2021-05-12T15:19:00","guid":{"rendered":""},"modified":"2021-09-23T17:48:47","modified_gmt":"2021-09-23T15:48:47","slug":"docker-and-webapp","status":"publish","type":"post","link":"http:\/\/panahy.nl\/index.php\/2021\/05\/12\/docker-and-webapp\/","title":{"rendered":"Docker and Webapp"},"content":{"rendered":"<p><span style=\"background-color: white; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 16px; letter-spacing: -0.08px; white-space: pre-wrap;\">In this page we will create a WebApp that serves a Docker image and see how to put it in CI\/CD.<\/span><\/p>\n<h2 style=\"background-color: white; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 1.43em; font-weight: normal; letter-spacing: -0.008em; line-height: 1.2; margin: 1.8em 0px 0px; padding: 0px; white-space: pre-wrap;\" data-renderer-start-pos=\"100\">Create a Web App<button style=\"color: #42526e; cursor: pointer; display: inline; font-family: inherit; opacity: 0; outline: none; padding-left: 0px; padding-right: 0px; right: 0px; transform: translate(-8px, 0px); transition: opacity 0.2s ease 0s, transform 0.2s ease 0s; border: initial none initial;\"><\/button><\/h2>\n<p style=\"background-color: white; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 16px; letter-spacing: -0.005em; line-height: 1.714; margin: 0.75rem 0px 0px; padding: 0px; white-space: pre-wrap;\" data-renderer-start-pos=\"118\">If you are creating a web app in Azure portal, start with selecting <strong data-renderer-mark=\"true\">Docker Container<\/strong> as Publish property in Basics tab. Choose <strong data-renderer-mark=\"true\">Linux<\/strong> as Operating System. For this example a <strong data-renderer-mark=\"true\">Standard SKU<\/strong> would just do fine.<br \/>\nNext, on the Docker-tab select your existing <a style=\"color: #0052cc; text-decoration-line: none;\" title=\"http:\/\/azurecr.io\" href=\"http:\/\/azurecr.io\/\" data-renderer-mark=\"true\">azurecr.io<\/a> container registry and specify the <strong data-renderer-mark=\"true\">Image:Tag <\/strong> you want to serve.<\/p>\n<p style=\"background-color: white; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 16px; letter-spacing: -0.005em; line-height: 1.714; margin: 0.75rem 0px 0px; padding: 0px; white-space: pre-wrap;\" data-renderer-start-pos=\"447\">My tempate looks something inline with the following:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">\"resources\": [{\r\n        \"apiVersion\": \"2018-11-01\",\r\n        \"name\": \"[parameters('name')]\",\r\n        \"type\": \"Microsoft.Web\/sites\",\r\n        \"location\": \"[parameters('location')]\",\r\n        \"tags\": {},\r\n        \"dependsOn\": [\"[concat('Microsoft.Web\/serverfarms\/', parameters('hostingPlanName'))]\"],\r\n        \"properties\": {\r\n            \"name\": \"[parameters('name')]\",\r\n            \"siteConfig\": {\r\n                \"appSettings\": [{\r\n                        \"name\": \"DOCKER_REGISTRY_SERVER_URL\",\r\n                        \"value\": \"[parameters('dockerRegistryUrl')]\"\r\n                    }, {\r\n                        \"name\": \"DOCKER_REGISTRY_SERVER_USERNAME\",\r\n                        \"value\": \"[parameters('dockerRegistryUsername')]\"\r\n                    }, {\r\n                        \"name\": \"DOCKER_REGISTRY_SERVER_PASSWORD\",\r\n                        \"value\": \"[parameters('dockerRegistryPassword')]\"\r\n                    }, {\r\n                        \"name\": \"WEBSITES_ENABLE_APP_SERVICE_STORAGE\",\r\n                        \"value\": \"false\"\r\n                    }\r\n                ],\r\n                \"linuxFxVersion\": \"[parameters('linuxFxVersion')]\",\r\n                \"appCommandLine\": \"\",\r\n                \"alwaysOn\": \"[parameters('alwaysOn')]\"\r\n            },\r\n            \"serverFarmId\": \"[concat('\/subscriptions\/', parameters('subscriptionId'),'\/resourcegroups\/', parameters('serverFarmResourceGroup'), '\/providers\/Microsoft.Web\/serverfarms\/', parameters('hostingPlanName'))]\",\r\n            \"clientAffinityEnabled\": false\r\n        }\r\n    }, {\r\n        \"apiVersion\": \"2018-11-01\",\r\n        \"name\": \"[parameters('hostingPlanName')]\",\r\n        \"type\": \"Microsoft.Web\/serverfarms\",\r\n        \"location\": \"West Europe\",\r\n        \"kind\": \"linux\",\r\n        \"tags\": {},\r\n        \"dependsOn\": [],\r\n        \"properties\": {\r\n            \"perSiteScaling\": false,\r\n            \"maximumElasticWorkerCount\": 1,\r\n            \"isSpot\": false,\r\n            \"reserved\": true,\r\n            \"isXenon\": false,\r\n            \"hyperV\": false,\r\n            \"targetWorkerCount\": 0,\r\n            \"targetWorkerSizeId\": 0\r\n        },\r\n        \"sku\": {\r\n            \"Tier\": \"Standard\",\r\n            \"Name\": \"S1\",\r\n            \"size\": \"S1\",\r\n            \"family\": \"S\",\r\n            \"capacity\": 1\r\n        }\r\n    }\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p style=\"background-color: white; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 16px; letter-spacing: -0.005em; line-height: 1.714; margin: 0.75rem 0px 0px; padding: 0px; white-space: pre-wrap;\" data-renderer-start-pos=\"447\"><span style=\"background-color: #deebff; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 16px; letter-spacing: -0.08px; white-space: pre-wrap;\">As a <\/span><u style=\"background-color: #deebff; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 16px; letter-spacing: -0.08px; white-space: pre-wrap;\" data-renderer-mark=\"true\">security matter<\/u><span style=\"background-color: #deebff; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 16px; letter-spacing: -0.08px; white-space: pre-wrap;\"> I have to point out the fact that the Web App is connecting to Azure Container Registry using 3 configuration items i.e. Server Url, Server Username and Server <\/span><strong style=\"background-color: #deebff; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 16px; letter-spacing: -0.08px; white-space: pre-wrap;\" data-renderer-mark=\"true\">Password<\/strong><span style=\"background-color: #deebff; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 16px; letter-spacing: -0.08px; white-space: pre-wrap;\">. These items are visible in Azure Portal Configuration:<\/span><br style=\"background-color: #deebff; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 16px; letter-spacing: -0.08px; white-space: pre-wrap;\" \/><span style=\"-webkit-box-decoration-break: clone; background-color: rgba(9, 30, 66, 0.08); border-radius: 3px; border-style: none; box-shadow: rgba(9, 30, 66, 0.08) -4px 0px 0px 0px, rgba(9, 30, 66, 0.08) 4px 0px 0px 0px; color: #172b4d; font-family: SFMono-Medium, 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace; font-size: 13.712px; letter-spacing: -0.08px; margin: 0px 4px; overflow: auto; padding: 2px 0px; white-space: pre-wrap;\" data-renderer-mark=\"true\">DOCKER_REGISTRY_SERVER_URL<\/span><span style=\"background-color: #deebff; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 16px; letter-spacing: -0.08px; white-space: pre-wrap;\">, <\/span><span style=\"-webkit-box-decoration-break: clone; background-color: rgba(9, 30, 66, 0.08); border-radius: 3px; border-style: none; box-shadow: rgba(9, 30, 66, 0.08) -4px 0px 0px 0px, rgba(9, 30, 66, 0.08) 4px 0px 0px 0px; color: #172b4d; font-family: SFMono-Medium, 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace; font-size: 13.712px; letter-spacing: -0.08px; margin: 0px 4px; overflow: auto; padding: 2px 0px; white-space: pre-wrap;\" data-renderer-mark=\"true\">DOCKER_REGISTRY_SERVER_USERNAME<\/span><span style=\"background-color: #deebff; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 16px; letter-spacing: -0.08px; white-space: pre-wrap;\">, <\/span><span style=\"-webkit-box-decoration-break: clone; background-color: rgba(9, 30, 66, 0.08); border-radius: 3px; border-style: none; box-shadow: rgba(9, 30, 66, 0.08) -4px 0px 0px 0px, rgba(9, 30, 66, 0.08) 4px 0px 0px 0px; color: #172b4d; font-family: SFMono-Medium, 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace; font-size: 13.712px; letter-spacing: -0.08px; margin: 0px 4px; overflow: auto; padding: 2px 0px; white-space: pre-wrap;\" data-renderer-mark=\"true\">DOCKER_REGISTRY_SERVER_PASSWORD<\/span><\/p>\n<p style=\"background-color: white; line-height: 1.714; margin: 0.75rem 0px 0px; padding: 0px;\" data-renderer-start-pos=\"447\"><code><\/code><\/p>\n<p style=\"background-color: white; line-height: 1.714; margin: 0.75rem 0px 0px; padding: 0px;\" data-renderer-start-pos=\"447\"><code><\/code><\/p>\n<p style=\"background-color: white; line-height: 1.714; margin: 0.75rem 0px 0px; padding: 0px;\" data-renderer-start-pos=\"447\"><code><\/code><\/p>\n<h2 style=\"background-color: white; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 1.43em; font-weight: normal; letter-spacing: -0.008em; line-height: 1.2; margin: 1.8em 0px 0px; padding: 0px; white-space: pre-wrap;\" data-renderer-start-pos=\"3449\">Deploy Docker Image<button style=\"color: #42526e; cursor: pointer; display: inline; font-family: inherit; opacity: 0; outline: none; padding-left: 0px; padding-right: 0px; right: 0px; transform: translate(-8px, 0px); transition: opacity 0.2s ease 0s, transform 0.2s ease 0s; border: initial none initial;\"><\/button><\/h2>\n<p style=\"background-color: white; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 16px; letter-spacing: -0.005em; line-height: 1.714; margin: 0.75rem 0px 0px; padding: 0px; white-space: pre-wrap;\" data-renderer-start-pos=\"3470\">In both cases where the Docker image gets pulled from Container Registry, you need to <strong data-renderer-mark=\"true\">restart the instance <\/strong>in Container Instance and also in Web App Docker instance.<\/p>\n<p style=\"background-color: white; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 16px; letter-spacing: -0.005em; line-height: 1.714; margin: 0.75rem 0px 0px; padding: 0px; white-space: pre-wrap;\" data-renderer-start-pos=\"3637\">An other option would be to move the pull task into Azure Pipeline using. My example is defined as follows:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">steps: \r\n\u2013 task: AzureRmWebAppDeployment@4 \r\n  displayName: \u2018Deploy Azure App Service\u2019 \r\n  inputs: \r\n    azureSubscription: \u2018$(Parameters.ConnectedServiceName)\u2019 \r\n    appType: \u2018Web App for Containers (Linux)\u2019 \r\n    WebAppName: \u2018$(Parameters.WebAppName)\u2019 \r\n    DockerNamespace: \u2018https:\/\/securedcontainerregistry.azurecr.io\u2019  \r\n    DockerRepository: \u2018https:\/\/securedcontainerregistry.azurecr.io\/securedazurelib\u2019  \r\n    DockerImageTag: \u2018latest\u2019  \r\n    StartupCommand: \u201d<\/pre>\n<div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this page we will create a WebApp that serves a Docker image and see how to put it in CI\/CD. Create a Web App If you are creating a web app in Azure portal, start with selecting Docker Container as Publish property in Basics tab. Choose Linux as Operating System. For this example a &hellip; <a href=\"http:\/\/panahy.nl\/index.php\/2021\/05\/12\/docker-and-webapp\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Docker and Webapp&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,11],"tags":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false},"uagb_author_info":{"display_name":"Pouya Panahy","author_link":"http:\/\/panahy.nl\/index.php\/author\/pouya\/"},"uagb_comment_info":0,"uagb_excerpt":"In this page we will create a WebApp that serves a Docker image and see how to put it in CI\/CD. Create a Web App If you are creating a web app in Azure portal, start with selecting Docker Container as Publish property in Basics tab. Choose Linux as Operating System. For this example a&hellip;","_links":{"self":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts\/13"}],"collection":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":6,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts\/13\/revisions"}],"predecessor-version":[{"id":181,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts\/13\/revisions\/181"}],"wp:attachment":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/media?parent=13"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/categories?post=13"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/tags?post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}