<html>\n <body ng-app=\"myApp\" ng-controller=\"myCtrl\">\n <h2>Serverless API endpoint<\/h2>\n <input type=\"text\" ng-model=\"apiUrl\" \/><button ng-click=\"fetch(apiUrl)\" >Fetch<\/button>\n <h2>Function output below<\/h2>\n <pre>\n {{ eventBody| json }}\n <\/pre>\n <script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular.js\/1.8.2\/angular.min.js\" \/>\n <\/body>\n <\/html><\/code><\/pre>\nS3<\/h2>\n
With AWS, static website hosting is a feature of S3<\/a>. All we need to do is create a bucket, upload our files and enable “Static website hosting” in Properties: <\/p>\n![\"AWS](\"https:\/\/blog.wiseowls.co.nz\/wp-content\/uploads\/2021\/02\/image.png\")
these warnings seems to hint at something…<\/figcaption><\/figure>\nOne may think that this is all we have to do. But that huge information message on the page seems to be hinting at the fact that we might need to enable public access to the bucket. Let us test our theory:<\/p>\n![\"S3](\"https:\/\/blog.wiseowls.co.nz\/wp-content\/uploads\/2021\/02\/image-1.png\")
indeed, there’d be no public access to our static assets by default<\/figcaption><\/figure>\nokay, this is fair enough – making a bucket secure by default is a good idea. One point to note here, is that enabling public access on this only bucket will not be enough. We will also need to disable “Block Public Access” on account level, which seems a bit too extreme at first. But hey, you cannot be too secure, right. AWS goes to great lengths to make it very obvious when customers do something potentially dangerous. Anyway, we’d go and enable the public access on account and bucket as instructed:<\/p>\n![\"Azure](\"https:\/\/blog.wiseowls.co.nz\/wp-content\/uploads\/2021\/02\/image-5.png\")
<\/figure>\nThe first thing that jumps out here is a “Not Secure” warning. Indeed, S3 exposes the website via good old HTTP<\/a>. And if we wanted secure transport – we’d have to opt for CloudFront.<\/p>\nStorage account<\/h2>\n
With Azure, the very first thing that we’d get to deal with would be the naming convention: Storage Account names can only contain lowercase letters and numbers. So right out of the gate, we’ll have to strip all dashes from our name of choice. Going through the wizard it’s relatively easy to miss the “Networking” section, but it’s exactly here we get to chose if our account will have public access or not. And by default it will be! So if you want it – you’ll have to tweak the security<\/a>. Anyway, moving on to “Advanced” tab, we’re presented with another key difference: Storage Account endpoints use HTTPS by default.<\/p>\nHaving created the account we should first enable the “Static Website hosting” option. <\/p>\n![\"S3](\"https:\/\/blog.wiseowls.co.nz\/wp-content\/uploads\/2021\/02\/image-4.png\")
<\/figure>\nReason for this order is that Azure creates a special container <\/a>called $web<\/strong>, that we’ll then upload files to. But after we have done that – it’s pretty much done:<\/p>\n![\"Azure](\"https:\/\/blog.wiseowls.co.nz\/wp-content\/uploads\/2021\/02\/image-6.png\")
<\/figure>\nCORS<\/h2>\n
Both AWS and Azure allow configuring CORS for static websites. AWS is pretty upfront about it in their docs<\/a>. Azure however makes a specific callout<\/a> that CORS is not supported on static websites. My testing, however, indicates that it seems to work as intended. Consider the following scenario. We’d use the same website, but add a web font. And load it from across the other cloud: so Azure copy of the site will attempt to source the font from AWS and vice versa:<\/p>\n<link rel=\"stylesheet\" href=\"css\/stylesheet-aws.css\" type=\"text\/css\" charset=\"utf-8\" \/>\n<style type=\"text\/css\">\nbody {\nfont-family: \"potta_oneregular\"\n}\n<\/style><\/code><\/pre>\nand the stylesheet would look like so (note the URL pointing to Azure):<\/p>\n
@font-face {\n font-family: 'potta_oneregular';\n src: url('https:\/\/cloudfaceoffworkload.z26.web.core.windows.net\/css\/pottaone-regular-webfont.woff2') format('woff2'),\n url('https:\/\/cloudfaceoffworkload.z26.web.core.windows.net\/css\/pottaone-regular-webfont.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n }<\/code><\/pre>\ninitially, this set up indeed results in a CORS error:<\/p>\n
![\"Azure](\"https:\/\/blog.wiseowls.co.nz\/wp-content\/uploads\/2021\/02\/image-7.png\")
<\/figure>\n![\"Azure](\"https:\/\/blog.wiseowls.co.nz\/wp-content\/uploads\/2021\/02\/image-8-1024x284.png\")
<\/figure>\n![\"Azure](\"https:\/\/blog.wiseowls.co.nz\/wp-content\/uploads\/2021\/02\/image-9.png\")
<\/figure>\n