Skip to content

How to deploy your AzUrlShortener

Frank Boucher edited this page Jun 16, 2023 · 13 revisions

Deployment

If you want to use TinyBlazorAdmin a static website for management, you must first follow the steps for TinyBlazorAdmin. Once the TinyBlazorAdmin is deployed you can continue here. The TinyBlazorAdmin is optional.

To deploy the AzUrlShortener resources in your subscription click on the following button.

Deploy to Azure

This will open the Azure Portal (portal.azure.com) in your subscription and create the required resources.

Custom deployment form from the Azure portal

  • Resource group: Logical group where your resources will be created. IF deploy with the TinyBlazorAdmin use the same.
  • Region: Select a location (usually closest to your users)
  • Base Name: This is how you would like to name your resources. Because some names need to be globally unique, the deployment will generate a suffix and append it to the end of your Base name.
  • Existing SWA Name: If you are using TinyBlazorAdmin, this is the name of the already deployed TinyBlazorAdmin static web app. If you don't want to use this UI, keep the default: "SKIP-THIS-RESOURCE".
  • Default Redirect Url: Default URL used when the short URL passed by the user is not found.
  • GitHub URL and Branch: Keep the default if you when to deploy from Microsoft's main repo.
  • Expire On and Owner Name: Those values are for tags. They won't affect your deployment. I use it in another project (AzSubscriptionCleaner) to clean my subscription; without this project, it's just informational.

Click the Review + create button to create the resources. You will have this agreement notification as you are creating Azure resources in your Azure subscription. Click the Create button.

Agreement notification.

Result

The resources will be created quickly, but the Azure Function App code deploy will take a few minutes. Once you receive the Deployment Complete message, you will end up with the following:

  • Azure Function App (ending in -fa): This is the API that will serve the data and perform the redirection.
  • App Service Plan (ending in -asp): Dynamic service plan (a.k.a. Consumption Plan) to make sure you are only charged on a per-second granularity.
  • Application Insights (ending in -ai): Collects metrics/usage of our function. (In the future we could Frontend that information in a friendly web UI)
  • A storage account (ending in sa): Stores data for the azure function itself and the Azure Table storage containing the URL data.
  • A static web app: If previously deployed, this is the UI to manage the URL data.

View of the Azure portal with all the resources deployed

Validate the deployment

The tables in the Azure Storage will be created automatically, if they do not already exist.

Before adding a domain and testing the frontend, let's test if the redirect works. From the Azure Portal open the Azure Function. In the Essentials section, at the top of the Overview blade find the URL. In this example, it's https://shortenertool-be5cq-fa.azurewebsites.net

Azure Function blade

In your favorite browser enter that URL + /test. It will look like this https://shortenertool-be5cq-fa.azurewebsites.net/test.

It should redirect you to the Default Url Redirect web page you selected. In this case https://azure.microsoft.com.

urlRedirect-test

Next Steps