Check out a free preview of the full AWS For Front-End Engineers, v2 course

The "S3 Policies" Lesson is part of the full, AWS For Front-End Engineers, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates how to add policies to an S3 bucket to allow public read access to the website files. The AWS CLI tool is installed and will be used to deploy assets to the bucket instead of manually uploading them through the AWS interface.


Transcript from the "S3 Policies" Lesson

>> So we saw policies a little bit before and we saw for our user, remember administrator had access to everything right. So users can have policies and what they have access and they're allowed to do. Also resources can have policies as well. So if we think about this, well, what would we want kind of a public bucket hosting a website to be able to do?

Well, people should be able to read to it. Should they be able to put nude and different JavaScript files in said bucket? No, no, they should not be able to do that. So we wanna set up a policy where you can read from the bucket. You cannot write from the bucket, you can not delete my precious precious Java scripts that I work so hard on.

You can only read but anyone, anyone on the internet can read these as well should be what we want in this case. Let's go ahead and see what a policy looks like a little bit. We'll go into a bucket and there are a bunch of options here. Now I can upload stuff directly to my bucket.

I can create folders and get different URLs from it so on and so forth. We'll go in to permissions first. We've got all from before. We also have the bucket policy. This is we're gonna say like you can read from the bucket. You can't do anything else. So go here we'll edit.

There's a bunch of different ways to do this. You can just type it in as JSON. There is also, Let's see where it is on the screen. They have a tool I think it's in here, policy generator. We can like fill out a bunch of stuff as well.

And it will kind of give you some JSON to paste in there. This is kind of like what we saw with that administrator though. If you remember, the version is not necessarily like when did you make this policy? So you're like, I'm gonna update that today's date. Now this is like, what have AWS schemas that this adheres to.

And you can see that this is pretty stable content that we're looking at right now. Because this is their kind of like spec as of, October 17th 2012. So that's the version then a set of statements. The SSID is just some kind of identifier. It's almost like the tag, right you can think of is some way to kind of name it.

The principal is who effect is either allow or deny. The action is what should they be able to do? And the resources, what should they be able to do it, too, right? So for instance, we might say you can read files from the super awesome click bucket. Who can do it?

I mean anyone, right? So anyone should be able to read files from that particular bucket. So we can go and let's try the policy generator first. Here we are type of policy. I've got a few options for me. A S3 bucket policy seems to be the best right.

Who should be able to do it star for basically anyone and then select actions. As you can see this is a very long drop down list. As we kind of mentioned before, the files in an s3 bucket are called objects. So we basically want allow them too. We want to be able to Let them get an object out of the bucket.

And I haven't defined it I was gonna say command F is your friend here. But we've got to get object who can do it anyone. And then we do need to tell them what bucket. And all Amazon resources have an Amazon resource number for what service. In this case, we want to say the bucket name.

And you can say, hey, this user or anyone can only get one particular file, or we can say all of the files in a bucket. So in our case, we'll grab this piece right here. I'll paste it in, and I'm gonna put in the name of my bucket.

There is also in the guide for this, in the repo, there is literally a version of this policy that you can also just copy and paste as well. But this is useful if you don't know exactly what you want. So this will go ahead and it will make a policy for us.

I can copy it bring it back over. There's also a way to do it in here where you can kinda see the faculty just a different way of looking at it. It doesn't generate you the whole policy all the time. Unexpected error occurred. It actually does not apply to any resources in the statement after do slash star.

Let's make that a little. I'll show you a completed policy in a second. Cool, so let's look at like just as a kind of simpler version of that real quick. This is effectively what we're going for. Just kind of the minimum in there. You can have the statement ID, anything along those lines, but allow everyone for an s3 to get an object for whatever the name of your bucket is.

That's the bespoke part just for you, right? That's where you and I will travel down different roads together. But everything in that bucket. So we have the permission set up on our bucket. We have secured our bucket so you can read files from it. We should probably deal with the next requisite problem, which is there's nothing in this bucket.

[LAUGH] All right so, we probably want to do something around that. So what we're starting out with, we will deploy that little react application at some point. That's got a lot of files, it makes like a main dot js and that's got a stamp. And then, there's a whole bunch of other files as a favicon of all things.

I don't have time for that just yet. We are going to visit a special place in my heart, which is we're going to upload an HTML file to the internet by hand to put it onto the internet, right? Which is how I put things on the internet as a youth, and arguably, up until 2014 because I worked at a company that still wanted to do that at the time.

