Deploying a Static Website using S3 Bucket

Posted on by Panther

Deploying a Static Website using Amazon S3 Bucket

Amazon Simple Storage Service (S3) is a highly scalable, secure, and durable object storage service that can be used to store and retrieve any type of data, including static website files like HTML, CSS, and JavaScript. In this tutorial, we’ll explore how to deploy a static website using S3 bucket.

1. Create an S3 Bucket

Before deploying a static website, we need to create an S3 bucket. To create an S3 bucket, follow these steps:

  1. Go to the AWS Management Console and navigate to the S3 service.
  2. Click the “Create bucket” button.
  3. Enter a unique name for your bucket. Note that the bucket name must be globally unique across all AWS accounts.
  4. Select the region where you want to create your bucket. It’s recommended to choose the region that’s closest to your target audience to reduce latency.
  5. Leave all other settings as default and click the “Create bucket” button.

2. Upload Website Files to the S3 Bucket

Once you have created the S3 bucket, it’s time to upload your website files to the bucket. To upload website files to the S3 bucket, follow these steps:

  1. Click on the newly created bucket to open it.
  2. Click the “Upload” button.
  3. Drag and drop your website files into the upload window or click the “Add files” button to select files from your computer.
  4. Once you have added all the files, click the “Upload” button to start uploading files to the bucket.
  5. Wait for all files to be uploaded.

3. Make the S3 Bucket Publicly Accessible

By default, objects stored in S3 buckets are private and can’t be accessed by the public. To make the S3 bucket publicly accessible, follow these steps:

  1. Select the files that you want to make public by clicking the checkbox next to the file name.
  2. Click the “Actions” button and select “Make public”.
  3. Click the “Confirm” button to make the selected files public.
  4. Repeat these steps for all the files that you want to make public.

4. Enable Static Website Hosting

To host a static website on an S3 bucket, we need to enable static website hosting. To enable static website hosting, follow these steps:

  1. Click on the bucket that you want to use for website hosting.
  2. Click the “Properties” tab and then click the “Static website hosting” card.
  3. Click the “Use this bucket to host a website” checkbox.
  4. Enter the name of the index document (e.g., index.html) and the error document (e.g., error.html).
  5. Click the “Save” button.

5. Configure Bucket Policy

To allow public access to the website hosted on the S3 bucket, we need to configure a bucket policy. A bucket policy is a JSON-based policy document that defines permissions for objects in a bucket. To configure the bucket policy, follow these steps:

  1. Click the “Permissions” tab and then click the “Bucket Policy” button.
  2. Paste the following policy document in the editor replacing your-bucket-name with your bucket name.
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::your-bucket-name/*"
            ]
        }
    ]
}
  1. Click the “Save” button to save the bucket policy.

6. Test the Website

Now that you have deployed your static website on the S3 bucket, it’s time to test it. To test the website, follow these steps:

  1. Copy the endpoint URL from the “Static website hosting” card on the “Properties” tab of your S3 bucket. The URL should look like this: `http://your-bucket-name.s3-website.your-region.amazonaws.com/`
  2. Open a web browser and paste the endpoint URL in the address bar.
  3. Press Enter to load the website.
  4. If the website loads successfully, congratulations! Your website has been successfully deployed on the S3 bucket.

Conclusion

Amazon S3 is a simple and cost-effective solution for deploying static websites. With S3, you can store and serve files, and it also provides a secure and scalable infrastructure. By following the steps outlined in this tutorial, you can easily deploy your static website on an S3 bucket.

Related Post