3. Create An S3 Website
Okay, so here I am in the AWS console. We just need to go over two services. Click on S3 under storage, then create a new bucket, which we’ll call my Cloud Guru. I’m not sure—the Three Websites or something. Now there’s something I really want to point out to you. If you plan on using Route 53 with S Three so that you own your own domain name, you have to make sure that the bucket name is the same as your domain name. Assume that your domain name is cloudguru.com. Then your bucket name would have to be “cloud.”
So you don’t include the top-level domain name, but you do include the bucket name, which has to be the exact name of the domain, if that makes sense. So, if you’re hosting at, say, hotmail.com, make sure the bucket name is hotmail. So that’s the way Route 53 and S-3 work together. It’s a minor point. It’s not in the exams. It’s just something you should know if you ever want to do this in real life. So I’m going to do research in the Northern Virginia region. I’m going to go ahead and hit next. In here. We can configure our properties. We’re not going to have versioning, logging, or tags in here. We can set our permissions. We’re going to just lock it all down for now. Go ahead and hit “next.” And we’re going to go ahead and create our bucket. So we click into our bucket, and if we go over to properties in here, we can see static website hosting. You can enable static website hosting by clicking here. This is a common exam question: we’ll give you a whole bunch of different URLs and ask which is the correct one for static website hosting.
So remember, it’s always your bucket name. Then comes the S3 website, followed by the hyphen, and finally the actual region. So I’m in Northern Virginia, so it’s the east one and then amazonaws.com. So always look for the bucket name followed by “S.” Amazon aws.com should be hyphenated. You will need to know that going into your exam. So we’re going to go ahead and say, “Use this bucket to host a website, my website.” I’m just going to call it my index document. So my default landing page is going to be index HTML. And likewise, I’m going to call my default error landing page error HTML. You can add redirection rules here to redirect website requests for specific content. I’m just going to leave that as the default. Well, I’m not going to put anything in there, and I’m going to go ahead and hit save. And it is literally that simple. So let’s go into it, let’s go back, and we’ll go over here to the overview. And so what I’m going to do now is upload a couple of files. Okay, so here I am. I’m just in a text editor; this is text wrangler, and I’m just going to write some HTML. So HTML, and then we’ll do our header. We’re going to fulfil our title. Our title will just be “Hello, Cloud Gurus.” If I can type correctly, I’ll finish our title. We’re going to end our header, and then we’re going to do our body.
So body. Then we’re going to do our main header, which will be Hello Cloud Gurus. End our header, and we’ll have a second header here, and we’ll just say welcome to my awesome serverless web page or website and then end our header. Then we’re going to end our body and end our HTML. So there we go, a very, very simple web page. So I’m going to go ahead and save this. I’m going to save this into my downloads directory. I’m going to call this index HTML, and as soon as I’ve done that, it will change all the code. Let’s go ahead and create or make it look more visually appealing; let’s go ahead and create our error HTML file. So I’ve opened up a new one by just pasting this in, and instead of saying welcome to my awesome serverless website, I’m going to say error, or yeah, error. So there we go. I’m going to save this one and I’m just going to call it error HTML. So let’s go over to S3 and upload this. So we’re here in room three. What we want to do is click “upload.” I’m going to go add my files; I’m just going to go over to my downloads directory, and it was our index HTML and our error HTML. So go ahead and hit “open.” We’ll start with next in here. We’re going to set our permissions now because this is a public website. What we want to do is change it to grant public read access to this object. If you don’t do this, your website will not work.
So do bear that in mind. Go ahead and hit “next.” You can configure it to run on standard infrequently accessed servers or to reduce redundancy. We definitely want it on standard because it’s going to be a website, so people will be accessing it here. We probably don’t want encryption at rest. I mean, it’s just saying hello, Cloud Guru. So I’m going to leave everything at default. Hit next and upload. This is now uploading my two documents. So if I go into here and click on properties and go over to static website hosting, I can just click on the link here and I should be able to get a web page.
So let’s open it up, and there you go. Hello, Cloud Gurus! Welcome to my awesome serverless website. So let’s go ahead and try to break this site. So here I am, back in my bucket. The simplest way for me to destroy this site is to stop making it public. So I could just go down here, click on permissions, and right now it’s allowing public access to everyone to be able to read this object. Let’s go ahead and just undo that. So go ahead and hit save. I’m going to go back to my website so I can click in here. It’s under properties, I believe. Yes. There we go. And if we click in here, we get an error. And why is it an error? because it can’t find the index HTML. because it’s not public. So there we go. It is really, really simple. I think the biggest takeaway for static website hosting is this. It is a static website, so you can’t have things like PHP, ASP, or anything else that’s dynamic. You can’t have dynamic content. As a result, it is primarily intended for HTML or any other type of static file. It scales infinitely. So I was working as a solution architect. We had a launch for a very big movie. I’m not allowed to say what it is because I was under an NDA, but it was a major Hollywood film, and they were concerned about the number of visitors who were going to go and see the preview of this film. So we put it all up in S3, put it behind a static website, and I think we got something like 15 million hits in the first 24 hours. Something ridiculous. So three was automatically scaled.
We didn’t have to worry about elastic, load balances, or anything like that. And actually, the cost of the traffic was almost nothing anyway. So that would be a good use case for static websites. That’s pretty much where you’re going to see it in your exam—a scenario just like that. And then the other thing to remember is the actual format for your static websites, the actual URL. So it’s always the bucket name, then the dot, and then the three-hyphen website hyphen followed by the region. So I’m now in the east. amazonaws.com. So keep the URL format in mind. So that is it for this lecture, guys. Later on, we are going to start building some more serverless URLs. We’re going to start integrating this with the poly service. As a result, rather than being a simple Hello World example, it becomes much more hands-on and technical. But that will come later in the course. So hopefully you enjoyed this lecture. If you have any questions, please let me know. If not, feel free to move on to the next lecture. Thank you.
4. CORS Configuration
Okay, so I’m in the AWS console. I’m just going to delete the bucket, and we’re just going to start everything over. So I’m going to delete the bucket from that last lecture. So my three websites, London, go ahead and hit confirm. And now I’m going to create a new bucket. Let’s just call it my index website, London, and go ahead and change the reader region over to London.
You can do whatever region is closest to you. That should be available, hopefully. Yes, it is. Go ahead and hit “next.” I’m going to make this public for everyone because it is going to be a website. I’m going to go ahead and create the bucket. And then, once that bucket has been created, I’m going to go into it, go into my properties, and make it a static hosting website. I’m going to say, “Use this bucket to host a website.” I’m just going to leave index and error as the default values. And then we’ll go back to our objects, and you can see that it is empty. Okay, so we have a few files here that we’re going to upload, and all these files will be available in the resources section of the course.
And again, don’t worry if you don’t know how to programme in HTML or if you don’t understand JavaScript. The developer associate exam is not going to test you on your coding ability. It’s going to test you on the principles applied. It will put you to the test in terms of developer principles. So here we have a very simple web page. It says “welcome to the index page.” And then we’ve got this little script. And I’m just going to uncomment out the script so we can make it live. And basically, the script is saying, “Get HTML from another three buckets and load.” And here’s the asset, and we’ll enter the asset URL here. Now, we’re just going to execute this from one bucket. So we’re going to have all the same files in one bucket. So the asset that we need is called loadpage HTML. It’s going to save that if we just go over here and have a look at the loading page. A simple header stating that the page has been successfully loaded. Cloud Gurus So if this works, basically all you should see is “Welcome to the index page,” and then the page is loaded successfully. Cloud Gurus and that’s the end of the web page.
So what I’m going to do now is just go back over to Step 3 and upload this. Okay, so here I am at three in my bucket. I’m going to upload; I’m going to go in and add my files, and we’re just going to do these three. So index, load page, and HTML error. Go ahead and hit “open.” Go ahead and hit “next.” Permissions: obviously, this is a website, so we want to make sure that everyone has read permissions. Go ahead and hit “next.” Go ahead and hit “next.” Go ahead and upload. And there we go. We’ve got our three files. Now, if this has worked, we should be able to click on our index file and click on it again. And there we go. Welcome to the index page. The page has loaded successfully. Cloud Gurus Okay, so let’s go back and basically define the purpose of this lab. What we want to achieve here is to have our load page HTML in a completely different bucket, but still have this index HTML call it. So I’m going to go in and delete the load page HTML.
Go ahead and hit delete. And then we’re going to go in and create a new bucket. So let’s go ahead and create a bucket, and we’re going to call this my course test bucket, London. I’m sure nobody owns that, but you never know; people like to troll me. There we go. So if there’s nothing there, no error messages, we can go ahead and hit next. Go ahead and hit “next.” because this is going to be a website again. We just want to make read-level permissions available on the bucket. Hit create, and now we have our bucket. And now what we need to do is go into the cause test bucket and click on Properties. We want to make this a static website hosting.Again, we’re just going to use this bucket to host a website.
Go ahead and hit save, and we’ll go back to our objects. Now I’m going to upload that object, go in, and add my file. So it’s just called loadpage HTML. Go ahead and hit OK, then hit Next. I’m going to add my public permission, so I’m going to allow people to read it. Hit next. Hit next and upload. Okay, so there is my loading page. If I actually go in and click on it, I can see that it’s loaded successfully. But note the URL I’m using; it’s just the bucket URL. I’m not using the website URL. So let’s try and use the website URL. We’ll go back to MyCore’s test bucket here. We simply navigate to Properties and select our static hosting. If we just click on that, we’re going to get an error message. But let’s go up here, and we’ll just go forward, slash, and then load the page in HTML. And now it is loading. And now we’re using the website URL. So we’re using MyCore’s test bucket at London’s three-hyphen website Eusto and Amazon’s AWS load page. I want you to copy that URL; make sure it is the S-3 website URL and not just your S-3 URL. And then what we want to do now is go back and update our index HTML document.
So here’s our index HTML file. And all I want to do is change this load page HTML to be the website address for our load page. Go ahead and hit save. And now we’re going to go back to the console and update our index HTML file. So here I am, back at the console. London, I just need to go to my index website. I’m going to, just for argument’s sake, delete this one. Delete, delete. Then I’m going to upload a new index HTML file. So here we go. Index HTML. That’s the one I’ve just saved. Go ahead and hit “next.” Remember to make the public permissions public, so everyone’s allowed to read this. Next, next, and finally upload. And now, if we go to the index.html file, we try to load it. It isn’t loading the other; it isn’t loading our load page HTML. And the way we configure it to allow our load page HTML is that we have to configure a cords configuration file, and we have to do this in the bucket in which that load page HTML exists.
Now, before we do this, you can have a quick look if you just right-click on the page and go over to inspect. I’m in Safari—sorry, in Chrome at the moment—but you can try this in Safari, Internet Explorer, or Firefox, whatever it is you use. And then if you just go down to scripts and click on the scripts, you can go over to the console, where you can see that the attempt to load the source server failed with the status of 403 forbidden. So that’s why it’s not loading right now. So how do we fix it? Let’s go back. So we need to ensure that we not only get the URL of our S3 bucket, but also the actual website URL. So simply copy and paste this here, or copy it, and then return to Amazon S 3. We can go down to our cause test bucket and go into the properties, sorry, permissions of it, and click over here under Access Control list, where we can click on cause configuration. So, this is a sample policy; please send it to us in its entirety. And all we have to do is allow this to happen. So we’ll allow the origin of the myindex website, London, the S3 website EU, and so on. Go ahead and just hit save for that, and then we’re going to go over to S 3. We’re going to go back to my index website, London. Click on “Index.”
And now, if we go in and view this, it hasn’t loaded it.And why is that? Well, because we’re not using the right URL, we’ve got to go in here and just paste in the actual website URL. So it’s my index website, London’s threeWebsiteEU, because this is the actual origin that we’ve allowed; we didn’t allow the other origin. Hit enter, and you can now see that it’s loaded successfully. So it can be a bit tricky. You’ve always got to check which URLs you’re using. Make sure you’re always using the website URL as opposed to just the normal three-letter URL. But this allows you to have assets in other buckets. You can have image files in other buckets; you can have JavaScript in other buckets; you can have HTML in other buckets. And then you can allow all your buckets to start talking to each other. You can actually design websites across different regions. You can have your image files in one region and maybe your JavaScript in another region.Maybe you do that for Dr., but performance-wise, it’s probably not a good idea.
So calling is really, really simple. Just remember that you’ve got to enable, because in the bucket that’s being called, you basically have to allow permission for the parent bucket to call the child bucket. Once you’ve done that, it should work seamlessly, but always check the URLs. So that’s it for this lecture, guys. If you have any questions, please let me know. If not, feel free to move on to the next lecture. Thank you.
5. Build A Serverless Webpage
That is it. That means our API is ready. So if we click on Actions, we can go ahead and hit Deploy API. The deployment stage will give it a new stage. And because this is going to be a developer, one will hit dev, and we’ll give it the same stage description and the same deployment description. So it’s our development. Go ahead and hit “deploy.” Now that will give you a URL. So make sure you copy and paste this URL, because this is going to be your API URL. And you’re going to need to add this to your S3 website. So keep this URL handy. The very last thing we need to do is go into S3 and deploy our website. Okay, so I’m in the AWS console. We just need to go back over to S3, and what we need to do is just change our bucket permissions for our website. So find your website. So my website is a cloud-guru-monopoly. Click here and then Permissions.
And we’re going to add a bucket policy again. This will be in the zip file that you’ve downloaded, and it’s just called Bucket Policy st called Bucket PAnd this is what it looks like. To do a copy and paste, we are going to have to enter in the Amazon resource name of the bucket, however. So I pasted that in here. And the good thing is that it automatically gives us the ARN. So we’re going to just copy and paste that here, and we’re going to paste it in here. So give it a bucket name and just paste it in here. There we go. and hit save. This will make it so that any objects that we put into our S3 bucket will be automatically public so that we don’t have to keep making them public, which is what we did in the last lecture and was a bit of a pain. So once that is done, we’re going to go ahead and upload our objects. So the final step before we launch our website is to use these three files. CSS is used for the styles, JavaScript for the scripts, and HTML for the index. We need to go into the scripts in JavaScript. In addition, we must update this API gateway endpoint with our API gateway. Now, if you didn’t save it for some reason, go to the API gateway and then click on Post ReaderAPI, Stages, and Dev. and you’ll be able to get the URL from here.
So just copy and paste that. In scripts, copy and paste it into your API gateway endpoint. JavaScript. Save it. We’re now ready to upload our files to S Three. Okay, so I’m in my S-three bucket. I’m going to go ahead and hit upload, adding our files. I’ve navigated to the zip file. As a result, it was scripts JavaScript, style CSS, and index HTML. Go ahead and hit open, and go ahead and hit upload. That should upload very, very quickly. There we go. And if I click on index, I can now just click on this link, and hopefully, here we go. We have a cool little website. So let’s give it a test. Let’s use and possibly add an Australian accent. Now let’s use a British one. So we use Emma. And in here, I’m going to say hello, cloud gurus. Now, sometimes the way they pronounce gurus can be a little off, so we’ll just add some additional ones. I hope you are enjoying the course so far. You’ve now created a serverless PHP website to help you study on the go. So go ahead and click and say it. Now she won’t actually say it, but what this will do is post two API gateways that will then trigger our lambda function.
Our lambda function will store that in DynamoDB. That will trigger an SMS notification, which will trigger our next lambda function, which will then trigger the poly service. Poly will then take this text, convert it into an MP3, and save it to our S3 bucket. That will then update our DynamoDB table, saying that it’s being processed and stored in our S3 bucket. And then we should be able to go in and listen to that. So let’s go ahead and just hit “say it.” And here we go. We’ve got our post ID, so we know that it’s worked. It’s going to be a bad three. If I click in here and hit “star,” this will say I want to see all our posts. So here we’ve got it; this is our test post from earlier. So it still says processing because there were no other lambda functions written at the time. But in here it says, “Hello, Cloud Gurus, I hope you’re enjoying the course so far.” So I’m just going to turn my volume down a little bit, but I’m going to hit play. Hello, Cloud Gurus! I hope you are enjoying the course so far. You’ve now created a serverless poly website to help you study on the go, and we can actually go in and download that. So now you can create notes on each section of the course and then download these as MP3 files, which you can then listen to on the way to work.
So we would highly encourage you to do that. a couple of things to clean up. Let’s just go take a look at the AWS console. So I’m in the AWS console if we go over to DynamoDB. If you don’t like a particular post, just click on Tables, click on your post table, go to Items, and in here we can see we’ve got our two items. I’m just going to delete these for now because I don’t want them saved in my table. So go ahead and hit delete. And if I go back to my webpage and do a search for “star,” It’s going to show that there’s nothing in here. Now the other thing we need to do is be able to delete the actual MP3 files that it’s generated. So if we go back over to S-3 and click on the bucket that we are saving these audio files to, So, for me, it’s a cloud guru hyphen poly audiofile in here, the MP3, and I can just go back and download it if I want. But if I can just go back and click in here and then select more and then select delete, go ahead and click delete. And that’s it. So I really hope you enjoyed this lecture, guys. Please use this as a stuttering aid. Create as many notes as you can and then use the polyservice to convert those two MP3s so you can listen to them on the way to the exam. So that’s it for this lecture, guys. If you have any questions, please let me know. If not, feel free to move on to the next lecture. Thank you.
