How do I point my domain name to an Azure Function Proxy?

Question

I have an app which is hosted in Azure storage (it's built using React, and then I build it into a static site for deployment, and copy it to the storage container).

I have a CDN which points to the storage URL.

If I go to the CDN (mysite.azureedge.net), I can see the site, everything seems fine.

Now I need to set headers on the site, so I have set up a Function Proxy which points to the CDN, as I can add the headers to the proxy. If I go to myproxy.azurewebsites.net I can see my site.

However, now I need to connect the domain name to the proxy, and this doesn't appear to be working. The domain name is registered with GoDaddy. I have 2 CNAME records, one called "name" and one called "www", both of which have the value "myproxy.azurewebsites.net". However, when I go to either of those, I get the warning "Your connection is not private" and can't go any further.

The SSL Certificate is stored on GoDaddy. The CDN endpoint has 2 custom domains, with CustomHTTPS enabled on www.myapp.app and disabled on myap.app. The endpoint itself (mysite.azureedge.net) has "Protocol" value "HTTP, HTTPS".

In the Proxy (myproxy.azurewebsites.net), I have the following:
Route template: '/'
Allowed HTTP methods: 'Get', 'Head'
Backend URL: mysite.azureedge.net
Request Override: nothing set
Response Override:

• Strict-Transport-Security: max-age=31536000; includeSubDomains
• Referrer-Policy: same-origin
• Content-Security-Policy: script-src 'self'
• X-Frame-Options: SAMEORIGIN
• X-Content-Type-Options: nosniff

I assume something here is incorrect, but I know very little about all this, so I've no idea where to start.

Can anyone see what might be wrong?

Answer 1

I believe that you need to set up your custom domain in the Functions app. In particular, there are two settings pages to visit: custom domain and TLS/SSL settings.

On the Custom Domain page you'll enter the www.myapp.app and myap.app domains and verify that you do own them. Your existing CNAME will be fine- the App Service page will let you know if not, and it will request you add a TXT record with the Verification ID provided for you on the Custom Domain configuration page.

Once you have the custom domain setup with your app, you can head over to the TLS/SSL page to associate your certificate with the domain. Since the certificate is hosted outside of Azure, you'll need to get a copy of the private key certificate from GoDaddy and upload it to your App Service. Once the certificate is uploaded, you can associate it with the custom domain you want accessible via https.

There are tutorials for setting up custom domains and SSL in Azure App Services. There are a couple differences when working with a Functions consumption plan. You won't need to change the pricing tier from consumption to one of the ones discussed in the tutorial. In addition, only CNAME verification is available in Functions. Since you are already using CNAME, that shouldn't be an issue for you.

Custom Domain: https://learn.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-custom-domain
SSL Certificate: https://learn.microsoft.com/en-us/azure/app-service/configure-ssl-certificate-in-code