Skip to content

Commit 52bf498

Browse files
LJSpillerLJSpiller
authored
Merge pull request #188208 from craigshoemaker/swa/custom-domains-02-10
[Static Web Apps] Custom domain (restructure)
2 parents a90fc41 + f9d45de commit 52bf498

File tree

8 files changed

+549
-315
lines changed

8 files changed

+549
-315
lines changed

‎articles/static-web-apps/TOC.yml

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,26 @@
5050
href: authentication-custom.md
5151
- name: Review pull requests in pre-production environments
5252
href: review-publish-pull-requests.md
53-
- name: Custom domain
54-
href: custom-domain.md
53+
- name: Custom domains
54+
items:
55+
- name: About custom domains
56+
href: custom-domain.md
57+
- name: Use Azure DNS
58+
items:
59+
- name: Delegate your domain to Azure DNS
60+
href: azure-dns-zone.md
61+
- name: Set up a custom domain
62+
href: custom-domain-azure-dns.md
63+
- name: Set up the apex domain
64+
href: apex-domain-azure-dns.md
65+
- name: Use an external provider
66+
items:
67+
- name: Set up a custom domain
68+
href: custom-domain-external.md
69+
- name: Set up the apex domain
70+
href: apex-domain-external.md
71+
- name: Manage the default domain
72+
href: custom-domain-default.md
5573
- name: How-to guides
5674
items:
5775
- name: APIs

