none
How can I host a ReactJS app on Azure, with security headers? RRS feed

  • Question

  • I have an app which is built in ReactJS, and I want to deploy it on Azure.  It needs to have security headers added, and to be connected to the domain name which is registered at GoDaddy.

    Initially, I set up a static website.  So, I created a container in Azure, then built the site using "npm run build", and then copied the contents of the "build" folder to the container.  That gave me a site at myapp.z33.web.core.windows.net.  Then, I created a CDN (myapp.azureedge.net) with an endpoint which connected to the container url.  That worked fine, I could navigate to myapp.azureedge.net and see my site. Then I pointed the domain name to the CDN endpoint, and was able to install an SSL certificate.  At this point I was able to go to mydomain.com and see my site.

    Then I ran the site through securityheaders.com, which said I needed to add various headers (Content-Security-Policy etc).  After looking around, I figured that I needed a function proxy, which the CDN endpoint would point to, and then the proxy would point to the container.  However, when I set up the proxy, and pointed it to the container, I navigated to the proxy endpoint and was getting a blank page.  The console gave the error "404 not found" - it seemed to be unable to find manifest.json, the chunk.js files etc (although I could see everything fine if I went to the container URL).

    Next I tried to add the security headers to the React app itself (so I wouldn't need the proxy).  However, this just didn't work; I kept having to set more and more sha keys, which seemed to change every time I built.

    Then I tried deploying as a non-static site, using an App Service (thinking the proxy might work better there).  I connected it to my local Git repo, uploaded the contents of the build folder, and everything looked ok, but when I went to the url, I was still getting the "Your App is ready" page, instead of my site.

    I don't know what to try next.  I've asked various questions here and on Stack Overflow, but haven't really had any answers. Can anyone suggest the correct approach for this? I don't know a lot about React, and very little about Azure, so it's entirely possible that I've set something up wrongly.

    Friday, July 24, 2020 2:48 PM