So with that, we will upload something. Now in the notes, there is an HTML file that's empty that you can use. You can whip one up in your text editor real quick. You can grab literally, anything at this point, I happen to have, like an index that HTML that's.

It's in the notes, I have that index, that HTML on my desktop, but any file will do. So go ahead, we'll hit add files. And let me grab that index.html. And I will upload it, great. You can set special stuff in here but like everything's pretty much ready to go.

And here's index dot HTML file succeeded I can close this and now my bucket has a file in it I go ahead not quite sure, what happened. So I click that, so let's find out together. And there it is on the Internet with this lovely domain. End name please go visit my site, please like and subscribe.

We've gotten a thing onto the internet, there's a lot of work to be done here. A few more kind of pieces involved as well which is, it's not even like at this point you have to have the index.html. We probably don't get a super helpful error message. If we spell that out wrong.

Nope, access denied, so on and so forth. So yes, we have put a file on the internet using AWS, we could theoretically declare victory at this point. But there's a whole bunch of problems with this that I will multiple times enumerate on. But like, we can already see a few places where we can do better here, just in chart in terms of the URL.

The process in which we get something up here, so on and so forth. Let's go back and deal with one of those. For starters, in this case, we will go deal with some of the other fun things that we can do. So we scroll down we see those intelligent tearing configurations we don't need those access logs cloud trail data events.

Event notifications what we want to do is find static website hosting that seems like something useful for us. We would like to host a static website and we mean static website in the like, quote unquote jam sack thing which is like most of the, web applications. I've deployed our static assets are calling API.

So they are they themselves are not the files are static, the assets are static. And then they call bunch API's and then JavaScript takes over in this case. So go ahead, we'll hit at it. And we'll go ahead and we will enable that. So hosts a static website that seems good.

This is interesting index document an error document. So this is if they go directly to the domain, like what file should we show them right? And we're going to kind of have this work the way that the web works, which is if you just go to a directory, you should get the index.html.

And optionally, instead of that really cute access denied XML that you saw, we could also send them another HTML page that is everything. Sorry you've hit the wrong page. And you show them a cute dog or a meme or something. Thing what have you in there as well.

There is an erudite Shanelle in the repo in the public directory that you can use, just leave that as it is for now, we can have all of that in place. Hit save changes. Awesome, so that is in place we can kind of go down, verify that's enabled.

And you can see you've got a, I guess better domain, right? It's not a subdirectory of AWS, right. It is this wonderful domain. In right here and it is not secured a super awesome click dot s3 website dot dash US East one dot Amazon AWS COMM but it is a full domain on the internet, right and exists for these purposes.

Our next goal is it is great and wonderful to just upload files by going into a UI, clicking upload and finding them. There's a few ways we can make this better. And we already alluded to this. One is, if I need to do multiple files, I think you probably select multiple ones in your given operating system.

But there's probably a lot of tricks around doing this. It'd be great if we had a way to kind of from a command line so we can automate it, be able to go ahead and take an entire directory. And first from our local machines, put it up into S3 and eventually we'll actually have GitHub do this for us, right?

So one of the things that we're gonna wanna grab here is the good old AWS CLI and you can find the instructions I'll share them in a moment here. Open another tab, you can go download it for your operating system of choice I am on Mac OS. So that's the one I have.

But if you need the Windows installer and the Linux installer, so on and so forth. So you're going to go ahead and you're going to install this and some of these because again, I don't really feel like sharing my private key. We're going to kind of take as an exercise, which is once you have it installed for your given operating system.

What you're going to do is you're going to type AWS configure. Now hopefully you either when we said show me that secret key at the very beginning of the story, you copied it somewhere or you downloaded that CSV, either one of those are fine. Again, I will remind you that just for us all be on the same page.

We're going to go with US East one as our region of choice. And default output format I chose JSON. It's kind of up to you. If you find yourself with multiple accounts. There is this .aws/credentials that it will set up. That might be slightly different on Windows, as to where exactly it is where you can have one for your main account like this, we'll set up our default account for us if you have other accounts.

If you already have the AWS command line tools installed, you might choose to just set up like a side, an additional account for this workshop. So that is one option if you're like, I have it, but it's like my company thing and I don't really know what to do.

This is a second option for you as well. But if this is your first time, you can ignore this. If you just do AWS configure, pop in your AWS access key pop in that secret key and once we have all that in place then we will go ahead and look at how to upload our cool application.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now