1. 1. Getting started - Traditonal site & SPA
    1. 1.1. Enable static hosting
    2. 1.2. Further configuration - Traditional site
    3. 1.3. Further configuration - SPA
  2. 2. Uploading your files
    1. 2.1. Uploading changes
  3. 3. Using your own domain

Super Simple Static Sites & SPAs on S3

aws, deployment, s3

AWS S3 is a great service to host your static websites on. It’s easy to set up and to deploy to. It’s also cheap. As well as hosting traditional static websites it’s also simple and easy to host SPAs on too.

Getting started - Traditonal site & SPA

The configurations for traditional websites and SPAs are pretty much the same. Login to your amazon console. Go to the S3 service. Create a bucket and give it a name, if you want to use your own domain, name your bucket after your domain name.

After creating your bucket, select it and open the properties panel.

Enable static hosting

Select the “Static Website Hosting” menu. You then want to select the “Enable website hosting” option. You’ll see two input boxes. One asking for the Index Document and one asking for the Error Document. You want to set the Index Document to ‘index.html’.

Further configuration - Traditional site

The only other thing you might want to do now is add an error document to deal with 403 & 404 errors. You don’t have to though. You can leave it blank and let S3 return its standard ugly error.

Further configuration - SPA

For SPAs to work, you need to route all requests to your index.html. And there is a little trick to do this easily. You set your index document as the error document. For this example that means both the Index Document and the Error Document should be set to ‘index.html’.

This works because with an SPA the files that correspond to requests paths don’t exist. Trying to access these paths would then cause S3 to return an error document. (403 or 404). Since we have set our index.html as our error document, it can handle these paths fine.

Uploading your files

Once you have your S3 bucket set up to host a website, you need to upload your files. You can use the AWS management console to do this, but it can be much easier and faster to use the AWS CLI.

I won’t go into detail on how to set up the AWS CLI, you can find that information here. Once you have it setup, you can upload and update your website with a few simple commands.

  • Open your terminal application.

  • Enter the directory of your project files

  • From the root of your project files (where index.html is) run:

1
2
3
4
# Sync local files with bucket
# --acl public-read sets access permissions on uploaded files,
# so they can be read by anyone.
aws s3 sync . s3://your-bucket-name --acl public-read

That will synchronise the directory you are in with your S3 bucket. If you have removed some files, you can ensure they are deleted from S3 by using the –delete option. This will delete files in the S3 bucket that are not present in the local directory.

Uploading changes

To upload file changes and new files, you just run the same command again. This will upload new files found and new versions of files that have changed.

If it doesn’t appear to pick up the changed file, you can replace it directly with the following command:

1
2
3
# Replace index.html
aws s3 cp ./index.html s3://your-bucket-name/index.html --acl public-read

You can confirm your setup is working by visiting the website endpoint created by S3, i.e. the endpoint would be s3-example.com.s3-website-eu-west-1.amazonaws.com for this example.

Using your own domain

You can use the endpoint amazon generates for your S3 bucket as the website address. This is an easy way of accessing your content. Though for any serious or longterm project, you’ll probably want to use your own domain name.

There is a guide for setting up S3 domains with Route 53, but there is a way that could be simpler for you… use Cloudflare. You can use Cloudflares DNS settings to point your domain at your S3 bucket. Just add your domain as a CNAME record, pointing at the website endpoint that S3 generated for you. Cloudflare will automatically apply “CNAME flattening” (also referred to as ALIAS or ANAME records). Like this:

Setting this up with Cloudflare also provides some other advantages vs Route 53. You’ll be able to use SSL, with Cloudflares Flexible SSl. You will also potentially save money on S3 transfer fees as Cloudflare acts like a CDN for your static assets.

SSl support can be accomplished with Cloudfront (the AWS CDN) as well but it just a bit more complicated than using Cloudflare.

Thats all you need to do to begin hosting a static website on AWS S3 with your own domain name