Free Website Hosting with Microsoft Azure Static Web Apps

hey everyone in this video i want to explore hosting a website basically for free in azure using the azure static web apps as always this is useful please like subscribe comment and share and hit that bell icon so i want to think about hey i want to have a website so my website and my goal for this website is well not only do i want to have the content i want to be how to have my own custom domain name like onboard to azure.com and i want it to be encrypted so i want to be able to do that kind of https and i want that included as well and i'm going to take a very very simple example um one is a very basic website the other is actually doing a redirection to my youtube channel because there's various ways i could achieve that now we're focusing on pre-rendered content i.e html file css images javascript in that html file we're not doing server-side resources and i'll talk more about that now we're going to use a git repo so as part of this we're going to have our repository now i'm going to use github this could be private or publix once again this is free and the whole point is hey i'll be working on my machine to generate that content now maybe i'm generating that content manually maybe i'm using libraries and frameworks like angular react vue blazer whatever it is i'm just in notepad editing html files but i'm creating the content and i'm basically doing commits to my repo so in my repo i'm going to have my kind of html files that pre-rendered content this could include kind of javascript as part of that i might have my style sheets and images nothing that requires any server-side processing now if i did need server-side processing when we talk about these so my goal for hosting this is going to be these azure static web apps so azure static web apps and i can kind of do a personal hobby for free so i don't pay anything for the hosting of these there are paid versions but they're all based around the fact that it's client side there's no server-side rendering but if i did need some server-side logic one of the great things about these azure static web apps is they can easily and it's kind of built in integrated azure functions so azure functions remember is that serverless technology so it could go and do some server side processing and return results but the actual hosting of my site is going to be no server-side processing required so my goal of this is i have my content right here and so i'm going to have that in my repost if i quickly looked at mine so if we jump over i have super simple page now i've actually got a couple of sites this is my repo i've got one of them that i want to be able to redirect to my youtube channel and i can't use an alias because my youtube channel is a url it's got a path in addition to youtube.com so i've created this super super basic html page that basically just redirects me to my youtube channel that's really all this page does so i've got that in my repo now i do have another website as well where i'm doing a bit more with that and you can kind of see those so i have the basic content i can have images you can see here i could have a json file but it's all things that just going to work on the client side there's no server side processing required and what this is basically doing is this is a github repo so if i was to jump over for a second and if i go to my github john the brit and if i go and look at my repositories so one of them is my learn azure so this is private it doesn't matter and here is that folder as you can see that file is in the repo i also have another folder where it's those other three files so they're they're sitting in github and what's going to happen is with these azure static web apps it integrates into my repo so what's actually going to happen is as part of this configuration i tell it the repo i'm using and it's going to integrate automatically with github and azure devops and what it's going to do is actually set up a continuous deployment pipeline for me so for example in my github it's actually going to use github actions if it was azure devops it would create a pipeline and what it's going to do is anytime there's a commit or certain types of pull requests it's going to go and push this to my azure static web app one of the things you'll notice about azure static web apps is i don't pick a region and you might think that's kind of weird everything lives in a region so what the az is static web apps are actually doing azure has this huge content delivery network there are nodes all throughout the world and what actually happens is the content i have at each commit it sends it out to that azure content delivery network so all of my files every time i update them well they actually get populated in that content delivery network so it's available all throughout the world that's kind of just a native part of this solution now the way it does that if you want to actually see that in action if we jump back over is if we go and look at what it actually does i can see i've got these github workflows now just go to actions it's easier to see so it created these github actions for each of the different azure static web apps i have created so i've got three of them so what we can actually see if we just look at one of them for example so we can see here okay on a push to the main branch and that's the branch i specified or if there's a pull request to the main branch then it's essentially going to go and build and deploy so i can tell it the type of framework library i'm using and it will integrate the build job as well or in my case because i'm just using basic html it just has to copy it over we can see here hey it's using the web apps deploy yeah it creates a token for me and then it's got in here the folder that i selected in my repo that it's actually going to use and what it has also set up for me if i go to my settings and my secrets it's got an api token that is what it's going to use to authenticate to my azure static web app so it does all of this for me i don't actually have to do anything and so what this looks like is i go to my azure static web apps i hit create notice we can give it a name we have this free option right here that lets me have two custom urls or i can do standard for enhanced features i think it's five custom urls you can go and click that compare plans where i'm going to have azure function staging details but this is not where it's actually hosting the content that's on the cdn and then you say hey is it coming from github or something else and what actually happens here is there's a whole vs code extension that makes this a lot simpler but if you github you'd sign in you select the repo select the branch and then give it the details about the various frameworks etc but that will then go and do everything and what you essentially at that point would end up with let's close this down is you can see i've got three of them so for example in my learn azure i've got my basic configuration i can see i've added a next part a custom domain and that one actually canceled that so let's go to that and delete it so i wanted to show you how to add that i can integrate with things like functions i could change the plan but what it does now is every time i do a commit to that repo it's going to go and populate that content so let's go and look at my other one this is a redirect to youtube so here you can see i've added custom domains so that's the other part of this so yes it's going to host it for me but it's going to have this weird ugly name i don't want so what i'm going to do additionally is i can add custom domains so to my static web app i can absolutely add my own fully qualified domain name and that can be a regular domain like www dot on board to azure.com it could be an apex domain i.e the root such as just onboard to azure.com and then once it's verified i actually own that domain either by an alias record pointing to it or if it was for example an apex i create a text record it will then generate me a free ssl cert for that name as well because i've proved i own it because i was able to create that cname in the dns zone that points to that so if we look at that part of it so if we jump back over again so what i'm actually using is azure dns now if i go to this learn azure i have a spare let's refresh that everyone's that's finished deleting so what you'd be asked to do is do add but i forgot to actually go and delete that one and it will let you go and select hey what domain do you actually okay so successfully deleted let's refresh okay so now i can do add she would give it the name so i can say maybe hey it's learn.ntfaq.com and then it's going to ask how you're going to validate that so either i create a cname record which is going to point to this value or i can create a text record and i hit generate code and it will give me the code i have to generate if it's an apex i it's the no www it's just onboard to azure.com it's the root of the dns domain i have to use a text based validation now what i'm actually doing is i'm hosting my dns actually in azure as well now this has a small cost so i think a dns zone is 50 cents a month then it's like 40 cents per million requests so basically a dollar a month this is the only part that's costing me money so far the git repo is free the azure static web app is free so here you can see i've got kind of the various domains and we can see if my onboard to azure.com if it's just like a regular www hey it's just a cname that's redirecting to an azure static web app and this is a really good thing to do because here i can give it a name i'll just do test but if i do an alias record set i actually select the azure resource it's actually pointing to or if i make this a c name then again there's others or azure static web apps show up as well and this now links this record to the azure resource and what's great about that is it stops dangling dns i did a whole video about dangling dns but basically it's a problem if i deleted the azure static web app and forgot to delete this record i create someone else would go and create that service with the same name and steal it so this present prevents that because i'm tying together this dns record with the service it points to so if this service goes away it will invalidate this record so basically now i go and add whatever record is required so in most of my cases it was a cname pointing to the azure static web app i also did create one at the root level so i've got this at symbol and it's a host record an a record pointed to static web app and i had to create this txt record here with the value it gave to validate i own it so now my dns points to the azure static web app and we can see those because they're validated so if i now go and look for example at my redirect to youtube i have two validated domains on board to azure.com and youtube.on board to azure.com now you can only have two free but these are free so i just created a second one where then i added onboard to azure.com and ntfaq.com and at this point what it does for me is it actually creates that ssl record as well so if i now went to https on board to azure.com that's going to redirect to my youtube channel so there it's gone straight to my youtube channel but let's look at a different site that doesn't do a redirection so we can see the certificate so i've got this learn.onboard to azure.com now ignore the content because this is saying i've just started to play with but i notice i can do https it created this cert for me and if i go and look at the security around this we can see the certificate hey yeah it's a nice little serp the root authority is digicert and then the intermediary was this geotrust tls and then it's my learner on board to azure.com this was all free so once i've validated that dns name with my azure static web app it went and created me an ssl server automatically so i'm essentially hosting this for free the azure static web app is free because i'm using that personal hobby option yes from a dns perspective i have to host dns somewhere i'm using azure dns for about a dollar a month but you could host it other places obviously i have to own the dns domain as well but you can add up to two fully qualified domain names custom dns zones per azure static web app and again you can have multiple azure static web apps because they're free and then it once it's validated it will create the ssl cert for me as well the git hub repo i've used e-notice private is still free the storage on the content delivery network is free so at this point there's really nothing else to do it's just going to work so now as a client depending on where i am so if i'm for example here obviously i'm going to onboard to azure.com it's going to do a dns set of steps if it was a c name it would then resolve to the dns name of the azure static web app which would then return an ip address this anycast by the content delivery network there's a host record in my dns it's just going to resolve to the ip address once the dns is done i will then because it's anycast it will go to the closest one to me where i'll make my various requests over https remember and i'll get my various responses to the one closest to me so i'm going to get a great global experience if i'm in u.s i go to the u.s once hey if i was in europe i go to the europe-based ones i'm gonna get that really premium experience it's not just hosting it for free it's actually distributed around the world to give the end users a great experience now again this is for pre-rendered content there is no server-side processing on the content delivery network it can only serve up essentially files but on the client if there's javascript hey it can run through that and again if you did need a piece of server side well these azure static web apps can integrate with azure functions that could then go and do some server-side processing and maybe give some result that i need or to go and do some action again there's a vs code extension for azure static web apps that really brings all of this together and makes it super simple but really that that's the experience so once you've got these set up you kind of saw it exactly what it did so now hey my learn dot on board to azure.com it's https i'm hosting it for free it's just taking the files that i have in my source folder and anytime i update this anytime i do a commit or a pull request domain what it's going to trigger that github actions that will automatically then push it to the azure static web app which will push it to the content delivery network hey that continuous deployment is just natively built in and again if it was using some framework it would do the ci it would do the build so it's all done for me and then the experience is just completely seamless again i like it because i wanted to redirect for my youtube channel so i have an azure static web app that literally just does a refresh and redirects to my youtube channel so people can just go to oh okay i can just say people hey look it's on board to azure.com and if they go to that it's going to bounce them straight away to my youtube channel and so that that's it again you can do much more complicated things to that i really just scratched the surface of what you can do but free website hosting and it's not just a basic website it's actually globally distributed and it lets me have my own custom domains and it gives me the ssl i can really do what i want and it gives me that complete kind of ci cd all through my free repos again i'm using github in this example so i hope that was useful and go and have a play around until next time take care you

Channel: John Savill's Technical Training

Views: 7,184

Keywords: azure, azure cloud, microsoft azure, microsoft, cloud, azure static web apps, website hosting, https, custom domain

Id: 8SjErjeCdu0

Length: 19min 17sec (1157 seconds)

Published: Thu Oct 14 2021