‎articles/static-web-apps/apex-domain-azure-dns.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: Set up an apex domain with Azure DNS in Azure Static Web Apps
3+
description: Configure the root domain with Azure DNS in Azure Static Web Apps
4+
services: static-web-apps
5+
author: craigshoemaker
6+
ms.service: static-web-apps
7+
ms.topic: how-to
8+
ms.date: 02/11/2022
9+
ms.author: cshoe
10+
---
11+
12+
# Set up an apex domain with Azure DNS in Azure Static Web Apps
13+
14+
Domain names without a subdomain are known as apex or root domains. For example, the domain `www.example.com` is the `www` subdomain joined with the `example.com` apex domain.
15+
16+
This guide demonstrates how to use `TXT` and `ALIAS` records to configure your apex domain in Azure DNS.
17+
18+
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.
19+
20+
## Validate domain ownership
21+
22+
1. Open the [Azure portal](https://portal.azure.com).
23+
24+
1. Navigate to your static web app.
25+
26+
1. Under *Settings*, select **Custom domains**.
27+
28+
1. Select the **+ Add** button.
29+
30+
1. In the *Enter domain* tab, enter your apex domain name.
31+
32+
For instance, if your domain name is `example.com`, enter `example.com` into this box (without any subdomains).
33+
34+
1. Select the **Next** button.
35+
36+
1. In the *Validate + Configure* tab, enter the following values.
37+
38+
| Setting | Value |
39+
|---|---|
40+
| Domain name | This value should match the domain name you entered in the previous step. |
41+
| Hostname record type | Select **TXT**. |
42+
43+
1. Select the **Generate code** button.
44+
45+
Wait as the code is generated. It make take a minute or so to complete.
46+
47+
1. Once the `TXT` record value is generated, select the **copy button** (next to the generated value) to copy the code to the clipboard.
48+
49+
1. Select the **Close** button.
50+
51+
1. Navigate to your Azure DNS zone instance.
52+
53+
1. Select the **+ Record set** button.
54+
55+
1. Enter the following values in the *Add record set* window.
56+
57+
| Setting | Property |
58+
|---|---|
59+
| Name | Enter **@** |
60+
| Type | Select **TXT - Text record type**. |
61+
| TTL | Keep default value. |
62+
| TTL unit | Keep default value. |
63+
| Value | Paste in the `TXT` record value in your clipboard from your static web app. |
64+
65+
1. Select the **OK** button.
66+
67+
1. Return to your static web app in the Azure portal.
68+
69+
1. Under *Settings*, select **Custom domains**.
70+
71+
Observe the *Status* for the row of your apex domain. Once the validation is complete, then your apex domain will be publicly available.
72+
73+
While this validation is running, create an ALIAS record to finalize the configuration.
74+
75+
## Set up ALIAS record
76+
77+
1. Return to the Azure DNS zone in the Azure portal.
78+
79+
1. Select the **+ Record set button** button.
80+
81+
1. Enter the following values in the *Add record set* window.
82+
83+
| Setting | Property |
84+
|---|---|
85+
| Name | Enter **@** |
86+
| Type | Select **A - Alias to IPv4 address** |
87+
| Alias record set | Select **Yes**. |
88+
| Alias type | Select **Azure resource** |
89+
| Choose a subscription | Select your Azure subscription. |
90+
| Azure resource | Select the name of your static web app. |
91+
| TTL | Keep default value. |
92+
| TTL unit | Keep default value. |
93+
94+
1. Select the **OK** button.
95+
96+
1. Open a new browser tab and navigate to your apex domain.
97+
98+
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`.
99+
100+
## Next steps
101+
102+
> [!div class="nextstepaction"]
103+
> [Manage the default domain](custom-domain-default.md)

‎articles/static-web-apps/apex-domain-external.md

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
title: Set up an apex domain in Azure Static Web Apps
3+
description: Configure the root domain in Azure Static Web Apps
4+
services: static-web-apps
5+
author: craigshoemaker
6+
ms.service: static-web-apps
7+
ms.topic: how-to
8+
ms.date: 02/11/2022
9+
ms.author: cshoe
10+
---
11+
12+
# Set up an apex domain in Azure Static Web Apps
13+
14+
Domain names without a subdomain are known as apex or root domains. For example, the domain `www.example.com` is the `www` subdomain joined with the `example.com` apex domain.
15+
16+
Some domain registrars (like Google and GoDaddy) don't allow you to point the apex domain to an existing URL. If your registrar doesn't support `ALIAS` or `ANAME` records, or doesn't allow `CNAME` flattening, then you can't point your apex domain to the generated URL for your static web app.
17+
18+
If your registrar doesn't allow you to redirect the apex domain, consider the following options:
19+
20+
* Configure your domain with [Azure DNS](custom-domain.md)
21+
* Forward the apex domain to the `www` subdomain
22+
23+
This guide demonstrates two options for configuring an apex domain.
24+
25+
* Use the steps to [set up with an ALIAS record](#set-up-with-an-alias-record) if your domain registrar supports the `ALIAS` DNS record.
26+
27+
If your registrar doesn't support `ALIAS` records, but does support `ANAME` records or `CNAME` flattening, see their documentation for configuration settings.
28+
29+
* Use the steps in [forward to www subdomain](#forward-to-www-subdomain) if your domain registrar doesn't support the `ALIAS` DNS record.
30+
31+
## Set up with an ALIAS record
32+
33+
Before you create the `ALIAS` record, you first need to validate that you own the domain.
34+
35+
### Validate ownership
36+
37+
1. Open the [Azure portal](https://portal.azure.com).
38+
39+
1. Navigate to your static web app.
40+
41+
1. From the *Overview* window, copy the generated **URL** of your site and set it aside in a text editor for future use.
42+
43+
1. Under *Settings*, select **Custom domains**.
44+
45+
1. Select the **+ Add** button.
46+
47+
1. In the *Enter domain* tab, enter your apex domain name.
48+
49+
For instance, if your domain name is `example.com`, enter `example.com` into this box (without any subdomains).
50+
51+
1. Select the **Next** button.
52+
53+
1. In the *Validate + Configure* tab, enter the following values.
54+
55+
| Setting | Value |
56+
|---|---|
57+
| Domain name | This value should match the domain name you entered in the previous step. |
58+
| Hostname record type | Select **TXT**. |
59+
60+
1. Select the **Generate code** button.
61+
62+
Wait as the code is generated. It make take a minute or so to complete.
63+
64+
1. Once the `TXT` record value is generated, select the **copy button** (next to the generated value) to copy the code to the clipboard.
65+
66+
1. Select the **Close** button.
67+
68+
1. Open a new browser tab and sign in to your domain registrar account.
69+
70+
1. Navigate to your domain name's DNS configuration settings.
71+
72+
1. Add a new `TXT` record with the following values.
73+
74+
| Setting | Value |
75+
|--|--|
76+
| Type | `TXT` |
77+
| Host | Enter **@** |
78+
| Value | Paste the generated code value you copied from the Azure portal. |
79+
| TTL (if applicable) | Leave as default value. |
80+
81+
1. Save changes to your DNS record.
82+
83+
### Set up an ALIAS record
84+
85+
1. Return to your domain name's DNS configuration settings.
86+
87+
1. Add a new `ALIAS` record with the following values.
88+
89+
| Setting | Value |
90+
|--|--|
91+
| Type | `ALIAS` |
92+
| Host | Enter **@** |
93+
| Value | Paste the generated code value you copied from the Azure portal. Make sure to remove the `https://` prefix from your URL. |
94+
| TTL (if applicable) | Leave as default value. |
95+
96+
1. Save changes to your DNS record.
97+
98+
Since DNS settings need to propagate, this process can take some time to complete.
99+
100+
1. Open a new browser tab and navigate to your apex domain.
101+
102+
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`.
103+
104+
## Forward to www subdomain
105+
106+
Each domain registrar has a different process for managing domain names. Once you sign in to your account with your registrar, look for domain forwarding options. Some registrars have this functionality listed under *DNS options*, while others have them associated with *Website options*.
107+
108+
Make sure as you set up forwarding that you only configure the apex domain to forward to the `www` subdomain.
109+
110+
See your registrar's documentation for details.
111+
112+
## Next steps
113+
114+
> [!div class="nextstepaction"]
115+
> [Manage the default domain](custom-domain-default.md)

‎articles/static-web-apps/azure-dns-zone.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: Delegate domain to Azure DNS
3+
description: Create an Azure DNS zone for a custom domain in Azure Static Web Apps
4+
services: static-web-apps
5+
author: craigshoemaker
6+
ms.service: static-web-apps
7+
ms.topic: how-to
8+
ms.date: 02/14/2021
9+
ms.author: cshoe
10+
---
11+
12+
# Set up an Azure DNS zone for Azure Static Web Apps
13+
14+
You can use Azure DNS to host your DNS domain and manage your DNS records. By hosting your domains in Azure, you can manage your DNS records by using the same credentials, APIs, tools, and billing as your other Azure services.
15+
16+
Suppose you buy the domain `example.com` from a domain name registrar and then create a zone with the name `example.com` in Azure DNS. Since you're the owner of the domain, your registrar offers you the option to configure the name server (NS) records for your domain. The registrar stores the NS records in the .COM parent zone. Internet users around the world are then directed to your domain in your Azure DNS zone when they try to resolve DNS records in example.com.
17+
18+
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](apex-domain-azure-dns.md).
19+
20+
The following procedure requires you to copy settings from an Azure DNS zone you create and your existing DNS hosting provider. Consider opening the Azure portal and your DNS provider website to make it easier to switch between the two services.
21+
22+
## Create an Azure DNS zone
23+
24+
1. Sign in to the [Azure portal](https://portal.azure.com).
25+
26+
1. From the top search bar, enter **DNS zones**.
27+
28+
1. Select **DNS zones**.
29+
30+
1. Select the **Create** button.
31+
32+
1. In the *Basics* tab, enter the following values.
33+
34+
| Property | Value |
35+
|---|---|
36+
| Subscription | Select your Azure subscription. |
37+
| Resource group | Select to create a resource group. |
38+
| Name | Enter the domain name for this zone. |
39+
40+
1. Select **Review + Create**.
41+
42+
1. Select **Create** and wait for the zone to provision.
43+
44+
1. Select **Go to resource**.
45+
46+
With the DNS zone created, you now have access to Azure's DNS name servers for your application.
47+
48+
1. From the *Overview* window, copy the values for all four name servers listed as **Name server 1** to **Name server 4** and set them aside in a text editor for later use.
49+
50+
## Update name server addresses
51+
52+
The next step is to update the name server addresses for your domain name. Sign in to your account on your domain provider's website and find the tools to edit your domain settings. While each domain provider is different, look for *Manage DNS*, *Domain settings*, or something similar in your domain account.
53+
54+
1. With the name server addresses you collected from the previous step, update the name server addresses for your domain name.
55+
56+
1. Save your changes.
57+
58+
## Next steps
59+
60+
> [!div class="nextstepaction"]
61+
> [Set up a custom domain in Azure DNS](custom-domain-azure-dns.md)

0 commit comments

Comments
 (0)