Deploying to Azure AppService
Deploying fullstackhero's Web API to Azure AppService from Visual Studio
To Get started, Insure you
2022 with an account registered in
Azure Portal and having an active
Step 1: Right click Host project as shown on the picture below and click Publish
Step 2: Select Azure from the Dialog as shown below and click Next
Step 3: Select Azure App Service (Windows) as shown below and click Next
Step 4: Click the green Plus(+) button to create an new
App Service Instance. Notice the
Subscription name, you must select your active subscription.
Step 5: Write your
Api name, this will form part of your application link(url)
Subscription name as previously
Click New on
Resource group to create new resource group.
Step 6: Write a
Resource group name, this is a grouping for resource to be created in Azure. I wrote
Mango-RG, write your own
resource group name. Click Ok to save it.
Step 7: Notice Our
Resource group name appears. Now click New to create a new
Step 8: Give a
Hosting Plan name,
Location I kept the default, but you may need to select the closest area to you. Click dropdown on
Free, this is a free plan, you are welcome to choose any you can afford through your subscription. Click Ok.
Step 9: Click Create as shown below, at this point your resources will be created in
Step 10: Notice your
Api Application instance has been created. Now Click finish.
Step 11: At this point we can see all our resources.
Before we start configuring, do the following
Install these packages in
Host project, make sure they are of the same
version as installed in
Infrastructure. Doing this help avoid errors later.
Now back to publish tab in
Click Configure under Service Dependencies to create
Step 12: Select
Azure SQL Database to create database hosted in
Azure. Click Next
Step 12: Select the same
subscription as before. Click the green Plus(+) button to create
database server and
Step 13: Give a
database name, notice the validation error! A
database server needs to be first created. Now click the New button to create it.
Step 14: Give
database server name, Location (nearest to you), admin
username (used to access this
database server) and
password. Click Ok, to start creating the
Azure Portal. This will take few minutes. NB note down username and password. I usually add them to a notepad.
Step 15: Notice our
database server and
database are created, see within green block. Now select this row and click Next.
Step 16: Fill in
ConnectionString key as it in
appsetting.json, mine is
Password create in Step 14. Click the green block to copy the connection and save it on notepad or anywhere you will be able to find it. Click None
Step 17: Click finish and restore of
NuGet packages will begin. Make sure
NuGet packages is checked.
NB. If you get an error, follow Step 11. The error is caused by package restore for
Host project, it needs
Microsoft.EntityFrameworkCore.Tools for database migration. The tool tries to install them for you but it only picks versions
6.0.0 which are not the same versions as those installed in
Infrastructure. Get that?
You will be taken back to Step 12 but don’t panic, you won’t have to create
database server as they are already created.
The restore should be successful as shown below.
NB. Replace the
ConnectionStrings in both
hangfire.json with the one you have just created above. This means you’re
Api will now point to
Azure database server.
Step 18: Login Azure Portal to verify all resources we have just created. Notice all our resources are on the list. Nice. Now let go to
Visual Studio and
Step 19: In
Visual Studio, Click Publish (green block), this mean you are now
Api to the
Azure and can be access on the internet using the url on Site as indicated on the picture.
Publish is successful and the
Api was automatically launched in a browser
Deployment error as the
Api is launched in the browser.
Step 20: This error is caused by
Azure blocking all public access to the
database server via IP address.
To see this on the Log file that our application generate, do the following
- Open a new tab in your browser
- Write your
Apiurl and add
- This is a Kudu dashboard that can be used for debuging your deployed applications, in our case we are debugging our
- Click on Debug console as indicated by an arrow, select CMD
- Look for
- Click the download icon where the arrow points to, this should open a new browser tab with your
This is what the
log exception says
Microsoft.Data.SqlClient.SqlException (0x80131904): Cannot open server
'mangotestdbdbserver' requested by the login. Client with IP address
'20.****.40.0' is not allowed to access the server. To enable access, use the Windows Azure Management Portal or run
sp_set_firewall_rule on the
master database to create a
firewall rule for this IP address or address range.
I now need to grant this
IP address access to my
database server in
- Go to the
database serveryou have created, in my case is
SQL databases to view your
database, it will appear in the table, click it.
Set server firewallwithin the red block
- Click Add a
- On the dialog I add my local
IP address(suggested by azure) and
IP addressas show from the
logbecause I want this
IP addressand my local machine to have access to the
Visual Studio and Click Publish (Step 19)
Now the launched browser shows
404, relax you have done it.
Api documentation in
/swagger/index.html to the
url and you should see your
Testing via Postman
You are welcome to use any
Api client you like for testing.
Add your deployed
url like I did below
I get a response back and it includes a token as expected!!!!
That’s it guys, hope this can help someone. Screenshots are not of the best quality.
Api can be accessed here
Like fullstackhero? ❤️
Here is what you can do to show your support!Buy me a Coffee ☕ Sponsor 😍