Serving Static Angular 5 Apps using AWS S3 & Cloudfront | Hashtag Learning | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Serving Static Angular 5 Apps using AWS S3 & Cloudfront

teacher avatar Hashtag Learning

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

22 Lessons (1h 17m)
    • 1. Introduction

    • 2. Architechture overview

    • 3. Angular section Goals

    • 4. Install NodeJS & Angular CLI

    • 5. Create Sample Angular5 Application

    • 6. Package Sample Application for Production

    • 7. Limitations

    • 8. Angular recap

    • 9. S3 Section Goals

    • 10. AWS S3 Introduction

    • 11. Create & Configure S3 Bucket & Upload Build

    • 12. Set Permissions - S3

    • 13. Error Management - S3

    • 14. CORS

    • 15. S3 Section Conclusion

    • 16. Cloudfront & DNS section goals

    • 17. Cloudfront Introduction

    • 18. Cloudfront Setup part1

    • 19. Cloudfront Setup part2

    • 20. Cloudfront Invalidate cache after deployment

    • 21. Configure DNS with Route53 & Delegation from Goddady

    • 22. Course Conclusion

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

A complete hands on course to create, manage and host Angular5/Static website using AWS S3 & Cloudfront under 1 hour

Are you passionate to learn & explore AWS Concepts ?

Are you that person who gets overwhelmed when you hear about servers & configurations ?

Are you that developer who writes Apps but doesn't know how to go LIVE with it ?

Are you that person who wants to go LIVE with a scalable solution and maintain low cost ?

If you are one of these persons, then you are in the right place, because I have created this course by keeping the following things in my mind. 

1. Easy to manage

2. Scales to handle any amount of traffic

3. Reliable

4. Cost Effective.

In this course you will learn the following concepts.

1. Install Angular Framework & Build a sample application.

2. Learn about AWS S3 & Hosting static websites on S3

3. Learn about Cloudfront & configure cloudfront to work with s3 buckets

4. Learn to configure DNS using Godaddy and Route53.

By the end of this course, with in an hour you can host your Angular 5 or any single page application on S3 and serve it via Cloudfront which will be able to scale to any number of users in a simple and cost effective way. 

I really hope that you take this course and learn something new about AWS Concepts. I will see you in the course.

Meet Your Teacher

 My name is Sai Kiran Rathan and I am currently working   as  an AWS System Administrator and Solutions Architect   for a software company in New Jersey. 

