10-publish-and-deploy.md

Publish and deploy

In this optional session, you'll deploy the pizza store app to Azure App Service.

Creating an Azure account

You'll need an Azure account or subscription to complete this session. If you don't have one already, you can sign up for a free Azure account.

After you've created your account, make sure to sign in to Visual Studio with this account so that you can access your Azure resources.

Publishing to a new Azure App Service

Azure App Service allows you to easily deploy ASP.NET Core web apps to the cloud.

Right-click on the Server project in the solution and select Publish. The ASP.NET Core Server project references the client Blazor project, so publishing the Server project will include the Blazor parts and their dependencies.

In the Publish wizard, select "Azure" and then select Next:

Select "Azure App Service (Windows)" for the specific target, and then select Next:

Wait for your subscriptions to load, and then select the subscription to use for the Azure App Service. After selecting your subscription, select "Create a new Azure App Service..." at the bottom of the dialog.

In the "App Service: Create New" dialog:

• Make sure that the correct account that you want to use for your new Azure App Service is selected in the account drop down in the upper right
• Pick a unique name for your app (which becomes part of the app's default URL)
• Select the Azure subscription you want to use along with the Resource Group and Hosting Plan
  • Resource groups are a convenient way to group related resources on Azure, so consider creating one specific to the pizza store app.
  • For the hosting plan, you'll need to select a Basic tier hosting plan or higher.

Click Create to create the app service. This may take a couple of minutes.

Once the app service has been created, make sure it is selected and then click Finish in the Publish dialog

Once the App Service is created you should see your publish profile in the Publish page:

At this point you could create a production database for your app. Since the app uses SQLite and deploys its own database, creating a database isn't necessary, but for a real app it would be.

If we publish the app at this point, it will return a server error and fail to start. This is because we first need to configure a signing key for IdentityServer. During development, we used a development key (see BlazingPizza.Server/appsettings.Development.json), but in production we need to configure an actual certificate for issuing tokens. We'll do that using Azure Key Vault.

Setup a signing certificate with Azure Key Vault

You can create a signing certificate using an existing key vault, or create a new one.

To create a new key vault:

• Sign in to the Azure portal at https://portal.azure.com.
• In the Search box, enter Key Vault.
• From the results list, choose Key vaults.
• On the Key Vault section, choose Add.
• On the Create key vault section, provide the following information:
  • Subscription: Choose your subscription.
  • Resource group: Choose the resource group for your key vault.
  • Key vault name: A unique name is required.
  • In the Region pull-down menu, choose a location.
  • Leave the other options to their defaults.
• After providing the information above, select Review + create to create your key vault.

Browse to your key vault in the Azure portal and select Certificates. Select Generate/Import to create a new certificate.

Generate a self-signed certificate with a name of your choice and a matching subject name (prefixed with "CN=") and the select Create.

Browse to your app service in the portal, select TLS/SSL Settings. Select the Private Key Certificates (.pfx) tab and then select Import Key Vault Certificate.

Select the certificate you previously created to import it into the app service.

Select the imported certificate and copy its thumbprint.

Select Configuration in the left nav for the app service. Add the WEBSITE_LOAD_CERTIFICATES application setting with its value set to the certificate thumbprint you copied previously. This setting will make the certificate available to your app using the Windows certificate store.

Now update appsettings.json in the server project configure the app to use the certificate in production.

"IdentityServer": {
  "Key": {
    "Type": "Store",
    "StoreName": "My",
    "StoreLocation": "CurrentUser",
    "Name": "CN=BlazingPizzaCertificate"
  },
  "Clients": {
    "BlazingPizza.Client": {
      "Profile": "IdentityServerSPA"
    }
  }
}

You're ready to publish! Click Publish.

Publishing the app may take a few minutes. Once the app has finished deploying it should automatically load in the browser.

Congrats!

Once you're done showing off your completed Blazor app to your friends, be sure to clean up any Azure resources that you no longer wish to maintain.