Set up a custom domain with Azure DNS in Azure Static Web Apps
By default, Azure Static Web Apps provides an auto-generated domain name for your website, but you can point a custom domain to your site. Free SSL/TLS certificates are automatically created for the auto-generated domain name and any custom domains you may add.
This guide demonstrates how to configure your domain name with the www
subdomain. Once this procedure is complete, you can set up an apex domain.
The following procedure requires you to copy settings from an Azure DNS zone you create and your existing static web app. Consider opening the Azure portal in two different windows to make it easier to switch between the two services.
Prerequisites
- A custom domain
- An existing Azure DNS zone
- If you don't already have one, refer to Delegate your domain to Azure DNS
Map the domain to your website
Now that your domain is configured for Azure to manage the DNS, you can now link your DNS zone to your static web app.
Get static web app URL
Open the Azure portal.
Go to your static web app.
From the Overview window, copy the generated URL of your site and set it aside in a text editor for future use.
Create DNS records in Azure DNS
Return to the DNS zone you created in the Azure portal.
Select + Record set.
Enter the following values in the Add record set window.
Setting Property Name Enter www Type Select CNAME - Link your subdomain to another account Alias record set Select No. TTL Keep default value. TTL unit Keep default value. Alias Paste in the Static Web Apps generated URL you set aside in a previous step. Make sure to remove the https://
prefix from your URL.Additionally, you can select Yes for Alias record set and select your static web app instead of explicitly providing the URL to take advantage of alias record sets like prevention from dangling DNS records.
Select OK.
Configure static web app custom domain
Return to your static web app in the portal.
Under Settings, select Custom domains.
Select + Add.
In the Subdomain box, enter your subdomain name (i.e., www). The Full domain field should then display the name of your custom domain, including subdomain.
Note
If you have delegated your domain to Azure DNS, and also elected to Add custom domain on Azure DNS when configuring your custom domain, you will have the option to select the Azure DNS zone. The following steps will then be performed automatically for you after you select Add.
Select Next.
In the Validate + add tab, enter the following values.
Setting Value Domain name This value should match the domain name you entered in the previous step (with the www
subdomain).Hostname record type Select CNAME. Select Add.
If you get an error saying that the action is invalid, wait 5 minutes and try again.
Open a new browser tab and go to your domain with the
www
subdomain.After the DNS records are updated, you should see your static web app in the browser. Also, inspect the location to verify that your site is served securely using
https
.
Next steps
Feedback
https://aka.ms/ContentUserFeedback.
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see:Submit and view feedback for