AWS Quick Start - Hosting a Static Website on AWS (Demo)

in this session you will learn about how to house a static website on AWS we will be covering three services one Amazon s3 to store your static website content - how to register and need the main name using route 53 and 3 learn about cloud front a service that you can use to deliver the content of your website globally with low latency my name is Aubrey and I'm an Account Manager at AWS throughout this session you will be able to ask any questions you have please take a moment to have a look at the Q&A pane in the console where you will be able to write your questions and we will answer your questions after this session let's take a quick look at the services we will use in this demonstration and this is not going to be a deep dive session for each service I'm only going to give you a general features and you will learn more about the services as you get more experience or play with it more for the first service let's talk about Amazon s3 the store your website content we will use Amazon s3 which stands for simple storage solution s3 is one of the first services produced by AWS s3 is an object storage with a simple web interface the store and retrieve data from anywhere on the web which means you can manage the service by simply logging into the AWS console you can store data in any format for example your website content you can store HTML pages CSS files images with your text files and JavaScript files and each object size in s3 can range from 0 bytes to 5 terabytes there are many benefits of using s3 it is durable highly available secure scalable and low cost for durability Amazon s3 storage is designed to provide ninety-nine point 11 ninth of durability and 99.99 percent for availability for irritability if you store 10 million objects with Amazon s3 you can on average expect incur a loss of a single object once every 10,000 years for availability your data will be protected against any network or hardware failures so you can count on your data or website content being up all the time for security Amazon s3 is secure and resources are private by default which means that only the resource owner can access the data in the console management you can set permissions and create policies that allows read and write access to a specific bucket and object make sure that you configure the buckets and objects permission correctly to meet your requirements you can restrict access to your resources by configuring the IAM policy bucket policy and access control list s3 is scalable and low cost with s3 customers only pay only for what they use and can store a limited amount of data we charge less where our costs are less and prices are based on the location of your Amazon s3 bucket now that we understand a little bit more about s3 let's take a look on how you can use s3 to host your static website just a quick reminder to participate in this demo you will need an AWS account the provision resources to host your website a basic understanding of web technologies and an existing static website that you can bring to hosts on AWS before I show you the demo I'd like to introduce you to unicorn what we are going to do is help unicorn host his existing static website on Amazon s3 unicorn is starting a web development business he wants to showcase his skills because he is looking to do more web development projects unicorn believes that by having an online presence he can showcase his project so customers can on this and what his skills are incapable of doing okay so let's help unicorn alright so you can see on my screen that I am signing to my AWS account which I created prior to this demo and I have here an existing website content so you can see my CSS files images JavaScript files an index.html file once you are logged in to your AWS console click on the services on the top left this will show you all the services offered by AWS let's find s3 from storage section then click on it oh by the way you'll notice that my region is global because s3 is available in AWS regions worldwide and you can use Amazon s3 regardless of your location you just have to decide which AWS region you want to store your Amazon s3 data which I will show you in a bit the store objector files in s3 first we need to create the bucket bucket is like a folder where you store your files or objects and there is no limit to the amount of objects you want to store in the bucket and by default you can create up to 100 buckets in each of your ADA base account just in case you need more additional buckets you can increase your bucket limit by submitting a service limit increase to AWS support so now let's create the bucket once you are in a crate bucket page enter your bucket name please remember that your bucket name must be unique globally so across all existing bucket names in Amazon s3 you need to come up with a unique name for example let's try s3 demo and you'll see that it'll give you a notification on the screen that this bucket name already exists for bucket name I will use WWE start demo calm the a year then you have to select the location or region where you want to store your data in this demo I will select asia-pacific as a Sydney region then click Next you will see on the screen that you can configure versioning logging and taggings I don't need this at this demo so I will move on to the next page by clicking next so this is the most important part of this demo you need to grant public grid access to the bucket select that option so if you're content inside the bucket for website hosting it's not publicly available the user who tries to access your website will get an XML error message saying the file or page is unavailable so let's move forward by clicking next then you can review the configuration or permission of your bucket after reviewing it you can create the bucket there you go now you can see the bucket that I created I can now upload my existing website content to s3 I have to select on the bucket name and here's the upload button on the top left I can add the files or simply drag my files to the bucket let's do it now so then I'll click Next and as an owner of the bucket I have read and write object permissions so you must make all your content publicly readable then we'll click next on the properties page you can select your storage classes or configure the encryption of your data I will not do it in this demo so let's click Next then you can review the page then click upload so you can see that it's starting to upload it might take a couple of seconds depending on the size of your files ok the upload is finished click on the properties tab on this page you can figure or learn more about versioning encryption of objects setup log records and etc etc for this demo we will only configure the static website hosting select use this bucket to house a website for the index document field this is the name of your default page of the website or the home page so I will type in index.html if you have an error page or file you can enter in the error document field so for example an Internet user tries to access your website it will display the error page when an error occurs in this demo I don't have an error page so I will leave it blank so let's click Save and then click on the static web hosting section again you can see that there is an endpoint here where you can check your website so I will click on this link there you go unicorn has a website on AWS the showcases skills experience and so customers can contact him for any future projects but unicorn has another question unicorn wants to register a new domain to AWS so when users visit his website it will show his domain name for example ww-wait start demo dot-com de au so let's help unicorn answer his question by first defining what route 53 is then we can show him what it looks like on the console Amazon route 53 provides highly available and scalable domain name system domain name registration and help checking web services it is designed to give developers and businesses an extremely reliable and cost-effective way throughout end-users to Internet applications route 53 is a DNS service of AWS if you have a new domain you can register or transfer to Amazon 53 ok so right now I am logged into my AWS console so if you click on the services on the top left corner of the page so right here it will show you the different services of AWS scroll down and look for networking and content delivery section and select route 53 or you can simply type in the search box route 53 then it will direct you to the route 53 page as mentioned earlier you can use route 53 to register your new domain or transfer and exist thing one so for this demo I will show you quickly on how to register your domain and click on get started now now we're on route 53 dashboard where we can register a domain or transfer domain if you have an existing domain that you register and there a different register like GoDaddy or crazy domains then you will use transfer the main if you would like to learn more about transferring domain to Amazon route 53 we will share a link with a step-by-step guide after this session but in this demo we will be registering a domain name so I will select registered domain on this page you can see the first step is to search for the availability of the domain pick your top-level domain or TLD it could be com the IO there's a lot here dot-com de a u dot uk' it really depends on you keep in mind that the prices are different so for example for this demo I will try route 53 demo com you there go it's available and you can see the main suggestions below now I'm going to click on Add to Cart and you can see on the right hand side there is a drop down if you want to register for more years that option is available so let's select one year for $12 and then click continue the next step is to put in the contact information if their registrant administrative and technical contacts are all the same select yes if not you have to put in the details individually for each contact then you just have to continue entering the details for contact type if you are an individual or a business then putting your first name last name email account phone number and address I'm not going to fill in the details for this demo but make sure that you enter the accurate information required there is a privacy section here if you select disable so for example when someone tries to run who is command against your domain your contact information will be publicly available so if you select enable your contact information will be masked so if someone tries to run who is command against your domain your information will be protected so once you enter the contact details required just click continue after clicking continue it will direct you to the page to verify or review the information once you review the details you can then click on pay and that's it on how to register your new domain to Amazon route 53 please keep in mind that the main registration takes a couple of minutes so I registered my domain prior to this demo and threw out the traffic to a website your bucket name must match the name of the website that you are hosting it is very important to remember this so for example if you have a domain www-wait start demo come to AU you should name your bucket in s3 as www.h start demo comma au and that's it okay so now let's see is amazon route 53 to enable customers to use your domain to navigate to your site when you register your domain amazon route 53 automatically created the hosted zone with the same name in the list of hosted zones choose the name of your domain I will select www.h start demo come to AU and then choose create record cell and you have to specify the values for the name type in the field www for type choose a - ipv4 address for your alias just select YES for alias target type the name of your Amazon s3 endpoint for example it's this endpoint here or if you click on the field it will show you the target s3 web site and point for routing policy just choose simple as default and then for evaluate target health just accept the default value of know then you choose create keep in mind creating changing and deleting resource record sets take time to propagate to the route 53 DNS servers changes generally propagate to all route 53 name service in a couple of minutes in rare circumstances propagation can take up to 30 minutes so I had to create the record set prior let's have a look if the domain works let's type in wwx our demo calm the a year there you go it works unicorn is almost all set he now has two content on his website up and his domain is hosted on AWS but unicorn has one last question so now let's talk about cloud front if you want to deliver the content globally Amazon CloudFront is a web service that gives businesses and web application developers an easy and cost-effective way to distribute content with low latency and high data transfer speeds for your static website CloudFront can distribute the content of your static and dynamic web content such as HTML CSS javascript files and your media content globally CloudFront delivers your content through a worldwide network of data centers called edge locations when a user requests content that you're serving with CloudFront the user is routed to the edge location that provides the lowest latency so that content is delivered with the best possible performance so for example for the first request it will be routed to the edge location if the content is not in the edge location CloudFront retrieves it from an origin that you've defined for example your origin is s3 bucket where your static website content is stored the origin will be returned to the request of the edge location this content is now stored in the cache so edge location will return the content to the customer so when a user makes requests of the same content CloudFront checks if the cache for the requested file if the content is in the cache the edge location returns the content directly to the customer as a result viewer requests travel a short distance improving performance for your viewers you also get increased reliability and availability because copies of your files are now held in cache in multiple edge locations around the world the other benefits of using CloudFront is its cost effectiveness and security with Amazon CloudFront you pay only for what you use there is no minimum fee Adobe's customers get particular benefit from the automatic protection at no additional charge if using cloud front CloudFront is secured as part of the design of the service cloud front defense against most common frequently occurring Network and transport layer lead us attacks that target your website if you want to learn more about how to set up and configure cloud front for your content distribution we will share resources like step by step guide after the session as I come to the conclusion of my session I'd like to thank you for your time and attention in today's session I hope after this session you have a better understanding of how to host a static website on AWS I would like to remind you to continue posting your questions on the Q&A pane of the console where we'll take the next few minutes to respond we will also be conducting a survey at the very end to capture your feedback so we can continue to meet your learning requirements from AWS

Channel: Amazon Web Services

Views: 71,860

Keywords: AWS, Amazon Web Services, Cloud, cloud computing, AWS Cloud, AWS Quick Start, Getting Started, S3, website

Id: BpFKnPae1oY

Length: 23min 10sec (1390 seconds)

Published: Sun Nov 25 2018