Create an AWS S3 Bucket for Hosting a Static React App
Creating an S3 bucket is a straightforward process. You just have to make sure that you are using a unique name. But, there are a couple of things you need to do in order to host a static site on an S3 bucket.
First, under the properties tab, you need to enable static website hosting. Make sure to provide the index document to your app.
Second, you need to add a bucket policy. You can find examples in the policy examples docs. In our case, we will use the example under "Granting read-only permission to an anonymous user"
Bucket policy that was copy pasted:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicRead",
"Effect": "Allow",
"Principal": "*",
"Action":["s3:GetObject", "s3:GetObjectVersion"],
"Resource:["arn:aws:s3:::DOC-EXAMPLE-BUCKET/*"]
}
]
}
Sam Julien: [0:00] Let's create an S3 bucket that we can use to host a static React site. If you don't have S3 in your recently visited services here, you can go up to the top, click on Services. S3 is down, a little bit further under Storage, right at the top of Storage. I like to favorite services like this so that they show up over in this List of Favorites.
[0:24] Let's go ahead and click S3. S3 is a global service, but you actually create buckets in regions. Don't let that throw you off. I'm going to scroll down here and click Create Bucket, close this feedback thing up here. We need to give our bucket a name.
[0:43] One thing that's tricky about S3 buckets is that they need to have a globally unique name. There's no two S3 buckets that have exactly the same name. I like to be very specific in my buckets when I'm doing these demos because it's like creating a username on Reddit.
[1:00] Somebody probably has already created it. Another caveat here with naming S3 buckets is that if you're going to connect your S3 bucket to a custom domain, you have to name the bucket the exact same name as the domain. We're not going to do that in this demo.
[1:17] I'm just going to create a bucket that says, Egghead S3 Test Banana. That way, I'm pretty sure nobody's ever created that S3 bucket. As I said, even though S3 is global service, you actually do create a bucket in a region. I'm going to leave mine in us-east-2, which is Ohio.
[1:37] Then to scroll down a little bit, we've got these public access settings for this bucket. For this bucket, what we're going to do is we're actually going to upload a Create React application and use this bucket as a host for that site. It's just a simple static site.
[1:53] We're not going to do a full web app on this bucket. In order to do that, we need to actually allow public access. By default, public access is totally blocked. We're going to uncheck that.
[2:05] It makes sense that public access would be blocked by default because usually you use S3 for things like images or other things that you don't want everybody on the Internet to be able to get to unless you allow it. I'm going to scroll down here.
[2:18] There's a warning here about turning off public access. That's OK for our uses. Scroll down a little bit further. We don't need to worry about bucket versioning. We don't really need to worry about tags or encryption. I'm going to go ahead and click Create Bucket.
[2:33] If I scroll down a little bit, we can see our Egghead S3 Test Banana. If we click on it, we can see that it's there. In order to use this as a little server for our React application, we need to do a couple of things.
[2:48] The first thing we need to do is go under properties. We need to scroll all the way down to the bottom and enable this static website hosting. I'm going to go ahead and click Edit here. Click Enable. We are going to host a static website here.
[3:05] In order to do this, we need to specify an index and an error document. In our case, since we're using Create React app, we are just going to use index.html. We're actually not really going to have an error document. We're just going to leave this as is since it's optional.
[3:20] Then we'll just scroll down here and click Save Changes. Then there's one last thing we need to do. We need to go over to Permissions and scroll down. We actually need to update the bucket policy.
[3:32] What we did before was allow public access, but we actually need to provide access to the stuff inside of the bucket. I'm going to make this easy on myself and just copy-paste this in. This is straight from the documentation. I'm going to click on Edit for the bucket policy.
[3:50] I'm going to do myself a favor and just paste in a policy from the docs. If I were to actually click on policy examples here, I could actually scroll down here and choose granting read-only permission to an anonymous user. This is essentially what we want.
[4:06] We basically want to allow anybody to be able to get whatever is inside of our bucket. Of course, we're only doing this because we're doing a basic web server. I'll come back over here. Essentially, what this is saying is to allow everything that's inside of this bucket.
[4:22] We just need to replace our identifier here instead of doc example bucket. We need to copy in our Egghead Test Banana and paste that in. One thing that you got to watch out for is this forward slash in this star that basically says apply this to everything inside of the bucket.
[4:40] With that, we can just click Save Changes and now our bucket is set up. You can see this big red badge that says publicly accessible and we're good to go.