Check out a free preview of the full AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course:
The "Setting Up an S3 Bucket" Lesson is part of the full, AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course featured in this preview video. Here's what you'd learn in this lesson:

Steve configures an S3 bucket for static web hosting. Along the way, he explores some of the additional features offered by S3.

Get Unlimited Access Now

Transcript from the "Setting Up an S3 Bucket" Lesson

[00:00:00]
>> Steve Kinney: In here, I will now go to S3.
>> Steve Kinney: And if you have no buckets, this is kind of empty state. If you are using an account that you've used in the past, you might see previous buckets that you've had here. We'll go ahead and hit Create Bucket, this has to be unique.

[00:00:19] So, if everyone does test or Jeff Bezos, or something like that, that's not going to work. So I'm gonna use my domain name, superimportantwebsite.com. Right, and if you're hosting directly out of an S3 bucket, this does need to match the domain name. That is a temporary restriction, when we move to CloudFront, that won't be in place, cool.

[00:00:47]
>> Steve Kinney: All right, we're gonna keep all the defaults in this case, cuz we actually tweak a few of them later. One thing we didn't really talk about is tags. Tags are just basically keys and values that you can put on a thing. So at SendGrid, we use to figure out what team owns this thing, so who do I yell at?

[00:01:02] Right, so on and so forth, what product is it used for? So we can figure out, for a given product, it's costing us this much. It's just basically ways for you to label stuff so you can get back to it later. We are not gonna keep all versions, versioning means, if you take a file, then you replace it, it will keep the old version around.

[00:01:21] Right, webpack's gonna put a little hash on every single build that we have, so we don't necessarily need that. Cool, we don't need it encrypted, so on and so forth, the next one is permissions. So for me, I am able to go ahead and do everything to the bucket.

[00:01:40] We're not gonna touch these just yet, we're gonna set this up by hand. So we'll go with all the defaults there as well, and we'll review it, and we will create the bucket. Cool, so now we have our bucket.
>> Steve Kinney: We can see some basic information about it and click on the link.

[00:01:58] And we are inside the bucket, which it looks suspiciously similar to the other empty state, but it's slightly different. Here we've got the overview, the properties of the bucket. You'll see there's an extra one that we didn't see in that initial model before. This is the place for us to play a little bit.

[00:02:17] Permissions, basically, who's allowed to do what, and management, right, we're not gonna touch too much of this right now. We care mostly about properties and permissions. We also might wanna put some kind of file in this bucket, so we'll go ahead and just create a quick index.html.
>> Steve Kinney: Cool, and I'll say, hello from S3, maybe not so heavy handed on the Shift key there

[00:02:58]
>> Steve Kinney: Cool, all right, so we'll save that as index.html.
>> Steve Kinney: And then I can go ahead and go to Add Files.
>> Steve Kinney: We can set permissions on the file, you notice that I'm not really doing a lot with this. When we get to CloudFront, a lot of the headers and stuff along those lines will get set there as well.

[00:03:36] So I'm not gonna necessarily gonna concern myself with it. Cool, so we can go to set permissions and set properties. You can, however, set whatever headers you want it to. CloudFront is going to handle this for us, so we're not worrying about it. But when it is served, you can set any of these that you need.

[00:03:54] I don't really wanna do that on a per file basis, that seems silly. Again, you can tag it, so on and so forth, go ahead, and we'll upload index.html. And there it is, it's in my bucket, this means that it is up and available and ready to go.

[00:04:11] I'm not actually serving this anywhere yet, so I need to go ahead and do two things. I need to go ahead and I need to turn on that static website hosting that we saw before, and then I also need to configure the permissions. So if I go back to properties, I go static website hosting, and there are three options.

[00:04:31] We will use this one in a little bit, I'm gonna point it out because that will be a little bit of a mission for you later. But we can use this bucket to host a website, that seems good. And what should the index document be if they just go to slash, well, we'll say index.html.

[00:04:50] And you can also set a 404 page here as well, or really any kind of error, like a something went wrong page. We don't have one of those pages made right now. It will end up being somewhat problematic and it'll be the fight that we fight all day today.

