Hosting a website on Azure | Serverless | Storage Account

hey guys welcome to this first episode of bill to nashville series so in this episode we are going to use one of the latest services that Asscher has released which is static web hosting so during end of June as we had made this announcement where they have released static web hosting for Shore storage in public preview so this is one of the most awaited features for sure so now people can start deploying their static web applications without paying for compute so earlier to this release one of the major option is to go for app services your sub service plan to host their web application but still again you have to pay for the compute but with this no compute 100% service and if you want to hook your front-end with the backend you can use Asha functions as well so you can build a total serverless application with the release of this feature so let's get started so by the end of this tutorial you will be able to use a custom domain with HTTPS or SSL and host your angular application so the first thing you have to do is go to portal dot ICO comb and log into your account so once you're logged in you need to create a storage account you can find it here oh if you go to all services and under storage you will find storage account ok so let's create a new storage account by clicking Add button here and you have to fill in this form first you have to select your subscription so in my case I have a free trial subscription and then you can choose the resource group in a show everything is in a resource group for manageability so in this case you can either create a new resource group or you can use existing one so let me create a new resource group here so it will ask for the name here I will enter a name like service group ok and hit OK so all the services that I spin up for my application will be in this particular resource group so I can delete them if I want at once now for the storage account let me give it a name static web account for the location ok central device is fine for me performance you can choose the standard or premium which you standard and guys for the account make sure you have selected the latest one storage version - so this is where our new features are available for you so make sure you see like general purpose version - Oh storage version - and replication so I will fall back to local redundant storage to save some cost and accessed here what is fine we are going to host our web application it has to be frequently accessed and I will click Next and keep the default for secure transfer required and which will network I will keep the default for all networks as well and click Next for tags you can add a tag if you want so I'm not going to do that and click Next and review a configuration if it's alright click create so that will start creating the storage account so give it few minutes I will post the video and come back once it is done so still our deployment is underway so while it is configuring it so while it is processing oh actually it is completed right now very good so let's go to the resource this is my static web account storage account so the next thing that you need to do here is to enable static web hosting so inside your storage account you should see static website preview select this and then it's just a matter of clicking enable ok then it will ask for what is the index document that you want to serve when a user visit this site so we'll call it its index dot HTML and what about the error page so I will call it error dot HTML so we need to upload these two files so for now let's click Save the while it's saving let me open up a terminal a command prompt if you're on Windows and I will navigate to desktop and create a new folder my web and I will CD into my web and I will open it in Visual Studio code by typing code space period if you don't have issues to do a code install please go for it and now it has opened my project in Visual Studio code so let's create those two files let me click new file and name it index dot HTML and also another file array dot HTML right so index dot HTML let me directly so I will type XML in mark and it will give me an code sample here so if I just select this one and we chose to do code it will give you a stop for a simple HTML file so for the title let me change it to my site oh my awesome site in the body tag let me put ash to tag and type HelloWorld okay now let me go to era dot HTML and exclamation mark and select the simple template and I will type error for the title and another h2 tag something something is wrong so our website will serve a HTML site and if there's any wrong or any issue it will serve the HTML file so that is the idea so now we need to upload these two files into our storage account so let me switch back to our actual portal can you see it has given me another primary end point to view our web application let me just copy it and open it in a new window so at this moment it says there's nothing there because we haven't uploaded those two files so where do we have to upload it let me go to the portal again so it says an issue a storage container has been created to host your website so by default issue has provisioned this particular container or a place to host our web application called Dollar web now if you click this it will take you to this particular container or else you can go to your overview section and select the container there and you can see now we are inside the de l'eau web container so this is the place we need to upload our files now let me click upload so it will open up upload blog window and for the file section let me click browse and I will go to my desktop and select the folder I created and these are my two files let me select both of them by pressing shift and click open and for the authentication type select sauce because you are not going for oath right now and we can change it if you want later on and click upload okay I think those files are now uploaded if you look at our container now we have these two files so shall we go to a web endpoint and hit refresh so let's check if it works yes you can see our index.html is being served so how about our HTM now let me go to a route that does not accept something there you go we have our error document now as you can see this URL is very ugly URL so instead of that we'll configure a custom domain so that when you type the custom domain it will show our website so in order to do that we need to have a domain so let me type free domains into Google so by the way if you have already bought a domain from GoDaddy or any other domain provider you can use that so in this case let's go for a free domain and this site dot TK site so I am at www.andyjenkins.com so here I can find my domain let's say my awesome a suicide - feliz available well it seems it's available so I have a dot TK domain which is free so now I can click get it now so it is checking now it is selected let's click checkout alright so they are giving this for free for three months now let's continue it fill in the details and click complete order ok your order is confirmed now you can click here to go to the client area of this free norm web site and there select services again click my domains since we have already bought one it should list here you can see this is the one I just bought so this one I previously bought it so how do we now link this website to our issuer static web site so it is very easy if you go to the azure portal again you can go to the storage account by clicking here and somewhere down here you should see custom domain click on that so it has given me the instructions so how to do the configuration on the custom domain so either I can create a cname record pointing to this particular address but that will give me some downtime but in our case it's not a problem because we are now creating it as a brand new domain name so what we need to do we have to create a cname record in our domain provider and point that cname record to this address so let me copy this address first we click here and copy it so let me zoom it in a little bit so this is the address you need to copy and I will go to my client area here and we select manage domain and I will select manage free nom DNS for basically managing our DNS records and the name is basically awesome suicide dot TK and it should be targeted to the one we just copied I will paste this one and I will copy my domain name from here and I will paste it here and make sure it is not a type a it is a cname because he's an address right yeah then do the Save Changes alright so record is added successfully so it will take a couple of minutes to do the DNS propagation so until such time you cannot access it so you're gonna have to wait for some time so after that you should be able to type in my or some site or whatever the name that you have given to your domain custom domain and then it should show your hello world website but still we don't have SSL setup so that means it will not be served through HTTPS instead it will be an HTTP site in Google you will get low-ranking if you have HTTP web site instead of HTTP so it's always better to go for SSL so how can we do that you cannot attach SSL certificate right from here or right from your storage account but instead you can have to use as your CDN basically you need to set up a CDN in front of your static web application so when a user is requesting for your web site the request first goes to CDN so it will first check whether that website content is cached at the CDN level if it can find it in the cache it will serve from the CDN or it will serve from the edge we call it and it will be quite fast and if it is not in the cache it will go to the origin or our dollar web container and fetch the index file or all the website files and come back to the CDN do the caching at CDN level and then serve it to the users so the next time uses our request for the website it will be served from the cache or the CDN because it has already cashed it in the previous request which is very fast so in order to apply our custom domain we have to apply the SSL certificate at the CDN level so our SSL termination will happen at CDN so how can we go about doing that so when you are in the storage account you will be able to find a show CD in here we can use that obviously but there's a small problem let me show you if you select a show CD in here you can create a CDN profile so inside the CDN profile we can have the CDN endpoints like this but look at this origin hostname is now logged into our storage account domain we cannot do any change here but in order to serve our static web application we should select it as a custom origin and then provide the endpoint of our website now this URL or this hostname of our storage account is not the hostname of our static website static website endpoint is different so this is the endpoint of the storage account which will not work so in order to so in order to get our static web application working we have to link the endpoint of our website so where can we find the endpoint if you go to static website here you should see the new endpoint and Asha has created for us right so this is the domain that we need to link to the CDN so we cannot do that if you select the actual CDN inside the storage account so how can we do that so we can go out of the storage account and select all services again and under networking you should see CDN profiles select this here you can create a new CDN profile by clicking add and give it a name I will call it web CDN subscription free trial and the resource group since this is belonging to our service group I will see like the service group resource crew US central one price in tier I will go for the standard version because it supports custom domains and check this button create a new CD an endpoint now you can give a name to your CDN endpoint this could be anything web CDN let's see if there is available nope it does not or some site yeah that is available so my awesome site dot asher h dotnet is the endpoint of our CDN and this is the one i want to focus the origin type select this one and click custom origin for the origin host name you need to copy paste the endpoint of your static website if you don't remember it you can open the storage account in a new tab I will open this whole thing in a new tab because I have Tory forwarding it I will click my storage account from here and go to static websites and copy the URL you don't have to copy this TTP s part just the domain name copy that and go back to the previous tab and paste it in you can remove the last slash ok so you remove this TTP s and this is your DNS or this your hostname and everything seems good I will click create so it will take few minutes to provision your CDN so after this has been created you can configure a custom domain the domain that we have previously configured to work with our CDN level and also we can add SSL certificate which is managed by issuer let me post the video and come back real quick alright guys so now our CDN is configured now you can see it is up and running the status is running let me just click onto this so here you can see the endpoint so now our endpoint is configured here so if I just click and copy the endpoint and open it in web browser let's see if that points to our website it looks like it does so hello world is rendered okay so the main reason why we went for CloudFront distribution is but one of the reasons why we went for a CloudFront distribution is to add a custom domain so we'll do that so I will go back to my awesome site CDN and there you should see the custom domain button just click on that to add a custom domain and it has picked up the endpoint of the CDN and here we have to specify the custom domain so let's go to our client area and this is our domain that you are planning to so at the moment it says the request is invalid so that's fine let me just copy the domain name and come back to here and paste it in and let me just take out HTTP and we got an error well it says that it could not find the DNS record for a custom domain that points to the CDN so let's do that so how can we do it we will go to our client area and I will click manage domain and they are managed DNS so at this moment we have added a DNS record a cname record that points to our container but now that we have the CD and in front of our container so we have to change this over we'll delete this record and we'll add a new target which is our CDN endpoint so let me just delete this one okay the record is successfully deleted now let me add this one again so which is our the root domain or domain apex and I will create another cname record that targets our CDN endpoint so where can we find that so this is our CDN endpoint let me just copy the latter part of the URL and come back to client area and let me paste that and afterwards I will click Save Changes ok good now the record is added successfully but this will again take some time about 15 to 20 minutes or maybe 24 hours so that depends to do this DNS propagation so we're just gonna have to be a little patient here alright now it is resolved so it took me about 10 to 15 minutes for that DNS resolution I can see there's a small green tick and now you can click Add so it starts creating the custom domain so again it will take some time let me post the video and come back once done it got created successfully so now under custom domain you should see our custom domain here now let me click this and our main purpose is to configure HTTP right now so under configure let's click on and then click Save and I click Save then we'll start adding the SSL certificate into my domain so for that it has these four steps to complete so this first step will be automatically be handled by asure so we just have to wait for this so the first step has already started which is submitting the request and then it will start doing the domain validation and afterwards it will be provision the resource and afterwards it will provision the certificate and finally it will be completed so we need to wait until this is completed so let me pause the video again and come back once this is completed okay well it took me about six hours to complete this whole status thing but don't be surprised if it took more than that no more than a day or so but one thing have to be make sure is the domain validation part how to make sure that your domain is pointing to the cname that we have previously configured otherwise it will be stopped at this place forever you will get an error at this stage so be patient until this completed might take a day or so alright so once this completed you can go back to your CDN by clicking here and you should see the custom st TPS is enable now now if you visit our site in my case my awesome Asha site dot TK with HTTPS so you should see the site itself through HTTPS and the hello world message very nice but we won't do something more we'll try to host angular application in the same manner so I will go back to my visual studio code editor right now we have this index.html and HTML let me remove these files I will delete them from here and this one now so delete it instead I am going to generate an angular application so I have installed angular CLI you can go to angular CLI that come and install the CLI here by running NPM install angular CLI and then we are going to generate a new application with ingénue command let me go back to my visual studio code and I will type and she knew my app and hit enter and in the same manner you can generate a reactor application or view J's application or any other front-end application using a CLI or any other setup I am generating angular application okay now angular application is installed and if you go into my app folder you should see all the files but we are not going to upload all these files into our container instead we will upload the built files because those are the steel mills JavaScript and CSS file that browser can reads so now let's build up application let me clear the screen I will go into my app folder seed in my app and I'm going to use ng build command with prod flag so this will build our project with production optimized settings so let's give it a second that should create a dist folder here my build is completed you can see the dist folder here and inside the destroyer you should see a lot of files now we need to upload these files into our dollar web container how can we do that quite easily well Microsoft oshawa has released a tension for Visual Studio chord so we are this extension we can easily upload our content to dollar web folder let me show you guys if you go to extensions in Visual Studio code this particular icon you can search for a shoe storage so this is the extension so right now I have already installed it but in your case a small install button should appear here click that so once that is installed reload do we show studio code and then you're good to go after the installation you should see this particular icon here it says assure so click on that now you can select this particular icon so saying deploy to static web site click this and now it will start connecting to a shoe account now if you have not configured your actual storage account with visual studio code it will prompt you to enter the access key where you can easily find from your issue a portal storage account properties let me show you guys if you go to your storage account and select your storage account here and you should see the access key settings click on that then multiple keys will be appearing here just select the e100 key to key and also the name of the actual storage account so you can easily configure that in the wizard that prompts English for studio code so once you are successfully connected then it will show your subscription and now it will ask me to select the issuer storage account so in my case it is static web account I will select that afterwards it will ask me okay browse the folder that I want to upload the files from so click on browse then you can go to your my app folder because inside this folder we got all these files right J s index dot HTML CSS etc so click open then it will prompt me okay do I need to delete anything that is available inside Dollar web container because we have index and HTML file so we'll delete it and redeploy with our new files so I'll select delete and deploy so towards the bottom you can see it starts uploading it and now it is completed so it has given me the endpoint of my dollar Web static website I can use that one to browse it so let me click browse to the website that should open up the endpoint of my dollar web container or our static web application endpoint there we go now our application is up and running in our dollar web container but still again if we go to our custom domain and try to refresh it it might not show it directly so in my case it showed it directly but for some reason if it's still showing the hello world message what you can do is you can easily go to your CDN account go to home and select the web CDN or any other name that you have given and click purge so this will take away all the cache contents and always take the content from the origin or our dollar web container so afterwards your angular applications must be served through your custom domain alright so this is what I want to show you guys and I hope you enjoy this hey by the way if you want to see the exact process how to host a static web application in AWS and Link a custom domain with HTTPS I will post a link in the description section thanks

Channel: Enlear Academy

Views: 28,737

Keywords: azure, azure cloud, microsoft azure, azure tutorial for beginners, windows azure, storage account, azure cdn, what is azure, Serverless, Hosting a website on Azure, website hosting, website on azure, deploy website on azure, host a website in microsoft azure, how to host a website in microsoft azure, hosting a website on azure, developing website, hosting, website

Id: seVBN7WKGlI

Length: 24min 18sec (1458 seconds)

Published: Thu Nov 15 2018