Deploy static websites to Amazon S3

#aws #frontend #programming #webdev

Amazon simple storage service (S3) primary focus is general object storage in the cloud, similar to Google Drive or Dropbox. In this case, S3 is for software-oriented applications which you can use to store anything from images, hosting static websites, source code, spreadsheets, and so on.

This article demonstrates using Amazon S3 as a storage center for your website, allowing users access to view it publicly. As developers, many front-end programming languages, from Astro, React, Nuxt, or even basic HTML, CSS, and JavaScript, can be deployed.

The choice is yours.

Let’s get started.

GitHub

For this project, the source code is in this repo which is my portfolio and accessible via this URL.

Prerequisites

The following are required to complete this tutorial:

Create an AWS account. Sign-up is free

Benefits of S3

The benefits of choosing S3 over other services are:

Durable: The services provided allow your app to scale without fluctuating downtime.
Highly available: It is available across so many data regions worldwide.
Supports integration with AWS: S3 can be integrated with other services by AWS based on your needs. Explore the over 200 AWS services and start developing.

Deploying a static website

There are several ways to host your website:

Using the S3 console
Utilizing the representation state transfer (REST) application programming interface (API)
Using the AWS software development kit (SDK)
Using the AWS command line interface (CLI)

In this project, we will use the S3 console to deploy and host a website.

Step 1
Create a bucket
A bucket is like a container housing the project's different components, like the assets, which may include images, video files, code documents (index.html), and so on.

Make sure you are logged into your AWS management console and search for the Amazon S3 console
Create a bucket by clicking the Create bucket button

Give your bucket a name and select the region
Scroll to the end of the page and click Create bucket

Step 2
Enable static website hosting

In the Properties tab, under the Static website hosting, choose Edit
Choose Enable under the Static website hosting
For the Hosting Type, select Host a static website
Every website has a home page document. Enter the index.html (it is case-sensitive) in the Index document
If you have an Error document, enter the file name like 404.html or error.html, depending on the naming convention in your project folder.
Once satisfied with the changes, click Save changes

Step 3
Edit the Block public access (bucket settings). Find the setting in the Permissions tab. By default, Amazon S3 blocks unauthorized access to this bucket and can only be accessed on a public URL when allowed.

Choose Edit and uncheck the Block all public access box
Choose Save changes

Step 4
Add a bucket policy
This policy makes your bucket content publicly available and written in JSON format.

Located in the Permissions tab, under the Bucket policy
Choose Edit and copy-paste this policy
This policy grants public read access to your website



    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "PublicReadGetObject",
                "Effect": "Allow",
                "Principal": "*",
                "Action": [
                    "s3:GetObject"
                ],
                "Resource": [
                    "arn:aws:s3:::Bucket-Name/*"
                ]
            }
        ]
    }

Replace Bucket-Name with the title of your bucket in step 1 to something like this “arn:aws:s3:::astro-portfolio/*”

Choose Save changes

Step 5
Uploading your website content
I used Astro, a front-end framework for building beautiful UI in this step. You can use any other framework or library, and it will work similarly to this process.

Run this command on the project directory in the terminal:

npm run build

This command will create a build directory folder named dist of your app with the following file: the index.html and other necessary for the web app.