MysteryCatz: Creating a Simple Application on S3

As I mentioned in a previous blog post, I have been looking at the most effecient way of publishing web content with infrastructure built on the cloud. So far S3 has provided one of the cheapest solutions in getting basic web content out to our users.

Let's walk through the very basic steps of deploying a static website to AWS S3 using Terraform. We will cover the basics of creating an S3 bucket and configuring it for static website hosting, as well as some best practices for managing your static website on AWS.

Before we get started, make sure you have the following prerequisites:

An AWS account set up and you are logged in to the AWS Management Console.
Terraform installed on your local machine.
The static website files that you want to host on S3.

Creating an S3 Bucket

The first step in hosting a static website on AWS S3 is to create an S3 bucket. An S3 bucket is a logical container for storing objects in S3, and is the root namespace for your objects.

To create an S3 bucket with Terraform, create a new configuration file called main.tf and add the following code:

resource "aws_s3_bucket" "example" {
bucket = "example.com"
acl = "public-read"
}

This code creates an S3 bucket called "example.com" with a public read ACL, which allows anyone to read the objects in the bucket.

Enable Static Website Hosting

Now that you have created an S3 bucket, the next step is to enable static website hosting for it. To do this, add the following code to your configuration file:

resource "aws_s3_bucket_policy" "example" {
bucket = aws_s3_bucket.example.id
policy = <<EOF
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::example.com/*"
}
]
}
EOF
}

This code creates an S3 bucket policy that allows public read access to all objects in the bucket. This is required for static website hosting to work.

Configure Static Website Hosting

Now that static website hosting is enabled for your S3 bucket, the next step is to configure it. To do this, add the following code to your configuration file:

resource "aws_s3_bucket_website" "example" {
bucket = aws_s3_bucket.example.id
index_document = "index.html"
error_document = "error.html"
}

This code config will create us a very simple AWS S3 Bucket website setup, pointing the root page to a static html file called index.html and posting users to error.html should there be a problem.

Upload the Static Website Files

Now that your S3 bucket is configured for static website hosting, the next step is to upload your static website files to it. To do this, use the aws s3 cp command to upload the files to the bucket:

aws s3 cp index.html s3://example.com/index.html
aws s3 cp error.html s3://example.com/error.html
aws s3 cp styles.css s3://example.com/styles.css

Replace "index.html", "error.html", and "styles.css" with the names of your own static website files.

Deploy the Resources

Now that you have defined all the resources you want to create on AWS and uploaded your static website files to S3, the final step is to deploy them. To do this, run the following command from the command line:

terraform apply

This will create the S3 bucket and configure it for static website hosting, and upload your static website files to the bucket.

index.html:

<html>
<head>
<title>My Static Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Static Website!</h1>
<p>This website is hosted on AWS S3 using Terraform.</p>
</body>
</html>

error.html:

<html>
<head>
<title>Error</title>
</head>
<body>
<h1>An error has occurred.</h1>
</body>
</html>

styles.css:

body {
font-family: Arial, sans-serif;
color: #333;
}
h1 {
color: #0070c9;
}

To upload these files to your S3 bucket, you can use the aws s3 cp command like this:

aws s3 cp index.html s3://example.com/index.html
aws s3 cp error.html s3://example.com/error.html
aws s3 cp styles.css s3://example.com/styles.css

This will upload the "index.html", "error.html", and "styles.css" files to the "example.com" S3 bucket.

Wrap Up!

That's how to host a static website on AWS S3 using Terraform. We walked through the steps of creating an S3 bucket, enabling static website hosting, and configuring it to meet your specific needs. We also demonstrated how to upload your static website files to the bucket. We hope this tutorial was helpful and gives you a good starting point for hosting static websites on AWS S3 using Terraform.

In our next post lets look at what more we can do with this, what technologies we can add to make our website do more things and even use our users computer cycles to power our website with JavaScript.

Navigation

Creating a Simple Application on S3