[00:05:06] As we try to figure out how to use modern client side routing, and also not break the way the web works, be a lot of fun. So we'll save that, cool, and now we're hosting the bucket. The other thing that we need to do is go to permissions and set our bucket policy.

[00:05:24] Now there is a fun policy generator here that you can use. But you saw that the JSON that we had wasn't all that large. So I could, for instance, say S3 Bucket Policy, I can allow,
>> Steve Kinney: Everyone,
>> Steve Kinney: And we'd go find Get Object.
>> Steve Kinney: Give you a sense of all the options in there, and then,

[00:05:53]
>> Steve Kinney: The format is down here. ARN is an Amazon recourse number, so it's just what thing on Amazon. So you've probably seen it around, I kinda glossed over it when we were in the identity access and management page. We can see that the MFA had some kind of resourse number, all the things, what do we need?

[00:06:13] A lot of times, a lambda might have a series of numbers. Luckily, because bucket names are unique, the ARN, other than having the ARN format, is the name of our bucket. So that's great, so you can just kind of copy this, paste it in. We'll change key name to that star like we saw in the previous one.

[00:06:32] And we'll change bucket name to superimportantwebsite.com. Obviously, for you, it's whatever you named your bucket, for me, it is superimportantwebsite.com.
>> Steve Kinney: And then we go ahead and generate the policy, and other than some IDs, you can see it is very similar to what I had on the screen earlier.

[00:06:56]
>> Steve Kinney: Or if you go into the setup instructions, you can just copy and paste that one that I made earlier. Cool, so we'll go in here, and we'll paste this in,
>> Steve Kinney: And we'll hit Save.
>> Steve Kinney: So now you're saying, hey, this bucket has public access. We know that in this case, but this is okay for this bucket.

[00:07:17] Generally speaking, though, you need to be careful with what you put in this bucket. There are multiple companies, many of them financial companies, that put sensitive data in public buckets. And then there are other people who go basically crawling the web for publicly exposed buckets, and taking that data.

[00:07:35] Right, for us, right now, with our use case [LAUGH] of trying to setup a publicly served website, this is okay. But the moment you're like, yeah, and I put users' images in this bucket too, not great. Right, so you definitely want to be careful when you use a public bucket.

[00:07:51] If you wanted to store some other assets that were being used by your application under the hood, you would make a bucket where only a given IAM user had access to that bucket. This is, the world can read from this bucket, which is cool, if you put stuff that you're comfortable with the world reading, and not cool if you put sensitive data in there.

[00:08:11] All right, so go back to properties, I go to static web hosting, and you can see this awesome URL where my web page is in fact hosted on the Internet. All right, so that's, yeah, behold the glory of my amazing website that is on the Internet. There are some problems with this.

[00:08:35]
>> Steve Kinney: That URL isn't great, it's mysuperimportantwebsite.com.s3, I don't remember at all, I don't remember it all because it was terrible. Also, if anyone got a feel of the late 90s web by having to sit there and manually upload a file like it's an FTP server, yeah, that's a thing.

[00:08:57] That's probably the furthest thing from a CICD process that I can think of. Right, I am literally going to drag files in and upload them to the Internet. Fun fact, I was doing that as late as 2014, don't tell anyone. So we need to fix that, I was in US East 1, so right now, we have that problem I told you about before, where everything was in Chicago.

[00:09:24] We have a version of that problem where this bucket is hosted out of US East 1, which is Virginia. Which means the farther you get from Virginia, the longer it takes this page to load, because of things like physics. Right, electrons can only go through a copper wire so fast.

[00:09:39] Right, there are things like the speed of light that will eventually cause a millisecond delay in your page loading in certain parts of the world. And the routing, right now, this is a simple web page. When we go and deploy a React application, you can go to any of those routes.

[00:09:55] But if you try to navigate directly to it, that's not gonna be in the bucket. Right, so we're gonna have to fix that as well, and there are various trade-offs that we'll make along the way until we get there. So we're gonna fix all of these problems, right, it's not just like, hey, here's the state of the world.

[00:10:12] We're gonna fix every single one of those problems together, [LAUGH] as a team.