{"id":3904,"date":"2023-11-04T23:13:55","date_gmt":"2023-11-04T23:13:55","guid":{"rendered":"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/"},"modified":"2023-11-05T05:48:28","modified_gmt":"2023-11-05T05:48:28","slug":"how-to-deploy-a-web-app-to-azure-app-service","status":"publish","type":"post","link":"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/","title":{"rendered":"How to deploy a web app to Azure App Service"},"content":{"rendered":"<p>Azure App Service is a fully managed platform that allows developers to build, deploy and scale web apps quickly and easily. In this tutorial, we will cover how to deploy a web app to Azure App Service using different tools and methods. We will also cover how to connect to a database and configure custom domains.<\/p>\n<h2>Prerequisites<\/h2>\n<p>Before getting started, there are a few prerequisites you need to have in place:<\/p>\n<ul>\n<li>An Azure account. You can create a free account <a href=\"https:\/\/azure.microsoft.com\/free\/\">here<\/a> if you don\u2019t have one already.<\/li>\n<li>An IDE (Integrated Development Environment) for your programming language of choice such as Visual Studio, VS Code, Eclipse or IntelliJ IDEA.<\/li>\n<li>A web app that you want to deploy. For this tutorial, we will use a simple Node.js app.<\/li>\n<\/ul>\n<h2>Create an App Service<\/h2>\n<p>To deploy a web app to Azure App Service, we need to create an App Service first:<\/p>\n<ol>\n<li>Login to the <a href=\"https:\/\/portal.azure.com\/\">Azure portal<\/a> using your Azure account credentials.<\/li>\n<li>On the left-hand menu, click on \u201cApp Services\u201d.<\/li>\n<li>Click on the \u201cAdd\u201d button to create a new App Service.<\/li>\n<li>Fill in the required details for the new app service, including the subscription, resource group, app service name, and runtime stack. For runtime stack, select Node.js for a Node.js app. You can also choose to configure additional settings such as Application Insights and deployment slots.<\/li>\n<li>Click on \u201cCreate\u201d to create the new app service.<\/li>\n<\/ol>\n<p>Once the App Service is created, we can deploy our web app.<\/p>\n<h2>Deploying via FTP<\/h2>\n<p>One way to deploy a web app is via FTP. We will need to retrieve the FTP publishing credentials for our app service and then use an FTP client such as FileZilla to connect and transfer the web app files.<\/p>\n<ol>\n<li>In the Azure portal, navigate to the App Service that you want to deploy to.<\/li>\n<li>On the left-hand menu, click on \u201cDeployment Center\u201d under the \u201cDeployment\u201d section.<\/li>\n<li>Select \u201cFTP\u201d as the deployment method and click \u201cFTP\/Credentials\u201d to retrieve the FTP hostname, username, and password. Save these credentials for later.<\/li>\n<li>Download and install an FTP client such as FileZilla.<\/li>\n<li>Open FileZilla and enter the FTP hostname, username, and password retrieved earlier.<\/li>\n<li>Navigate to the local directory where your web app files are stored and select them all.<\/li>\n<li>Drag and drop the files to the server (right-hand side of FileZilla).<\/li>\n<li>Wait for the transfer to complete, and then navigate to the app service URL to view your deployed web app.<\/li>\n<\/ol>\n<h2>Deploying via Git<\/h2>\n<p>Another way to deploy a web app is via Git. We can link our Git repository to our app service and use Git pushes to deploy changes. Here is how:<\/p>\n<ol>\n<li>In the Azure portal, navigate to the App Service that you want to deploy to.<\/li>\n<li>On the left-hand menu, click on \u201cDeployment Center\u201d under the \u201cDeployment\u201d section.<\/li>\n<li>Select \u201cGitHub\u201d as the source control and click \u201cAuthorize\u201d to link the Azure portal to your GitHub account.<\/li>\n<li>Select the repository, branch and folder that contain your web app files and click \u201cContinue\u201d.<\/li>\n<li>Configure any additional settings such as deployment slots and Application Insights if needed.<\/li>\n<li>Click \u201cFinish\u201d to deploy the web app.<\/li>\n<\/ol>\n<p>Once the deployment is complete, any subsequent Git pushes to the linked repository will automatically be deployed to the app service.<\/p>\n<h2>Connecting to a Database<\/h2>\n<p>In many cases, web apps need to connect to a database to store and retrieve data. Azure App Service provides many options for connecting to a database, such as Azure SQL Database, MySQL, PostgreSQL, and MongoDB. Here are the general steps to connect to a database from your web app:<\/p>\n<ol>\n<li>Create a database in Azure. We won\u2019t cover the specifics of creating a database in this tutorial, but you can refer to the Azure documentation for more information.<\/li>\n<li>Retrieve the connection string for the database. This is typically a URL that contains the server name, username, password, and database name.<\/li>\n<li>In your web app\u2019s code, update the database connection string to use the one retrieved in step 2.<\/li>\n<li>Deploy the updated web app using one of the methods we covered earlier.<\/li>\n<\/ol>\n<h2>Configuring Custom Domains<\/h2>\n<p>By default, Azure App Service provides a URL for your web app that looks something like this: <code>https:\/\/&lt;app-service-name&gt;.azurewebsites.net\/<\/code>. However, you may want to use a custom domain name instead of the default Azure domain name. Here is how to configure a custom domain name for your Azure App Service:<\/p>\n<ol>\n<li>Register a domain name with a domain registrar such as GoDaddy or Namecheap if you don\u2019t have one already.<\/li>\n<li>In the Azure portal, navigate to the App Service that you want to add a custom domain to.<\/li>\n<li>On the left-hand menu, click on \u201cCustom domains\u201d under the \u201cSettings\u201d section.<\/li>\n<li>Click on \u201cAdd custom domain\u201d, and enter your custom domain name.<\/li>\n<li>Follow the instructions to verify domain ownership with your domain registrar.<\/li>\n<li>Once your ownership is verified, navigate to your domain registrar and configure a CNAME record that points to your app service URL. The CNAME record should look something like this: <code>&lt;app-service-name&gt;.azurewebsites.net.<\/code><\/li>\n<li>Wait for the DNS changes to propagate, which can take up to 24 hours.<\/li>\n<li>Once the DNS changes have propagated, your custom domain should now point to your Azure App Service.<\/li>\n<\/ol>\n<h2>Conclusion<\/h2>\n<p>In this tutorial, we covered the basics of deploying a web app to Azure App Service using different tools and methods. We also covered how to connect to a database and configure custom domains. Azure App Service provides a powerful platform for building and deploying web apps quickly and easily. Hope this tutorial was helpful in familiarizing you with deploying web apps on Azure App Service.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Azure App Service is a fully managed platform that allows developers to build, deploy and scale web apps quickly and easily. In this tutorial, we will cover how to deploy a web app to Azure App Service using different tools and methods. We will also cover how to connect to <a href=\"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/\" class=\"btn btn-link continue-link\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[30,212,232,49,231],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to deploy a web app to Azure App Service - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to deploy a web app to Azure App Service\" \/>\n<meta property=\"og:description\" content=\"Azure App Service is a fully managed platform that allows developers to build, deploy and scale web apps quickly and easily. In this tutorial, we will cover how to deploy a web app to Azure App Service using different tools and methods. We will also cover how to connect to Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:13:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:48:28+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Panther\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t            },\n\t            \"headline\": \"How to deploy a web app to Azure App Service\",\n\t            \"datePublished\": \"2023-11-04T23:13:55+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:28+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/\"\n\t            },\n\t            \"wordCount\": 938,\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"keywords\": [\n\t                \"\\\"cloud computing\\\"\",\n\t                \"\\\"Microsoft Azure\\\"\",\n\t                \"\\\"web app deployment\\\"\",\n\t                \"\\\"Web development\\\"\",\n\t                \"[\\\"Azure App Service\\\"\"\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/\",\n\t            \"url\": \"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/\",\n\t            \"name\": \"How to deploy a web app to Azure App Service - Pantherax Blogs\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t            },\n\t            \"datePublished\": \"2023-11-04T23:13:55+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:28+00:00\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"http:\/\/localhost:10003\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"How to deploy a web app to Azure App Service\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": \"required name=search_term_string\"\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"width\": 1024,\n\t                \"height\": 1024,\n\t                \"caption\": \"Pantherax Blogs\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t            \"name\": \"Panther\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t                \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"caption\": \"Panther\"\n\t            },\n\t            \"sameAs\": [\n\t                \"http:\/\/localhost:10003\"\n\t            ],\n\t            \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to deploy a web app to Azure App Service - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/","og_locale":"en_US","og_type":"article","og_title":"How to deploy a web app to Azure App Service","og_description":"Azure App Service is a fully managed platform that allows developers to build, deploy and scale web apps quickly and easily. In this tutorial, we will cover how to deploy a web app to Azure App Service using different tools and methods. We will also cover how to connect to Continue Reading","og_url":"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:13:55+00:00","article_modified_time":"2023-11-05T05:48:28+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"How to deploy a web app to Azure App Service","datePublished":"2023-11-04T23:13:55+00:00","dateModified":"2023-11-05T05:48:28+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/"},"wordCount":938,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"cloud computing\"","\"Microsoft Azure\"","\"web app deployment\"","\"Web development\"","[\"Azure App Service\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/","url":"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/","name":"How to deploy a web app to Azure App Service - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:13:55+00:00","dateModified":"2023-11-05T05:48:28+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/how-to-deploy-a-web-app-to-azure-app-service\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"How to deploy a web app to Azure App Service"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3904"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=3904"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3904\/revisions"}],"predecessor-version":[{"id":4640,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3904\/revisions\/4640"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=3904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=3904"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=3904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}