Skip to content

Commit 22fe68b

Browse files
docs: normalize S3 static website with Terraform tutorial structure (#272)
Signed-off-by: Arya Pratap Singh <notaryasingh@gmail.com> Co-authored-by: Brian Rinaldi <brian.rinaldi@gmail.com>
1 parent 9304156 commit 22fe68b

File tree

2 files changed

+72
-6
lines changed

2 files changed

+72
-6
lines changed
57.9 KB
Loading

src/content/docs/aws/tutorials/s3-static-website-terraform.mdx

Lines changed: 72 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,13 @@ pro: false
1212
leadimage: "s3-static-website-terraform-featured-image.png"
1313
---
1414

15+
## Introduction
16+
1517
[AWS Simple Storage Service (S3)](https://aws.amazon.com/s3/) is a proprietary object storage solution that can store an unlimited number of objects for many use cases.
16-
S3 is a highly scalable, durable and reliable service that we can use for various use cases: hosting a static site, handling big data analytics, managing application logs, storing web assets and much more!
18+
S3 is a highly scalable, durable and reliable service that we can use for any use case involving file-based storage: hosting a static site, handling big data analytics, managing application logs, storing web assets and much more!
1719

18-
With S3, you have unlimited storage with your data stored in buckets.
19-
A bucket refers to a directory, while an object is just another term for a file.
20-
Every object (file) stores the name of the file (key), the contents (value), a version ID and the associated metadata.
21-
You can also use S3 to host a static website, to serve static content.
22-
It might include HTML, CSS, JavaScript, images, and other assets that make up your website.
20+
With S3, objects are stored in buckets. A bucket is effectively a directory, while an object is a file. Every object (file) stores the name of the file (key), the contents (value), a version ID and the associated metadata. You can also use S3 to host to server static content as a static website.
21+
The static content might include HTML, CSS, JavaScript, images, and other assets that make up your website.
2322

2423
LocalStack supports the S3 API, which means you can use the same API calls to interact with S3 in LocalStack as you would with AWS.
2524
Using LocalStack, you can create and manage S3 buckets and objects locally, use AWS SDKs and third-party integrations to work with S3, and test your applications without making any significant alterations.
@@ -37,6 +36,18 @@ For this tutorial, you will need:
3736
- [Terraform](https://www.terraform.io/downloads.html)
3837
- [awslocal](https://github.com/localstack/awscli-local)
3938

39+
## Architecture
40+
41+
The following diagram illustrates the architecture of the static website hosting setup using S3 and Terraform:
42+
43+
![Architecture](/images/aws/s3-static-website-terraform-diagram.png)
44+
45+
In this architecture:
46+
- A browser makes an HTTP request to the S3 website endpoint
47+
- LocalStack's S3 service serves the static content from the configured bucket
48+
- The bucket contains HTML files and optional assets
49+
- Terraform provisions and configures all resources locally
50+
4051
## Creating a static website
4152

4253
We will create a simple static website using plain HTML to get started.
@@ -374,6 +385,61 @@ tflocal plan
374385
tflocal apply
375386
```
376387

388+
## Testing the application
389+
390+
After deploying your static website, it's important to verify that everything is working correctly.
391+
Here are several ways to test your S3-hosted static website:
392+
393+
### Accessing the website
394+
395+
Navigate to the LocalStack S3 website endpoint in your browser:
396+
397+
```
398+
http://testwebsite.s3-website.localhost.localstack.cloud:4566/
399+
```
400+
401+
You should see your `index.html` content displayed, which in our case shows: "Static Website deployed locally over S3 using LocalStack".
402+
403+
### Testing with curl
404+
405+
You can also test the website using `curl` from your terminal:
406+
407+
```bash
408+
curl http://testwebsite.s3-website.localhost.localstack.cloud:4566/
409+
```
410+
411+
This should return the HTML content of your `index.html` file.
412+
413+
### Verifying the error page
414+
415+
To test the custom error document, try accessing a non-existent page:
416+
417+
```bash
418+
curl http://testwebsite.s3-website.localhost.localstack.cloud:4566/nonexistent.html
419+
```
420+
421+
You should receive the content from your `error.html` file: "Something is amiss." with an appropriate HTTP 4XX status code.
422+
423+
### Checking bucket configuration
424+
425+
You can verify the bucket's website configuration using `awslocal`:
426+
427+
```bash
428+
awslocal s3api get-bucket-website --bucket testwebsite
429+
```
430+
431+
This command should return the index and error document configuration for your bucket.
432+
433+
### Listing bucket contents
434+
435+
To confirm all your files were uploaded correctly:
436+
437+
```bash
438+
awslocal s3 ls s3://testwebsite/
439+
```
440+
441+
This will display all the files in your bucket, including `index.html`, `error.html`, and any additional assets.
442+
377443
## Conclusion
378444

379445
In this tutorial, we have seen how to use LocalStack to create an S3 bucket and configure it to serve a static website.

0 commit comments

Comments
 (0)