S3 Static Website from the CLI
Now we will take a look at how to setup an S3 bucket to host a static website, using the aws cli. Skip to the bottom if you just want the script.
The steps for hosting a static website using s3 are pretty much the following:
- Create a new bucket with a unique name
- Enable public access to the bucket
- Update the bucket policy for public read access:
- Enable the s3 bucket to host an
index
anderror
html page - Upload your website
We already know how to do this from the web console, but that involves a lot of clicking on buttons and stuff, so here's how to do it using the aws cli.
CLI Commands
step 1:
aws s3 mb
will create a new bucket. Make sure you change a-bucket-name
to something better.
step 2:
aws s3api put-public-access-block
allows you to configure the public access to the bucket. We're setting all of the blocks to false to enable public access.
Show timestamps
00:00
Before we get to the CloudFront section, I want to quickly show you how you can set up S3
00:04
using the AWS CLI. It's a pretty simple example, and I want you to get familiar with the
00:09
idea of using the CLI to set up and tear down infrastructure. There are a few steps we have to
00:14
do to get an S3 bucket ready to host a static website.
00:19
We did all that through the AWS Console before, and here I have some Bash commands. I also have
00:23
examples for Command Prompt and PowerShell if you're using Windows. But this first one here,
00:28
says 'aws s3 mb'. So, if I have the AWS CLI installed and type in 's3' and then 'help',
00:34
there are a bunch of commands here. You can pretty much do anything you want with S3 that
00:39
you could do in the web console. You can copy objects, move objects, remove objects, remove buckets,
00:44
create buckets—there's a whole bunch of stuff. You can look through the documentation if
00:48
you want to, but what we're going to do right now is actually copy and paste this. We're
00:53
going to use the 'mb' command, which stands for 'make bucket', to create a new bucket. So I'm just going to call
00:58
this—uh, I don't know—my-cli-bucket. We can put that in us-west-2, and this will be in my
01:03
playground account. So, that's Cloud Course Playground. And, hopefully—oh, that failed because
01:10
this bucket name is already taken. These have to be globally unique. Someone else already
01:14
took this bucket name. Uh, so I'll just choose a new one. So, now I have this S3 bucket created in AWS.
01:19
Now, I would just go through all the steps we did before, but use the
01:23
CLI only, instead of going into the web dashboard.
01:26
The next step would be to enable public access to that bucket. Again, I'm just going to copy and
01:31
paste this in. This one is actually using the 'aws s3api' command, which can be a bit
01:37
easier for some tasks. We're going to adjust the public access. Here, I need to specify the bucket name.
01:43
What did I call that? I'm going to copy and paste—'my-cli-bucket-unique'. I can paste that in here.
01:48
We're going to remove that public access block on the bucket so it can be publicly accessed.
01:54
I'm going to hit enter, but my profile name is wrong.
01:57
Let's go down here. This is Cloud Course Playground again. So that should remove the block on
02:03
public access. Now here, we need to update that policy—that JSON policy. And for this one,
02:10
I might actually just open this up in VS Code so that I can edit it before I try to put that
02:16
in. So let's see, we have 'put-bucket-policy'.
02:20
My bucket name is going to be my bucket name. I'll edit that in both places. So, that's
02:27
'my-cli-bucket-unique', here and here. This is the exact same JSON policy we had in the web console.
02:33
We're going to allow GET from anywhere—anything. Okay, that's good. Then I'll just change this
02:39
to be Cloud Course Playground for my profile, and then I'll copy that and put it
02:45
into my Bash terminal. There we go, that looked good. Now we'll try to enable this as a
02:51
website, just like clicking that 'Enable as website' button in the web console. We're
02:57
going to name the—my bucket name—'my-cli-bucket-unique'. That's good. And then the profile name again,
03:03
Cloud Course—CLI… no, Course Playground. And this is just as many steps as in the web
03:10
console, but we’re doing it through Bash instead of clicking buttons. So now we're going to try
03:16
uploading the files. And this 'aws s3 sync' command is
03:20
going to synchronize the local files I have on my machine with S3.
03:24
So if none of my files have changed, if I’ve already uploaded my website, nothing will happen. But
03:28
if I make a small change to one of the website files and try to sync, it will only
03:33
sync the file with the change. This is a handy little command to use. Again, here I need to
03:37
put in my bucket name, my profile, and then the directory path. So this is
03:44
where all the assets for my website are. I just downloaded that folder, that 'dist' folder, to my
03:49
downloads directory. So I'll go to 'downloads/dist'. I want to upload all the files from that
03:55
dist directory to S3—and it's not 'Play', it's 'Playground'.
04:00
Ok, so that looked like it uploaded all of those files. Now this should be working as a static
04:06
website, and now I should be able to visit that website using the bucketname.s3.
04:12
us-west-2—that’s the region I put it in—.amazonaws.com. That’s actually
04:19
the website. I’ve got to make sure it’s not HTTPS. Okay, there we go. I should be able to continue to
04:25
the site, and there it is. There is the static QR code website deployed through the AWS CLI.
04:32
Obviously, I’m using the generic S3 domain name here—I haven't done anything with Route
04:36
53. But that does show that I can do that entire thing, and I could actually go to
04:41
my account here. So I’ll go into my Playground account in the web console now. If I go to
04:45
S3, we’ll be able to see the bucket that we just set up. So there's 'my-cli-bucket-unique',
04:51
there are the objects. If I check the properties and permissions, that's all been
04:56
configured correctly from the CLI instead of the web browser. All of those commands weren’t
05:02
much better to run individually—I guess it could be nice to
05:05
use Bash, but really it’s not any better than using the web console.
05:09
But I could take all of those commands together and write a Bash script. That’s what I have at
05:13
the bottom right here—a full Bash script, or command, or PowerShell script. So, I can create this
05:19
script with a couple of variables. I can tweak these variables, and with one command I could just
05:24
run this Bash script to do all of those things for me. So I can use one command to set up a
05:29
static website with S3 every single time I need to set up a new static site.
05:33
Then, if I want to update the contents, I can just run a different script, just this last
05:38
part at the bottom. I can also run a command to tear down the bucket or delete all the objects in there.
05:44
This can be really handy. For an S3 bucket it’s not so obvious, but for larger
05:49
infrastructure, just being able to run a single command—a single script—to set up a whole
05:54
bunch of things and tear them down can be really handy. And we’ll get into more
05:58
advanced tools in the Infrastructure as Code section that let us do this in a nicer, easier
06:03
way, but for now it’s just good to know that you can use the AWS CLI to do anything you would do in the web console.