How do I create a simple, secure, Web App in Azure?

Follow these steps to create a secure Web App.
 

  1. Login to Azure portal. Select App Services from the dashboard.


     
  2. Click + Add
     
  3. Enter your subscription and Resource Group where the Web App will live. In this case I’m creating it in UIC-Central-Test and the resource group we’ve been using called OVCI-Technology Solutions-sorobert-TestRG-DEV.


     
  4. Enter the Instance details as shown in the following image.


     

NOTE:  You’ll need to select a unique Name.

  1. Click on the Monitoring tab and select NO to disable application insights.


     
  2. Click on Review and create to validate.
     
  3. Click on Create.
     
  4. You should see the following page once your WebApp has been successfully deployed. Click on Go to resource.

 
 

  1. On the resource dashboard, click on the URL to verify that things are functioning.

     
  2. When you click on the URL, you should see the following page.



     
  3. Back in the Azure portal, click on Advanced Tools under Development Tools on the left-hand side and then click Go on the subsequent screen.



     
  4. Log in using your UIC credentials.
     
  5. The Azure KUDU debugging console is presented as shown below.



     
  1. From the top menu bar, select Debug Console → CMD


     
  2. Click on the Site
  3. Click on the wwwroot
  4. At the command prompt type “ren hostingstart.html index.html” to rename the default file.
  5. Click on the “pen” symbol next to index.html to edit the file and replace the code found inside with the following:

 

<!DOCTYPE html><html><body><h1>Hello World !!</h1><p>.</p></body></html>

  1. Click on
  2. In the Azure Portal (not KUDU) click on Overview at the top of the left-hand side.
  3. Click on
  4. You should see the Web App that you’ve just created.

Accessing your Web App using a custom domain name.

You may have noticed that the web app that you’ve just created is reachable by going to http://<webappname>.azurewebsites.net.  If, in the likely situation you want to have, for example, the site to instead be reached by going to http://<webappname>.nursing.uic.edu, you’ll need to create a custom domain name.

       1.  Please follow the directions in our EIP article to create a CNAME for your website.

            NOTE:  As per the above example, we'd enter <webappname>.nursing.uic.edu in the RR field and and <webappname>.azurewebsites.net in the Hostname fiel

         

  1. Now, go back to your Webapp in azure and, under settings, click “Custom Domains”.


     
  2. Click “+ Add Custom Domain”


     
  3. Enter the “Zone” information that you entered when you created the CNAME in Qnet and click on Validate.

 NOTE:  It may take some time for this to correctly validate.  If it fails, please wait and try again later.

 Additional Required Settings

  1. Ensure web app redirects all HTTP traffic to HTTPS in Azure App Service.
    1. For each app, in settings, click on SSL settings and ensure the HTTPS Only is set to on under protocol settings.
  1. Ensure web app is using the latest version of TLS encryption.
    1. For each app, in settings, click on SSL settings and ensure that the minimum TLS Version is set to 1.2 under protocol.
  1. Ensure that Register with Azure Active Directory is enabled on App Service.
    1. For each app, in settings, click on Identity and ensure that status is set to On.
       

Prepare your web app

To bind a custom SSL certificate (a third-party certificate or App Service certificate) to your web app, your App Service Plan must be in the Basic, Standard, Premium, or Isolated tier. In this step, you make sure that your web app is in the supported pricing tier.

  1. Log into Azure
  2. Navigate to your web app
  3. From the left menu, click App Services, and then click the name of your web app.

  4. Check the pricing tier
  5. In the left-hand navigation of your web app page, scroll to the Settings section and select Scale up (App Service plan).


     
  6. Check to make sure that your web app is not in the F1 or D1 tier. Your web app's current tier is highlighted by a dark blue box

NOTE: Custom SSL is not supported in the F1 or D1 tier. If you need to scale up, follow the steps in the next section.

 Scale up your App Service plan

  1. Select any of the non-free tiers (B1, B2, B3, or any tier in the Production category). For additional options, click See additional options.
  2. Click Apply.


     
  3. When you see the following notification, the scale operation is complete.

Secure a custom domain

  1. Click Custom domains in the left navigation of your app, then click Add binding for the domain you want to secure. If you don't see Add binding for a domain, then it's already secure and should have a Secure SSL state.


     
  2. Click Upload Certificate.
  3. In PFX Certificate File, select your PFX file. In Certificate password, type the password that you created when you exported the PFX file.
  4. Click Upload.


     
  5. Wait for Azure to upload your certificate and launch the SSL bindings dialog.
  6. In the SSL bindings dialog, select the certificate you uploaded and the SSL type, and then click Add Binding.

The following SSL types are supported:

SNI-based SSL - Multiple SNI-based SSL bindings may be added. This option allows multiple SSL certificates to secure multiple domains on the same IP address. Most modern browsers (including Internet Explorer, Chrome, Firefox, and Opera) support SNI (find more comprehensive browser support information at Server Name Indication).

IP-based SSL - Only one IP-based SSL binding may be added. This option allows only one SSL certificate to secure a dedicated public IP address. To secure multiple domains, you must secure them all using the same SSL certificate. This is the traditional option for SSL binding.

  1. The domain's SSL state should now be changed to Secure.

Note: A Secure state in the Custom domains means that it is secured with a certificate, but App Service doesn't check if the certificate is self-signed or expired, for example, which can also cause browsers to show an error or warning.

 Test HTTPS

All that's left to do now is to make sure that HTTPS works for your custom domain. In various browsers, browse to https://<your.custom.domain> to see that it serves up your app.
 

Note: If your app gives you certificate validation errors, you're probably using a self-signed certificate.If that's not the case, you may have left out intermediate certificates when you export your certificate to the PFX file.

Details

Article ID: 928
Created
Fri 1/15/21 6:15 PM
Modified
Thu 10/20/22 2:56 PM

Related Services / Offerings (1)

Microsoft Azure
Microsoft Azure is an ever-expanding set of cloud services to help UIC innovate and meet your organizational needs. It’s the freedom to build, manage, and deploy applications on a massive, global network using your favorite tools and frameworks.