How to deploy a react.js based SPA to Azure App Service + CDN? - azure

I'm creating a react.js based SPA, and I'll have a landing page on launch. The static landing page should have an action button that directs to the full SPA.
For AWS, I realized it's done by simply using S3 and Cloudfront, and Cloudfront also allows routing to custom error page on 404. This means no server code is needed to handle this, and it may free up some server resources?
For Azure, however, I'm unsure of how to mimic such an architecture. I'm guessing I should use Blob storage to store the SPA and the landing page, but how would I be able to mimic the abilities of Cloudfront? Is Azure CDN sufficient? Thanks!

Azure CDN supports to cache Web Apps.
You can build up a simple Azure Web App with your SPA and custom routing rules and the 404 error page. Then create the Azure CDN, configure the Origin type to web app, and select or type your origin domain in the Origin hostname dropdown.
You can refer to https://azure.microsoft.com/en-us/documentation/articles/cdn-create-new-endpoint/ for the detailed steps.

Related

Azure web app browser based access restriction

I am hosting an angular application in azure web app. I want my application should be only accessible on chrome browser. If someone access the site from other browser then user should redirect to browser restriction page. So to achieve this is there any policy available that can be added to web app, instead of writting the code to detect the browser and then redirect?
Rajesh
Azure web app does not have the functionality to restrict access to the browser as you described.
Reason
Azure app service (Windows & Linux) is essentially a webserver running in a sandbox, which is no different from real IIS or Nginx and Apache.
WebServer provides program deployment and access functions, and only receives HttpRequest. As for the information contained in HttpRequest, azure app service does not provide analysis.
For example, adding User-Agent: Chrome is the specific information contained in HttpRequest. This means that we can only determine the source by parsing the HttpRequest through the code.

How to use Origin Types in Azure CDN endpoings?

I just need to know when to use the Origin Types in Azure CDN endpoints.
I have already created a Web App service and when I create an endpoint, i am presented with a list of Origin Types: Storage,Web App,Cloud service,Custom origin. If I choose Web App, I see my Web App. If I choose Storage, I see the storage account i created. My purpose is to have a fast web app by caching all "cachable" assets.
When creating an Azure CDN endpoint, what or when should I use the following Origin Types :Storage,Web App,Cloud service,Custom origin?
I have not seen any documentation that provides any guidance on this.
For Azure service like Storage, Web App, Cloud service, you can use that respective origin type, for other public custom name or IP address, you can select Custom origin. See the process of creating a CDN endpoint.
Especially, if you host a static website on the Azure storage account. To make your static website files available over your custom domain and HTTPS, see Using the Azure CDN to access blobs with custom domains over HTTPS. As a part of this process, you need to point your CDN to the primary static website endpoint as opposed to the primary blob service endpoint. If so, you can select primary static website endpoint in the custom origin, see details here.

Issue trying to connect Azure CDN endpoint with custom origin (origin pointing to Azure Function App Proxy)

I have a static website hosted in a storage account, and i want to be able to manage the request/response headers. I found some sources about people that used Function App Proxy as a workaround. And it all works well. But i am using Azure CDN to cache the website and deliver it. So i tried to create a CDN endpoint, using custom origin, and connect it to the Function App Proxy. But the CDN is not able to pull and cache the content. Any idea if this anyhow is possible to work? I definitely need the CDN in front of the website, in order to achieve better performance.

Is Azure or Google Cloud natively support to serve content using custom domain over https

I'm trying to serve my cloud storage content using custom domain over https. Currently, I'm using Amazon S3 with CloudFront to deliver the content using custom domain over https. But S3 with CloudFront is costly, So I'm now searching for an alternative.
Is Azure or Google Cloud natively support to serve content using custom domain over https. Without using CDN?
At the moment, google cloud storage only support HTTP. As per documentation To serve your content through a custom domain over SSL, set up a load balancer, use a third-party Content Delivery Network with Cloud Storage, or serve your static website content from Firebase Hosting instead of Cloud Storage.
I was able to find this blog which might help you on the setup.
With that being said, if you are looking for functionality like this you may also try with App Engine, as by default, HTTPS connections on your custom domain will automatically be enabled using managed SSL certificates. You can visit this link for more details. Also, there is a there is a feature request submitted to support auto managed SSL with GCLB.
Is Azure or Google Cloud natively support to serve content using
custom domain over https. Without using CDN?
Azure allows you to map a custom domain to your blob storage endpoint. Using this, you can serve the content stored in blob storage using a custom domain. You can read more about it here: https://learn.microsoft.com/en-us/azure/storage/blobs/storage-custom-domain-name
However please note that this will not work over https. For https, you will need to use Azure CDN.
The OP's needs will be met by using Firebase as mentioned in passing by #KarthickN.
Firebase is a Google product which deploys your own domain name site automatically through SSL (https). You can first push your site onto one of the remote git repositories and use CI/CD for Firebase to deploy. You don't need to worry about CDN as firebase will use Google's global edge servers. Small usage is free then move onto paid plans as your needs grow plans
I answered a similar question here.

How to activate Azure CDN for cloud service web role

I have created a CDN endpoint at [id].vo.msecnd.net, and I have deployed a production mvc4 cloud service web role.
It has images in a root-level /cdn folder, but I cannot get those images to load via cdn. I can access them via direct URL. For example, this works:
[site].cloudapp.net/cdn/eb303.gif
but not:
[id].vo.msecnd.net/eb303.gif
The cdn endpoint is enabled and set up under the hosted service that the web role is in. The documentation I have been reading indicates that nothing more is required. I am using a bizspark license, but as far as I can tell that should include CDN endpoints.
Is there a step I am missing?
Thanks!
Sometime it may take up to 1 hour before your CDN endpoint is ready to server your content. It does work with any kind of deployment staging or production.
Do you still have the problem? If you still have the problem you may need to contact Azure Support because if you have enabled the CDN, you should be good to go.

Resources