Saturday, May 29, 2021

Deploying your first Azure App Service

Today I deployed my first web app on Azure. 

Pretty trivial task, why a blogpost on it?? So there were couple of things during the process which were not very intuitive and for those I had to do a web search which took more time than what I would have liked. Below are those:
  • Deploy files into Azure App Service from local machine
  • JSON files giving 404 error
if you already know how to do these then well you may skip to some other post of mine :)

Coming to first point, "how to deploy on Azure from local machine". After I created my app service on azure portal I went to deployment center to upload files in my newly created service. There were broadly three options:
  1. CI/CD (via github and other such tools, even your local git repo)
  2. Cloud drive options (OneDrive, DropBox)
  3. FTP
This may look like a lot of options but I was looking for simple upload file/folder button for my demo app. So I did web search and after a few tries with different set of keywords I reached this page.  This page tells you can upload code directly by using below URL.

https://<app_name>.scm.azurewebsites.net/ZipDeployUI

Here <app_name> is name of app service you would have already created. On this page you can simply drag and drop your files. If you want to deploy a lot of them then simply upload as a zip. Do keep in mind to have files directly in zip and not any containing folder


Now coming to the second point, "JSON files giving 404 error".
So once my deployment was complete I was able to view my site. Only issue was at the place where a JSON file was referred. So I was able to guess it must be some config issue but what exactly that was not obvious. I did a quick web search and this StackOverflow answer told what to do. I needed to upload a simple web.config file telling IIS to assume all JSON files as static content. "How to upload", that you already know by now. Below is the content of config file that helped serve my purpose.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".json"/>
      <mimeMap fileExtension=".json" mimeType="application/json"/>
    </staticContent>
  </system.webServer>
</configuration>

That is all for now. Enjoy and stay safe!!

My Todo App :) 

About Me

My photo
Delhi, India
Fun, music, travel and nature loving, always smiling, computer addict!!