DEV Community

Cover image for Article on how to create Azure App service and deploy it.
EMMANUEL
EMMANUEL

Posted on

Article on how to create Azure App service and deploy it.

Azure App Services
Is a Platform as a Service (PaaS) that is used to build, deploy, and scale enterprise-grade applications such as web apps, mobile apps, logic apps, API apps, and function apps. It supports multiple programming languages and frameworks such as NET, .NET Core, Java, Ruby, Node.js, PHP, Python.From a developers perspective Azure App Service provides a great platform to develop, deploy and scale applications. However, when it comes to production environments Infrastructure as code (IaC) comes in handy. Terraform is an open-source IaC tool with a consistent CLI that lets you write infrastructure as code using declarative configuration files and also, manage, plan and apply changes to infrastructure versions to reach the required configuration state.

To deploy the web app in Azure App Service, here are the steps we need to follow:

1.Create the Resource Group
2.Create App Service plan
3.Deploy web app

In this article I am going to create an app services and deploy it.

Step 1
Login to your azure portal,

Azure Login

Step 2
In azure portal, go to the resource search field or hamburger icon/create resource and search for App services.click 'Enter',then click non the grayed 'App services.

App service search

Step 3
click on 'Create' button, then click on 'Web app' and wait for it while to load.

Create & Web App

Step 4
In the 'Project details' create a 'Resource group'

New Resource group

Step 5
In your Instance details, choose the web name, Runtime stack (.Net 8(LTS) ), publish (we choose 'Code')region,(North Europe).

Instance details

Step 6
we go to pricing plan and choose our plan, the computer does choose the plan themselves but you can decide to choose your web plan.N/B In pricing plan we don't use free and shared pricing plan for production, they are only for experimental purpose.In this article we going to choose standard for our article.Then click on 'Review+Create'.

Pricing Plan

Pricing Plan

Review+Create

Step 7
After clicking on 'Review+Create ',wait for it to load ,then click on 'Create',wait for it to initialise and deployed for couple of minutes

Create

Deployment in progress

Deployment Complete

Step 8
Click on 'Go to Resource'

Go to Resource

Step 9
Click on the Default domain, then our empty web app will prompt up on the browser, waiting for content

Default domain

Web App

Step 10
We need to bring code to this app for content,so to do that we are going to click on 'Deployment',then 'Deployment centre',choose your code sources, it can be GitHub,Azure repos, Local git,

To bring code to the app

Deployment Center

Code sources

Step 11
But in this article ,I'm not going to use any of the source code listed above, so I'm going to go to 'Overview',in the 'Search field'i'm going to type Advance Tools, and click on it.After few seconds,click on 'Go'

Advance Tools

Go page

Step 12
After clicking on 'Go',it prompt up a new window, you will see the app service environment, because we are working on work related Wordpress.Click on 'Debug console' and choose 'CMD' .Click on 'Site',then click on the 'wwwroot' folder.Click on the pencil icon

App service enviroment

working on site

Root folder

Pencil Icon

Step 13
After clicking on site, a page will prompt up, clear whatever code you see on the font, then go to chatGPT to get a code.

Clear the Font

Code from chatGPT

Step 14
In chatGPT, type in what code you want and wait for it to be generated, then copy the code, go back to 'Kudu+',paste it and saved.

Generated code

Code Copy

Pasting and saving code on kudu+

Step 15
Now you have added the code, go back to the app service, click on the 'Default domain'

Default domain

uploaded web APP.

Top comments (0)