How to host a Single-Page-Application on Amazon S3 for Free
How to host a Single-Page-Application on Amazon S3 for Free
You can host a Single Page Application (SPA) with Amazon S3 for free and in this Blog-Post I will show you how.
Create a Bucket
Sign up or Login to the Amazon S3 Management Console.
- Click on Create Bucket
- Set a Bucket Name and select your prefered Region, click Next
- Click Next
- Untick the Block all public access checkbox, click Next
- Click Create Bucket
Configure the Bucket
The Bucket needs to be configured to host a static website. Additionally to that, the Bucket needs to be configured in a way that it always returns the index.html page, which is a common concept for SPAs:
- Click on the Bucket name
- Go to the Properties tab and select Static website hosting
- Tick the Use this bucket to host a website radio button
- Set the Index document Input to
index.html
- Set the Error documnet Input to
index.html
aswell - Write down the Endpoint and click Save
Bucket’s contents are not public by default. We need to explicitly make the Bucket public for this. Make sure you only upload your dist
-Files to this Bucket, otherwise you might release sensible data to the public:
1. Go to the Permissions tab and click Bucket Policy
2. Enter the following and make sure to replace test.com with the Name of your Bucket
{
"Version": "2008-10-17",
"Statement": [
{
"Sid": "AllowPublicRead",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::test.com/*"
}
]
}
- Click Save
Upload your site
There are two ways to upload your site to your AWS S3 Bucket:
- Go to the Overview tab and click Upload
- Via the AWS CLI
I will show you how to use the AWS CLI to upload your static files to the AWS Bucket. This approach has the advantage that it is quicker and it is possible to deploy a new site within a CI/CD Pipeline.
- Install the CLI if you have not done so already
- Configure teh CLI if you have not done so already
- Assuming you want to deploy the relative
dist/
directory, issue the following command (make sure to replace test.com with your Bucket name)
aws s3 sync dist/ s3://test.com
Visit the Endpoint
Visit the Endpoint you wrote down earlier when configuring static website hosting in S3. You should see your SPA now.