I hold AWS Certified Solutions Architect Associate & Professional,  AWS Certified Developer Associate, AWS Certified Sysops Administrator Certifications.
I am a huge cloud fan and i love to share everything i know about cloud.
My courses not only teach you about all the services that are offered in the cloud but also teach you how it is implemented in the real world scenarios.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: hello and welcome to my course on serving angular five applications using era Bliss s three and Cloudfront. My name is Sai, and I'll be the instructor for this course. So let's talk about who should do this course and what you'll get by the end off this course. So to answer that, you need to look at the falling for questions. Are you a passionate developer who wants to learn and explore different date of lease concepts? Are you that person who gets or around when you hear about server configurations and get confused with that? Are you that developer who writes APS but doesn't know how to go live with it? And are you? That person wants to go live with the scalable solution and also maintain low costs. So if you come under any off before categories here than you're in the right place, because I have designed this course in order to help you go life within an hour off time by keeping the falling things in my mind, the first thing is like I want to design a solution, which is very easy to manage because I don't want to involve complex over configurations. I want my solution, Toby. A scalable solution that can handle any amount off Lord that is coming toe our application . And the third thing is like, I want my solution to be a reliable one and the fourth and the final thing is like I warned the solution to be a cost effective, that is, I want to maintain the costs as low as possible. So to design the solution with all these things in mind, I have chosen this architecture when I'm going to cover all the individual components in the picture or view section. But this is the architecture that we're going to build by the end off this course. So let's talk about some of the requirements that you need for before you go into this course. The first thing is you need an AWS account and you need a laptop or a computer with the Windows Mac or the next operating system. And you don't need any prior knowledge required off AWS because I'm going to cover each and every concept from basics that that is involved in this particular architecture. So let's talk about the course itself and the different sections that we're going to cover in this. First, we'll start off by doing an introduction and in this section will cover the architectural review and give a intro to the entire course. And, ah, in the next section, we're going to create the angular application where in in this section you'll install Annular Seelye. You'll see how to create a sample application. You'll see how you can configure the production well so that your distributed ful file is ready that can be uploaded into history. So once you have the angular application, then you're going to go into eight of recessed resection, wherein you learned about AWS history. You'll see how to create and configure AWS pocket that can host a static website, and then you're going toe. Approach your bill and then you'll modify a permission so that it is accessible publicly. Toe. Request your website. Once you have AWS estrus set up, then we're going to go ahead and learn a word cloud friend and then we're going to create a cloud from distribution, which is a cashing solution. And then we're going toe configure our Route 53 so that recon point or DNS to our application, so that will once we finish all those things, then we're going to go into the conclusion part where I will conclude this course by giving a recap on what we have completed. So now I want to show you one such application which I have used this architecture to host s. So basically, this is a angler five application which I ah, have hosted it on s tree and I'm serving it via cloud friend A. So you can see this is what this is a complete end to end application. Ah, that is being just served by s three ended. It's like super quick and ah, and and also it is a very scalable solution wherein it can handle any amount off Lord coming in. And it is also highly available and reliable. So I'm really excited to start this course with you all. And I can assure you that by then off this course you'll have a scalable solution and you'll be ableto upload. Your angular applications are static. Websites to est rien servant were cloudfront. So Ah, good job on choosing this course and I will see you inside with the in the next lessons. Thank you so much. 2. Architechture overview: hello and welcome back. So in this lesson, we're going to look at the architecture for the static website hosting that we are doing in this course. So let's get started. So here's the architecture diagram and the different confidence that we're going to create in this course. So first, we're going to start off by creating or Ambler Angler five, sample application of your going to download the angler see alive. You're going toe, create a sample application and then we're going to create a production a lot off it. So once we finished that part, then we'll go to the S three part and we will create the S three bucket and then we'll configure it to have study, coasting, enable and we'll do all the other permission. Set up docked word. Allow us to access the S three bucket by the users and browser angle. If I sample applications. So once we finish the estate part, then we'll go ahead and create the cloud from distribution. Where in the cloud from distribution is a cashing solution which enables providers and this on. Then we'll log that down so that Theis tree is only accessible via cloudfront and no one else can radically access it. So once we finish the cloud from distribution, then we're going to create our dynasty cards for our in point. It should be, you know, me, Apt art cycle in a the not calm. And then we're going to see how the DNS can be propagated from any third party. DNS providers are configuration that out 53 then Oh, that will conclude all our components in the in our architecture. And at the end off this course, you should be having a working DNS you in point. You're a which would be pointing toe the cloudfront distribution and cloudfront distribution should be able to access the S three bucket. So serve your web application, So Ah, I'm really excited. Toe begin the course. Um, so I'll see you in the next lesson. Thanks. Bye bye. 3. Angular section Goals: lo and welcome back. So this is an overview lesson for our sample angler five application section, and we're going to talk about the requirement and what we're going to build by the end off the section. So here are some off the goals in the section. First, we are going to install the Nor Js of. It is a requirement for anglers he ally to be installed. Then over, you're going to install the anglers Eli itself, and we're going to create a sample application using the angler CLI and we're going Toe Creek. That sample application, which anglers like gives us by putting our changing some stuff just toe just to get a feel off, like using our own application. And then we're going toe packets that application toe be used like a production. And then and then we're going to use that build Toby holster industry, and that's our purpose off the section. So let's get started. I'll see in the next one by 4. Install NodeJS & Angular CLI: Hello and welcome back. So in this lesson, we're going to install anglers Eli and its dependencies. So basically Ah, let's get started by going to this site, which is C lighter, angler dot Io and I have that side open here. Toe. Install this angular Seelye, You just need to run npm install Bash G, which is Dash Global at great angler slash Stielike. Now, you might be wondering what this in pm It's basically in PMS north Package manager and, um which comes along with when you install no Js on your on your computer. So to install anglers, he alive. Basically, we need to install know Jess first. And to do that, we need to go to this website, which is, nor Js store dangler. No j start arc. So here, once you go here, you can just don't know whatever the latest stable washiness And at the time of this recording, it is 8.9 point four. I'm just gonna download that in my download folder and let me boss the sun till it gets only Okay, so now that this is downloaded, I ran that program and this is a basic installation, so I'm just gonna hit next. Agree the assumption conditions. Choose the folder where it's going to install and then hit next and install it. And once this is installed, yuk unjust, Ready five by going to a command trump and checking for note command. So maybe wait until this installation complete. I think it's just gonna take couple of a couple more minutes. - Okay , so now that note is installed on our system. Let's go to a command, prompt, partial, prompt and check if that's actually installed properly. So to do that, I'm gonna go to the power show and I'm going toe typing, nor dash we which tells us which worsen it is installed. So it just wishing 8.9 point four, which is that's what we've found it here. Okay, so now that we have ah note installed here, we can go ahead and install our anglers here like Okay, so let's go back to this website to download the angler cli Oh, we just need to do run this command, which is NPM install Dash G angular sea life. And let's last Eli. So I'm gonna run that now. Oh, npm install dash g it read angular slash c alive. So now this is installing it. I'm just gonna boss this video and come back once this finishes the installation. Okay, so Ah, the installation of anglers here lie is complete. Now it took likable a couple of minutes to complete installation now are Anglicized install and ready and we can go ahead and create our first sample application. So that's it for this lesson. Uh, I'll see in the next one. Thanks. 5. Create Sample Angular5 Application: hello and welcome back. So in the previous lesson, we have installed the angler Seelye and no Js eso in this lesson. We're going to create a sample application using angular see light. So let's get started. So to do that first you need to create a fuller somewhere where you want to create the application and you need to go into that folder and open a come on from there in that place . And then you just need to type n g nu o and one of the project name that you want to give. I'm just going to give this a sample you Demi project, and then I'm gonna hit enter, And this is actually going to create the project outline. And it creates all the dependency requirement files and and basically gives us a end result off a running application wherein we can you canoe style as a quick start and then you can modify your application of it with the custom stuff that you want to add to that application. So I just boss this video under this project gets set up and then I'll continue from there . Okay, so now the sample application creation is complete. Let's open this project folder and T if what all the different files ever created. So you have Thebe packaged or Jason where you can specify your NPM packages. Let's open this with visuals. Really? Accord and see Ah explode the project a little bit. I'm opening the visual studio code here. And so here's the usual three chord. I'm going toe open this, uh, project that we have created. Okay, so in this project, you can see all the different dependence is already created by anglers your life for us and to see what's getting ah served in this application Here, you can go to source, you can goto app and then you can see the app competent yardage Dema. And this is what you would be seeing once you run your application. So to run this application, all you got to do, it's like goto the go back to the sea, lie here. But you have created this website going to that web site like goto this. Go to this folder here and then do n g uh and G served now Once you hit this nd serve, you should be able This will come up in the port number. Usually the sports up for number, local host 4200. Let's see where this is going toe. Open it. So to see what this application is doing, uh, you can just put up the browser and he concluded, Bring up the browser here and you could do local post 4200. And you should be able to see your sample you Timmy project that we have created here. And let's do some changes and see how it's going toe take effect. So to do that, I'll go back to the oh visual study accord here, and we can say here, welcome to its rough title on the stick this off and then say Do you're dummy angler Fi application and hit save? And if you go back to your project, you should see that change is getting, uh, effect. And so that's it for this lesson. We have created our sample. You don't project in this course. We're not going to go in depth off like how to use angler or, like how to create an angular website because that is art off the scope off this project. So we just need a sample applications so that we can take this up and hosted in as three and then Beaudry a cold front. So? So we're not gonna go deep into this annular project creation here. So that's it for this lesson. And in the next lesson, we're going to see how we can packets this application that can be whole stating a in a production system are in ste or wherever you want. So I'll see you there. Thanks. 6. Package Sample Application for Production: hello and welcome back. So in the previous lesson, we have created our sample application, and in this lesson, we're going toe packets, the sample application, Toby, um, to be used on deployed in the STD pocket. So let's get started. So to do that first, what we need to do is like, goto the open up the command, prompt and navigated the project folder. Oh, previously we were running nd serves, so I'm just gonna come out off session. So now that you're here, all you gotta do is oh, you need to run this command n g build. And then you need to supply prod. So what this does is when you supply the proud flag this is going toe, do a head off time, compile a shin, and it's going to eliminate all the development model files, which is not required in the production. And it's going toe packets the application and give the output files in a distributable folder. So let's on this command. So it's going to take a couple of minutes $2 on the modules that that specified in the packaged or Jason and, uh, put it all in the distributable folder. So I'm gonna pass this until this complete, and then I'll start from there. Okay, So the bill finished here and let's open up that folder and see what we got created here. So if I go to this folder, you can see that there's a distributable folder and this ISTEA output belt that you would be using to host it in the history. So now how that this distributable is ready. All we gotta do. Ah, his copy this to the S three bucket that will be creating in the next lesson. So that's it for this lesson. And I'll see in the next one. Thanks. 7. Limitations: hello and welcome back. So in this lesson, let's talk about some of the limitations that we're going to face with our angler. Five applications being posted on AWS s three. So one such limitation is your custom, Http. Doubts don't work by that. What? I mean, it's like, let's say you have an application that being landed on index dot html and then you browse through a route called about us or contact a speech. Ah, In that case, your application would work. But if you definitely go to your browser and type in your you are a will slash whatever the route that is like about us or contact us, then it will throw a for a four not found because you're you're that particular specific route is not a file in the ESRI. So it would just written a letter saying that there is no key existing, intact, particular location. So that's one limitation. And the second limitation is that you cannot have your angler five application directly talking to your database or any any content that it's that it's not being, ah, the this that it's like directly accessing from within your application outside the, uh, outside the history. So the only way you could access some off the dynamic content or push your content turkey toe the databases is via the Web api ice. So if you so basically your APP needs to be a static application, that's just Ah has specific rules and accord in a way that it fed just its data, and it communicates with your dynamic content. We are the Web API eyes the next limited that, ah that we're going to face. It's like when you do every load just like your customers to do without. Your reload would result in a for a four not found and ah, last but not least, the ah history is basically like a directory browser, and when you have your application, their bundle as a single page application, then you only have index dot html and all the other routes that you have configured within your angler application are just a watching routes that are in the angler framework and not the actual file. So this word create problems, but we do have ah fixes for these kind of issues and the baby you're going to fix ISS like whenever there is an error. We're just going to Lord our index dot html page that that would redirect the user toe the route paid, so it shouldn't be a big issue. Um, so that's it for this lesson. Ah, and I'm going to talk about these limitations when aware this, Uh, whenever the scenario comes up, thanks. 8. Angular recap: Hello and welcome back. So, in this lesson, we're going to do a quick recap off what we have done so far. Eso in this section, we have ah started off by creating by installing the Angler Seelye of it. No Js and then the creator Example application using n g nu. And we have served the application using nd serve. And then we created a build production build out off a sample application project using nd build and providing the broad flag eso that it eliminates all the level of independence ease. So we we got the ah and result in the distributable folder or inside that project. And we're going to use that in the in the next section wherein we'll put that will file in the S tree. So that's it for this section. I'll see in the next one. Thanks 9. S3 Section Goals: Hello and welcome back. So this is an intra lesson for this configure s resection and we're going to talk about what we're building in this section. So let's get started. So here are some off the gold for the section we're going to start off by learning about AWS s three of you're going to see what are the different options ste gives us. And what are the different use cases of which very continues on AWS S t. O. This is basically a storage service and we'll find out more about that in that particular lesson. So once we go through the or view off s tree will create theistic pocket itself. And inside that bucket we're going to upload our sample application and then we're going to enable that AWS history pocket Toby ableto host static websites And then at the end, we're going toe configure our cars, which is cross origin resource sharing, and that would complete the configuring off Esti part s. So let's get started 10. AWS S3 Introduction: hello and welcome back. So in this lesson of you're going to talk about AWS s three before we deep dive into this section. So basically, Aws s tree is a storage solution offered by Amazon and s three stands for a simple story service. Now let's see what the service offers. So basically, aws Sastri is easy to use storage solution which is at skill. By that, what I mean is like you can in technically store a limited amount of data onto it, and then you can read through it whenever you want. So the next thing is the data, durability and reliability. So eight of bliss offers, like high amount off. Ah, durability and reliability to your data by that. What? I mean, it's like, let's say, um when you upload your data into S three s three behind the scenes, replicate your data into different data centers so that even if one data centre goes down, then you have another data center which is up and running, and you have your data in a secure place. Ah, also there, just like the real reliability factor is very high on the history and that is why it is like one of the most heavily used service off as three. And it is It has been adopted by several, uh, organizations that are using Amazon as their clouds and cloud solutions. And one thing that it is definitely is that Ah, it is a simple data transfer. Very like you can just upload your data using Seelye. Or you can just go to their console and then just drag and drop. If you if you have, like, tons and tons of data Oh, terabytes and terabytes of data. Then you can use their, um, snowball solution wherein they can. You can ship your hard drive toe Amazon, and they will load the data into your bucket are Or you could use noble solution wherein you they give you a device and you transfer your data into that and then they will, ah, upload that data from the snowball. That's one thing, and the next thing is security and access management. Once you have Dollard uploaded the data, then you have several different options to secure your data. That issue can you can choose to publicly allow data to be donated, or you could you could you could share your data among different AWS account, you can restrict the data to be accessed even within the count itself, saying this user has access and this user doesn't have access and you can weaken. Give granular access on and you have all the control over your security. You can also have you data encrypted, interesting transit and all those things you can manage from AWS console. Oh, and it has really high security features and access management facility. And the next thing is, it has steered stories classes by that. What? I mean, it's like it has different stories, classes with different price tiers. Um, the standard one is like where your data gets, ah, replicated all across behind the scenes. Then you have, um, other story solutions. Like where if you were data is not so important and effect, you're okay. Fit of some off the data being lost A with the Peter off time. Ah, and those kind of data you can you can basically have infrequently access storage. Or you could you could store it in AWS glacier very in the then you can archive your old fights that you don't want, but you want to store it for your compliance reasons. And ah, the the amount of money that you're going to pay when you when you have archived are using in tracked, infrequently accessed only just like it is a lot less compared to what you pay. Ah, for general stories, so or all AWS has three is like very affordable. And it's like, um, it provides solutions in a very less price. And the next thing is, it is equity in place. Ah, it offer square in place by dart. What? I mean, it's like you don't have to download the data to actually see what data exists. So you can basically go to a particular object in your bucket, and then you can get information about it even before you download that specific data so you don't have to retrieve all the information. I mean, like, you don't have to retrieve all the data. You can just retrieve the information about a specific object. So that's what quitting places. So now that we know a little bit off a street, well, let's see, what s three features are like, what are the advantages? So basically, you store the data in the form off to store the data in history, you need to create pocket, and buckets are like the main folder or mean you call. Call whatever it is, what it is, it's basically a bucket, and you can throw in objects in it. So all the data that you store inside the bucket is basically a key and object. So you specify a key to your specific data and it distorting the form often optic. So ah, you basically store the data in the bucket, and then you can download the data whenever you want. If it's infrequently access story for this a standard stories here, then you can, uh, download your data immediately. Even though even if it's introduced the redundancy tear, you can still download the data immediately. Whatever this lace year, then you need toe wait for six hours before you can download the data. So this is Ah, this is these are the download options that you get when you're using yesterday. The next thing? Yes. Like like I said in the previous light, you can manage the permissions off the objects that you are applauding in a very granular level, and you can specify who can access uh, this data who can read the data? Who can ride the data? Who can Hogan just read the data. But you cannot write the raider those kind of things. And it has, ah lot of standard interfaces built into it, which enables you to basically program your have your application stock to it of necessity in a very simple manner. Like if your if your application is using doctor framework, then they provide your doctor and libraries are Norton and STK, and for this for this job are frightened. Ruby, our node, all this all this kind off languages to commonly used languages have the inter standard interfaces Well, which is provided by Amazon so that it makes your programming a lot more easier and quicker . And it is all basically, everything is documented in native Leah's documentation. You can just search for AWS documentation for so in so language for s tree than you get toe . See all the documentation that it's all simple and easy to use, and it offers a lot of advantages. So, um, so basically, you can start this using this s three for many different purposes that you might have for your application so Ah, that's it about this s tree. Now that we know a little bit off what s three years and like what it offers, Let's go our deep dive into this and then create our AWS s three bucket do so star static website. And I see in the next one. Thanks. Bye bye. 11. Create & Configure S3 Bucket & Upload Build: hello and welcome back. So in this lesson, we're going to create our estate bucket where we'll upload our web application that we have created in our previous lessons. So before we go into the console and create this tree pocket, here are some off the requirements that we need when we are creating the market. So first thing is, we need a bucket Name the one rule when you're when you want toe host a static website industry. Is that your domain name? Your end result Domain name should match the bucket Name meaning. Let's say if you're if you want if you're creating some website, something like you know me apt art cycle, nothing dot com If that's what your final you are, um, looks like that you need to create a bucket name bucket using that name. If someone already uses that particular bucket, then you cannot actually use that to create static websites. So when that there's only downside that you have here otherwise, once you, uh once you name your bucket, the app name that you want toe, use it as Dennis. You should be good to go. And the second thing that we need is to choose the region for this lessons purpose. We're going to choose Ireland and the 13 years we need to specify What's the default page that the static website is going to use, which is indexed Arnage demon If you if you remember correctly, the in in our lesson where we have exported the birth file which is in the distributable folder, you can t next our regiment. So that's going to be our before landing page. So now that we know our requirements, we're going to start by going into the AWS console. And here you can search for s three. And once you goingto s three, you need toe hit create bucket and you need to give the name. Like I've said in the in few minutes back, our name should be matching already in its name. So I'm going to use you, Timmy apt art cycle in that time dot com as my, uh being s name here. So I'm going toe bucket name. So it's going to be you, Timmy app, dark psychic and dot com. So I think this is available. Okay, So it did not complain. So I think it is available and I'm going to choose you Ireland. And I am just going toe. Oh, hit next here and we'll set some properties. So here, what we need to do is we need to Ah, I don't think we need any off these for now. I'm gonna just hit next and we'll just leave the default permissions for now and then we're going toe. Ah, disappoint missions once we create the bucket and oh, are setting so that this dusty, static website hosting so just hit next. And then you should be having your bucket ready so you can search for your app here, which is, you know me app. So once you're in this section, then you'll wanna go to properties and go to static website hosting here and then use this , but get to host a website. So I'm gonna choose that. And here we have to specify our default document, which is our index dot html and that's very much it. And then I can hit save here and once I hit save your bucket is now ready to host static website. Now all you gotta do is go toe your view part here and upload the app that you have created using angler. So I'm gonna hit upload here, and then I'm going to add files and I'm going to navigate to the folder where I have created the oh, my sample, you dummy project. And then I'm going to choose although contents off the distributable folder. And I looked up Lord Hall of thes once I hit upload. Okay, so now that all the files are uploaded here ah, we need to modify the permission so that these are available toe be accessed of public. So let's check. Let's first get the Ural and point for this pocket and see if we are able to access it. I'm pretty sure that it should not allow us because we haven't given any permission so that this goes into public. So if you go to the property section and go to static website hosting, you should see a temporary in point that you can use, um, toe check. What's getting serving our website? So I'm going to browse this and like I said, you should get it for for three for Britain, which means you don't have access to browse, start specific files, 30 of operating to history, so Ah, that's it for this lecture. In the next one, we're going toe. Fix the permission issue and we will be testing. Ah, the access to our application were s three in point. You're okay. Thanks. Bye bye. 12. Set Permissions - S3: lo and welcome back. So in the previous lesson, we have created the S three bucket and we have enabled the ecstatic website hosting on this rocket. And also, we have applauded our bill fight into the bucket. So now what we're going to do is go ahead and change the permission so that we be, uh we can access thes oh files publicly on and we would not get forward to forbid. And once we fix the permission issue, So I'm going to go ahead toe the permission stop here and then go to the bucket policy. And basically, what you could do is you could use a policy generator toe under the policy permissions. So basically what you need to do, it's like open this in a new tab and years, like the type of policy that is, we're going toe juice, the S three bucket policy here and we're going toe allow a generator policy so that if we want to allow off something, so I'm going to hit start here because I want to. It's really give this access to everyone. And then the service would be a lovely assessed three here and the action that we're going to choose here is get object Because we just want permissions to this bucket so that people can read objects from this, but they cannot write anything into it. So just get object would be here. And then we need to specify award all resources we're going to give access to. So we're going to give the access from bucket, do all the sub folders. So if you see here, you'll see an example for the format that chooses the Aaron. So I'm just going to copy this part from here to here, and then I'm going toe replace the bucket name and key name here, and what I'm going to do is put in our bucket name. We're just going to be you. Me dark, uh dot com. And I'm just going to give slash start. That means everything from that bucket name gained. All the sub folders and contents off the bucket are publicly accessible. Forget object request. So once we're done with this, you just need to do act, statement and then hit generate policy. This is going to give us a Jason here way. We have to just copy this Jason part from here. and then we need to go back to Rs three console and in the bucket policy section here, you're just going toe based it and then hit Save. Now that you have given permissions, if you go back to your DNS, you can access by going to management. Sorry, properties. A static started website hosting. And then you'll see the endpoint off your application itself so you can just open. This helps. You can just open this in a new tab, and then you should see that now you will be able to access your sample application. So now we have our application up and running and we have a DNS provided by a street 2.8 and test our application. So that's it for this lesson. I'll see in the next one. Thanks. 13. Error Management - S3: hello and welcome back. So in this lesson, let's talk about how to manage and handle error. Start are happening in our angular five applications that are being hosted on s tree. So, like discussed in our limitations video some off. The scenarios are if your user data que lands on your are you world with a specific about let's say about us or contact us and ah, that might result in a 44 enter because that he's not an actual file or a key that is in your s tree. So are, if you're if you user directly goes to any non existent, um, file part or a your apart, then also it might result in a for a four or your fewer application just crashes. Then there might be some whether that's being thrown. Ah, toe handle these kind of scenarios. Aws also our first you a an option that where you can specify your inner page. That means whenever that specific ever happens, you can just, um, redirect your user toe. Some other location, toe handle, your that are nicely answered off showing A s three specific error. So let's see a demoff it and let's see how we can fix it. So ah, let's ah, rows this application first and see how and other looks like inevitably ancestry. So now that this is our application and it is working now let's say you have a ah route in your application of such as contact us. So now if you manically visit your application like this with contact us, there is no key called Contact us. If you go back to your or view, there is no key called Contact us in your estate buckets. So that is being resulted. As for zero for not phone So But if your application does have a link that say's contact us and then it is like being, uh, being served via the application, then it would work. But if you directly go to contact us, then it doesn't work. So to fix this issue Ah, what we can do is we can go back to our properties, go to static website hosting and then in the other document page you could just put index start HTM of and then hit save. Now, Um, after a couple of minutes, if you just go to your this page and hit refresh and then just try to do a test. Now you can see that off test doesn't exist here. Bar to your application is still redirecting it back to the next art HTML. And it is not crashing and showing us every year after that. It's like, for for not foreign are, um, some kind of access to united or any any other enter that might be there. So basically, ah, this is just to have your application look nice whenever some other happens. And ah, your user doesn't get some weird messages, so Oh, that's it for this lesson. And I will see you in the next one. Thanks. Bye. 14. CORS: hello and welcome back. So in the previous lesson, we have fixed the permissions in our bucket by generating a new policy which will allow all the contents off the pocket to public for for the get operation. And in this lesson, we're going to see where you can go ahead and change the cars configuration for your of application that you're hosting here. And ah, you. If you're a Web developer, you must be knowing like why you use the cars, which is basically cross our Jim resource sharing. And it is a mechanism of its allows. A restricted. The sources, like forints, never page to be requested from one of the domain and for these purposes. So I'll show you where you can go ahead. And so to do that first you need to go to the S three section and here I never get to your bucket, which is Oh, you know me up. It's like nothing dot com And here If you go to the permission section here, you have cars configuration. So if you go here here, you can change the configuration rules that you want toe change that if you want to just allow Ardan from your or some other specific website that you're hosting. Then you can specify it here than only Ah, those her origins are allowed toe request access. I mean, take resources for take the shared resources from this particular application. So Ah, that's it for this lesson. And I'm going to see in the next one. Thanks. 15. S3 Section Conclusion: Hello and welcome back. So this concludes our configuring is three section over when we have learned about word as three years. And then we went ahead and created our street bucket matching our DNS name. And then we fixed the permissions issues so that your application is publicly accessible. We Then, um we have been seen, like where the cars can be configured. And ah, now we are ready to go ahead and fix our DNS in the next lesson so that you kinetically access your website without using the S three provided DNS. So that's it for this section. I will see in the next one. Thanks. Well, by 16. Cloudfront & DNS section goals: hello and welcome back. So in this lesson, I'm going to walk you through what we're going to build in this section, which is cloudfront Andy Anus. So let's get started. So in the section, the goals are we going to see what this cloud friend and why we need cloudfront for our application. And then we'll go ahead and create the culture and distribution and apply all the settings are required. And then we'll talk about the DNS delegation using art 53 I'm also going to show in that part, like how toe confidently announce, If your domain is not purchased in AWS itself, I'm going to show you how you can delegate it from your go daddy account toe a deadly assault 53 how you can point your supplements from their toe. You're glad from distribution. So I'm really excited in for this section. So let's get started 17. Cloudfront Introduction: hello and welcome back. So in this lesson, we're going to talk about AWS Cloud trend, and we're going to see how we can use it in our application. So let's get started. So basically Ah aws Cloud friend is a Web service that's beats up the distribution off your static and dynamic Web content, such as not html dot CS doorstep or any other image wiles to your users. So the way it does is basically the AWS Cloud transit in front, off your application or your street bucket. And, um, it uses edge locations to serve your request. By that, what I mean is, ah, when you were a in a regular example. Oh, if your client access is your server toe, browse a webpage. What it does is it goes directly to your origins or wherever your application is getting served and it fetches it. So let's safe if someone, if your server sitting North America and if you're usually is from issue, so he s request comes all over all the way over to the North American region, and then it gets thespian, sticky major or any other country doctor. This requesting for which results in a very high latency because it has to travel the process to travel all the way from one region to another region. So, uh, in the AWS cloud France, you know what it does is it was girlfriend has different edge locations spread all across the world and instead off instead, off using entered off your user coming all the way to your ah oh origin server. What it does is three user is sent to the edge location. And if the edge location doesn't have the requested element cash, then it's going to go to the origin server, pick up that element, and then it's going to cash it here on the edge Location and the subsequent requests that the user sends would have the cached copy already in their location. And he would directly get the contract instead off going all the way over to the other region and fetching that specific file a ts sequestered for So this will result in very little agencies and it's going toe seem like your application is a lot better, and it takes a lot off Lord out off your application several itself, because not every request comes directly to your server toe. Ah, which will? It will lizard in less computing costs. Oh, at your origin part. So let's see why we need a devious cloudfront. So first of all, like I said, it speeds up the delivery using the X locations. It is very easy to set up and use traditionally with our cloud friend. If you had to set up a content delivery network on your own, it's going to class you hello off money because you need to go to different locations to set up your servers. And you need to manage your dedicated lines and something like that. Oh, it's just basically a very strenuous job. And for a lay man, it is. I mean, like forever. For a regular developer, it is very hard to go and set it up all all off those configurations. But with girlfriend, you can just do it and like few simple clicks and it should be up and ready. Um, with AWS Cloud friend, you get to distribute to your region specific content with your restriction capabilities. By that, what I mean is, let's say you have some content which you want only your Europe audience to be looking at are you want some country in which you want Toby? Only viewed in North America are issues something like that. So you can specify those rules in the cloud friend confrontation and car front will make sure that whenever the request comes in, it checks for the source i p. Source off that i p and checks from where the traffic is coming from and whether or not it is allowed to use that particular countries from that region or not, and then allows the user to access the specific content. So this will, uh, this will be very helpful if you are serving Theo the, uh serving content like videos or images, that it is only valid in this recipe region. And the next thing that is it provides us the ability to serve the private content using pre signed Urals, that is, let's say you have some some streaming service like Netflix or something like that, and you want your content to be viewed only by your paid customers. So the way you can do that is you could have pre signed Urals, which means that the same endpoint. Let's say there's a image rural that you distribute to your users, and they can view that you are only if, and only if they have the Ural with the pre signed a key that gets assigned to that you are only then they can access that specific resource. If not, they cannot access express trickery sores. So there's different configurations you can put to the pre signed Urals like Oh, how long that link can be active And, um oh, and when the links needs to expire and all those kind of parameters. And the other thing is like the origins off this cloud friend can be as three or Web servers, meaning you could serve your content from mystery directly using cloud friend. Or you can also use Web servers in friend off guard from time in behind of cloudfront. And, uh, like I said, it has edge locations. This we would all across the world, which would make your deliveries good a lot quicker than using the traditional way off our use erratically going to the specify um, server. Ah, and serve a request. Several responding to the use of seaQuest. So these are the different use cases and advantages off cloudfront. Uh, and now that we know why we need cloudfront. We'll go ahead and activate cloud friend and then distribute our sample. You gave me application that we have created, um, and use yesterday as our origin. So let's get started. 18. Cloudfront Setup part1: hello and welcome back. So in the previous lesson, we have seen why we need cloudfront distribution. And so in this lesson, we're going to go ahead and create the cloudfront distribution. To do that, you need to log into the AWS console and search for cloudfront. So once you are in this page, you can go and create the situation by clicking this button. Here you have two options. One is webinar. TMP basically are. TMP is something for ah for distributing streaming content like videos or audio. What? We're not doing a streaming content, but we're doing a web content with this. Like we're serving our web application. Uh, through s three bucket. So you're going to choose Web Mr Vision here and it gets started. Oh, here The origin settings basically tells declawed friend that where your origin server, it's like where your application is getting served from. In our case, it is Rs three bucket. So you can just search for your bucket name here which issued a me APP start cycle, nothing dot com. So this is the end point off for her DNS destroyed by the S T bucket to Cerar sample application and three origin part is basically you want the default with the slash because you want everything that that this particular endpoint serves. Toby your origin. So you're just going to leave it blank here, Origin ideas just to recognize what I mean. It's just variety assigned to this Ah, specific origin. You can just leave this S t. For what? About the or decision sets us and the request Bucket access. So what this means is, once you enable this, then you can't access your Estrich bucket using the STD a nest act we have used in our previous lesson. Yes, that's what we weren't because we want our users to go via cloud. Friend answered off, going toe the s three bucket directly. So we're going to go ahead here and click Yes, and we're going to create the origin excess identity. So what this means is it's going toe, create a policy and apply touristic market which defined saying that only ah enable access our toe that particular bucket from cloudfront and every other request to that particular but bucket is are denied by default. So I'm going to go ahead and create a new access identity and I'm just going to leave the deformed and whatever it is. And we re me to grant this bucket to update the pocket policy, and this is going to go ahead and applied this policy to the bucket. And we can also specify some custom Haider's that you can pass through the origin in our case we're using yesterday and we in our application doesn't have that need. Toe Parson the custom header start. We want to send anything. Now we'll configure our default cash behavior settings. So basically what this tells the cash Ah, the cloudfront is how our continents recast, how long it needs to go ahead and keep it in the cash, etcetera. So here the viewer protocol policy, it's like we're going to use aesthetically industry TPS, and we're going to use get and head. Ah meant that's to access our obligation. And I'm just going to leave everything as default here because that's what we need. And like I said, Ah, in the previous lesson, you can always use signed Urals toe. Restrict your access to the audition server in our case, our such a public website. So we're just going to leave this asked No. And next is the distribution aesthetics. So basically distribution settings is you can choose from three different options. That s U S, Canada and Europe or US. Canada, Europe, in Asia and us use all edge locations. So basically what this tells the cloud friend, it's like where all the rich parts off the edge locations you want to use. Let's say a few. If you expect your traffic Toby only from North America or Canada or Europe, then you can choose that. Ah, price option. That means that the, uh, only the its cash from off it's caches are used only from those particular regions. And if any other request comes from any other region, then it's going to go to the nearest age location, which would be somewhere in Europe, Canada or us. And based on your traffic needs, you can always choose your specific, uh, price class. So I'm just gonna choose use all its locations because this was going to will give the best performance. You can always put a Web application firewall, which is hate of your staff in front off this. I'm not going to use anything here because we don't want any firewall in front off our platform. Ah, the ordering domain names is basically of a new creative card from distribution. Glad friend is going to give you a D unless of it is which is going to be a random string dark cloud from dot net and what disorganised domain names give A. So, basically, you can specify your own domain name. That's what we want to do. So the domain name that we want to use this, um e apt art cycle and Dothan dot com. So this is what we're going to do here. And the next thing that we have to do is we can just use the default cloud friend certificate here for extra DPS. And I'm just going to leave everything asked the default here. And we want this to be in an animal state, and we have enabled the I. P V six as well so that I be wished free sex trafficking also accessed this particular airplane. And then you can just click click the create distribution. So now ah, your distribution is created, but it's going to take Ah! A few minutes off to ah going toe the deployed state. This is our, um e app that we have created here. And it's going to take This is our cloud friend domain name, which it has provided us. So it's going to take a vial toe for this to going toe. Ah, deployed state. I'll pause the video until then and come back to this once it is ready and deployed. 19. Cloudfront Setup part2: Okay, So now, after about 20 minutes thestreet iss off our cloud from distribution changed into deployed state, and now we can go ahead and test our application so we can just select this part and go to this and you can see that this is access tonight. So let's go back and check what we missed And, uh, why this is happening. So before that, let's try to put the index dot html part and see if this lords the application. If I do index started Deimel it is loading the application. That means that the cloud friend is not ableto directly go to the default object inside the S three bucket. So we need to go back and fix that. So to do that, I need to go to the Cloud friend distribution. And I just need to select this guy and go to edit. And here you can just say the default to object. You can specify something like this so you can just say ah index dot html here because that's our landing. Um, landing you world. I mean landing beach. So I'm just going toe hit. Yes, at it again. It's going to take a few minutes to get deployed. And meanwhile, uh, it's getting deployed here. We can go back to Estrich console and see how the changes in the policy was applied so that the access to this S t bucket is Ah, the more directly. So I will go back to the bucket s t bucket. And here, if you go to your APS, I mean your buckets page and go to the permission step. You can see that your bucket is still a public state because we had put the, um, policy here saying that we want to allow everyone to get it. But cloudfront also put another statement here saying that only Cloud friend can access this particular bucket. And did I everyone else So what we're going to do? It's like instead off ah, allowing it. Everyone from here I'm just going to take take off this part, which is the first statement that we have added or leered. Listen, so I'm just going to take that off. So now you can go ahead and it's safe now if you go to your ah properties and tried to browse this you are originated in the previous lesson. Now you should see that this I think it's going to take a few seconds to go to access tonight. Yeah, so now you can see that you're you know me application. Ah, being less provided by your s three is not accessible anymore, but you can still access it using the cloud. France remained, uh, using this cloudfront distribution your So let's go back to the cloud front page and see if this is deployed or not for re freshness. Okay, this is still in deployed state, but I think we can just go ahead and try this one more time. Okay? Now we're able to browse this index dot html without specifying the slash index dot html. And so now that the cloudfront distribution configuration is complete Ah, the next step is to go ahead and configure our Route 53 to have are actually in messages are Ah, my, uh you know me app, dart cycle, nothing not come of our DNS conflagration. So you can also go ahead and test the Estrich TPS access, and you should be able to access it using extra DPS as well. So that's it for this lesson. And ah, I'll see in the next one. Thanks. Bye. Bye. 20. Cloudfront Invalidate cache after deployment: Hello and welcome back. So in this lesson, we're going to talk about invalidating cloudfront cash. So what is invalidating girlfriend Cash. Basically, what is happening right now is like when our your application is being accessed. Were cloudfront cloudfront days cashing those requests and all the subsequent requests are being Servia, cloudfront and all the request that the cloud friend gets for the first time are going back to the S three. So what happens? No. When your entire application is cached and you want to push in a new court, that is when you want to deploy something on toe s three with some changes. Ah, those changes are not visible to users because ah, they are getting served with the cached content from the cloud Trinh. So toe get the latest the latest changes that you have pushed us three out of the need to invalidate cloudfront cash. That is basically you have to clear out the cash there are. Let me show you how to do that. So for true that we need to log into our AWS console and browse our outfront distribution selected and go to distribution settings. So inside this you can go to the tab in validations and click on that. Now here you need to click on, create new invalidation and you have different examples. So basically you can decide upon what, but you want toe go and clear it like let's say you just want toe clear out the assets for Let's say you're your application has slash assets folder and you have some new assets that you have pushed and you just want that particular part to be clear. Then you can just say slash assets slash star and then all the contents within that thing are cleared. So you, if you just want to blow it everything you could just hit slash star and then it would It's just going to blow out everything. So we're just going to do with clear of entire cash. So I'm just going to do slash star and I'm going to hit invalidate. So now what's happening is it's clearing out the entire cash. And once this is done, your new application are The new changes that you have pushed us tree are now visible toe the ah new request that are coming to the cloudfront. So I think that's it about the in validations and I'll see you in the next one. Thanks 21. Configure DNS with Route53 & Delegation from Goddady: hello and welcome back. So in the previous lesson, we have configured our cloudfront distribution and we have got the cloud from distribution and point, which is a random donated string dot quarter on Darknet GMs so. But we don't want to use That has are the innocent point. But rather, we want to use our own custom domain name, which is my, uh, the UDA me app, start cycle, nothing dot com and then point back to our god from distribution. So our to do that, basically, you can do it in two ways for first s. You can go to your her out 50 teen and configuring if you have already purchased your domain inside the Route 53. If not, if you have purchased in third party Deena's providers like Go Daddy or somewhere else, then I'll show you how to do that as well. So let's get started. So first thing, what we want to do is like log into our AWS console and go to the 53 section, a concert for our 53 here and basically what we want to do, it's like we want to create a holstered zone. Ah hosted zone is anything like a DNS name. So basically, how the DNS works as you you purchase a DNS. Let's say example dot com then your primary DNS. I mean, the the main DNS name is the name off the ah in point, which is, let's say, example dot com example. Is your host its own? So any, uh, any domain that you any sub domains that you create like w w dot or some example dot abdullah at example dot com then app dart example dot com is your sub domain for your I mean domain. So first thing we want to do, it's like we want to go and create our hosted zone, and then we'll add our sub domain, Which is which is are you Demi Apt Art? A cycle and nothing dot com. So let's go to the hosted zone, and I have my hosted zone already created what you can go ahead and create all it takes us like you have to enter the hosted zone name with the domain images. Whatever your domain name is, in my case, it this cycle, nothing dot com and then you need to choose it is whether it is publicly host our private your street. So it is a public hosted zone. So I'm just gonna keep that public hosted zone and then hit create. So once you hit, create, then this record will be created. And inside this you should be able to see all your DNS records, which is Ah, the MSC cards are your mail server. Mail exchange records are how any other record started creating here. So what we're interested in here is like, we need thes name service record so that we can just go ahead and point this in the Gordie . And then what it does is ah. Then you no longer manage your domain in the go daddy, but instead all your DNS management you can do right here from AWS start 53. Okay, so let me go back toe the, uh, GoDaddy page and configure it to forward all the settings to about 53. So to do that, you need to log into your Graddy account and inside this you can go to your doing here and go to DNS. And here. What you need to do is basically you need to wipe off all the records around here and then you need to change it to custom name servers and then add the four name servers which AWS Star 53 gives you. But it's these four names are worse. So I've already added that to my DNS because I'm already using this particular Deena's in route 53 so you can go ahead and add your custom domain here. So once you add that here, what we need to go or do, it's like go back to rot 53 we need to create a ah, a new sub domain, which is it should be are basically or one of the Venus named that we have chosen, which is you know, me after cycle and not not come. So we just need toe copy this particular in point and then we need to go back toe the our after after the section Here you go and it creates record. And here you need toe specify the sub domains. So that IHS basically are you Demi app, uh, is our symptom in here and you just need to choose a record as the type and then you need to hit alias. So here what you need to do is like you need to specify the cloudfront distribution that you have created. So you can. It will just populated here. If it doesn't populate it for you, you can just go back toe the cloud front section by going to a devious home page, cloudfront. And then you can just copy the distribution domain name from here and then just based it here and then what it wants you that you need toe. Make sure that your distribution also has alternately in except set up, which is with this particular sub domain or the domain that you're creating here. So all you just need to do is like, hit, create. And your DNS records should be now set with this you Rami Abdo art cycle and that they're not come. So now if I Let's just verify that if this particular DNS name is set inside the cloudfront , that's Argentina's. So I go back to CLOUDFRONT decision here, and you should be seeing the ordinary domain thing you did me after our cycle. Nothing dot com So now what we need to do is like we need to test if this particular BNS eyes ready to use it usually takes a few minutes for the demons to propagate across the different Dennis. Look up, servers. So let's try this and see if that straight now. Okay, so now Ardian Icis propagated. And now we have a our custom DNS. Which issued a me abduct cycle and nothing dot com going to our cloudfront distribution and then called from distribution, routing the traffic back toe the origin, which is our s three bucket and are angler Fire application is being served from there. Now all my consecutive requests are are going to the same page are going to the cloudfront cash entered off a ah instead of hitting the origin. Okay, so now this concludes our, um configuring ah cloudfront and are 53 section and I'll see you in the next one. Thanks. 22. Course Conclusion: hello and welcome back. So now that we have reached to the conclusion part off four course, I really hope that you have learned something new from this course, and you go ahead and implement this in your real life scenarios. So let's just do a quickly gap on what we have learned in this course. So basically, we started off by looking at our architectural review. And then the I went to the angular section wherein we have installed the Angler Seelye. And then we created our sample application. We edited using Visual Studio Accord. And then we have used anglers Eli toe, do a production, build off oracular application. And then, oh, we went ahead and learned about history. And then we have created our s three bucket, configured it to host our static website, and we have uploaded our application there. And then we tested using the Deena's provided by the S tree itself. Then we went ahead and created the cloudfront distribution over there, and we have learned about all the settings that it offers of you have Configured s Trias our origin and then oh, we deployed it. And then we tested it using the cloudfront distribution, Ural, which it gives us once we got the cloud for in distribution. Then we went ahead toe. It'll be a slow 53. We have learned about hosted zones how you can configure your of non dropped 53 DNS, which is something purchased outside Did all 53 like go daddy or any other hosting solutions. And how to point from go daddy toe route 53 using the name server records that AWS sort 53 gives us. And then we have created our own sub domain, which is you tell me ABT art cycle of nothing dot com and then we have pointed it. Do the cloudfront the situation. You are so at the end, off the scores what we had was like a working angler fi application hosted in S three and browsed via the cloud front and using the DNs that we had thought off initially. So I really hope that you enjoyed this course. And if you have any questions or concerns, you can always contact me at military Tiger. Nothing not come. And I'll be happy to reply back to you and answer all your questions. So thank you. So much for your patients, and I really appreciate Ah, the support that you guys are giving me. Thanks, my, by