JAM stack: Deploying a S3 website form commandline.

Hosting the client facing page is an important part of creating a performant JAM stack app, To do this I will be using Amazon's AWS S3 offering and the AWS CLI.

From here I will assume that you have the AWS CLI installed and have it configured to use an account that is capable of creating and configuring S3 buckets.
I'm using Powershell emulated through cmndr on Windows as my command line.

Create the bucket

The first thing we need is to create the bucket. If every thing is fine it will look like this. 
(replace kleeut-jamblog with your bucket name, they need to be unique)
 aws s3api create-bucket --acl public-read --bucket kleeut-jamblog --create-bucket-configuration LocationConstraint=ap-southeast-2  
 {  
   "Location": "http://kleeut-jamblog.s3.amazonaws.com/"  
 }

Gotchas:

The error messages are pretty good, these are the ones I've commonly run into.

If you're already run the command or for you own the bucket you'll see:
 An error occurred (BucketAlreadyOwnedByYou) when calling the CreateBucket operation: Your previous request to create the named bucket succeeded and you already own it.

If someone else owns the bucket: 
 An error occurred (BucketAlreadyExists) when calling the CreateBucket operation: The requested bucket name is not available. The bucket namespace is shared by all users of the system. Please select a different name and try again.

Configure the bucket

Turn on static hosting 

A public bucket is not served as a static website  
 aws s3 website s3://kleeut-jamblog --index-document index.html --error-document error.html
The index document is the root page that is served when a user accesses the root page.
The error document is displayed whenever S3 would return a 4xx status code.

 Set bucket policy

Just configuring the bucket is not enough. The bucket also needs to be configured to make all files that are added to the bucket publicly readable.

Create a file named bucketPolicy.json with this content.
 {  
   "Version":"2012-10-17",  
   "Statement":[{  
    "Sid":"PublicReadGetObject",  
      "Effect":"Allow",  
     "Principal": "*",  
     "Action":["s3:GetObject"],  
     "Resource":["arn:aws:s3:::kleeut-jamblog/*"  
     ]  
    }  
   ]  
  }
Apply this to the bucket by running:
 aws s3api put-bucket-policy --bucket kleeut-jamblog --policy file://bucketpolicy.json

Add files

Single files

Start by adding some basic files in to the bucket to confirm everything is working.
 aws s3 cp .\index.html s3://kleeut-jamblog/index.html  
 aws s3 cp .\error.html s3://kleeut-jamblog/error.html
Navigate to http://{your bucket name}.s3-website-ap-southeast-2.amazonaws.com/

e.g: http://kleeut-jamblog.s3-website-ap-southeast-2.amazonaws.com/

and you should see your index.html file rendered for everyone to see.


Enter a page that doesnt exist and you'll see your error page.

Directory

Uploading single files is a bit of a pain and wont scale well to a real life SPA.
In order to copy multiple files and folder structures the copy command has the --recursive flag.  
 aws s3 cp .\build s3://kleeut-jamblog --recursive
However the sync command is a better choice than using the copy command. As it provides an option to remove files from the bucket that are not present in the local directory. 
 aws s3 sync .\build\ s3://kleeut-jamblog --delete

Conclusion

This has gone over how to set up a simple static site in S3. Using only the command line.
There are a few things missing from being able to make this a production website, notably a custom domain name and a TLS certificate to allow the site to be served over https. To make it a production JAM stack app we'll need some API's to go along with it.

Comments

Post a Comment

Popular posts from this blog

Solving `Empty reply from server` in DotNet Core

tldr; If you’re getting  curl: (52) Empty reply from server  check that you’ve configured Kestrel correctly. Long version I’ve started playing with Dotnet Core and Docker and have had a few issues getting started. I’ve had a little bit of experience with Docker, though only a little. I’ve worked with DotNet previously but never with Core. Environment The setup I’m using is a Windows laptop running Vagrant. Via Vagrant I’m running an Ubuntu Virtual Machine with the Docker run time installed. Feels a litle like inception. Key Problem The key problem that I’ve had getting started was having my Docker container not responding correctly to my curl commands. I get this: curl: (56) Recv failure: Connection reset by peer curl: (52) Empty reply from server Given that I’m not all that familliar with Docker or Dotnet Core I decided to remove one of the variables and set up a simple Express app in a different docker container. This validated that the commmand I was using to run
Read more

Testing functions that use local storage with Jest

Testing functions that use the browsers local storage API seems easy when you know how. Here's a quick run down on how to mock it out with Jest if, like me, you're not familiar with how to test it. In the end it's very little code. Consider the following TypeScript code. import { get, save, key } from "./storage"; describe(save, () => { let setItem: jest.Mock; beforeEach(() => { setItem = jest.fn(); Storage.prototype.setItem = setItem; }); it("should call set item with predefined key and json object", () => { const valueToStore = { value: "toStore" }; save(valueToStore); expect(setItem).toHaveBeenCalledWith(key, JSON.stringify(valueToStore)); }); }); The key lines are in the beforeEach call where the setItem function of the Storage prototype is assigned to an instance of jest.fn() . This allows us to make assertions on what is passed to the local storage setItem API.
Read more

Building a verify JWT function in TypeScript

# Verifying an RS232 signed JWT JSON Web Tokens (JWT) are used as a way to verify the identity of the caller of an API. **The best way to verify a JWT is to use a verification library.** I wanted to have a look at some of what those libraries are doing under the hood by putting together a function that will return if a given token is valid. In this blog I'll go through what I have done to get a validation function working. To simplify things assume: - That the signing algorithm is RS232 all others are considered invalid. - That the public keys are available on a JWKS url provided to the function eg [https://klee-test.au.auth0.com/.well-known/jwks.json](https://klee-test.au.auth0.com/.well-known/jwks.json) - I only want to know if the token was signed by a key available at the above url. I wont be checking if the token has expired, if the scopes or other claims are valid. # Break up the token A JWT is made up to 3 parts. The first thing to do in validating the token is to brea
Read more