CodeNewbie Community 🌱

Cover image for Creating an Amazon S3 Bucket for storing media and static files for your website
Malcolm Mikazuki
Malcolm Mikazuki

Posted on

Creating an Amazon S3 Bucket for storing media and static files for your website

Introduction:

Image description

Amazon S3 (Simple Storage Service) is an object storage service that offers scalability, data availability, security, and performance. In this tutorial, we will guide you through the process of creating an Amazon S3 bucket to store your website's media and static files. By the end of this guide, you'll have a fully configured S3 bucket ready to store and retrieve any amount of data at any time, from anywhere on the web.

Prerequisites:

Before you begin, make sure you have:

An active AWS account. If you don't have one, you can sign up for free at https://aws.amazon.com/.
Access to AWS Management Console.

Step 1: Open the Amazon S3 Console

1.1. Sign in to your AWS Management Console and navigate to the S3 service. You can find this under "Storage" in the "Services" menu.

Step 2: Create a Bucket

2.1. Click on the "Create Bucket" button.
2.2. Enter a unique DNS-compliant name for your new bucket.
2.3. Choose the AWS Region where you want the bucket to reside.
2.4. Leave the remaining options at their defaults for now, and click on the "Create Bucket" button.

Step 3: Configure the Bucket for Static Website Hosting

3.1. Once your bucket is created, click on the bucket name from the dashboard to open it.
3.2. Navigate to the "Properties" tab and scroll down to the "Static website hosting" section.
3.3. Select the "Use this bucket to host a website" option.
3.4. Specify the names of your index and error documents. The index document is the default or home page for your website.

Step 4: Set the Bucket Policy

4.1. Go to the "Permissions" tab and click on "Bucket Policy."
4.2. Enter a policy that allows public read access to your bucket. For example:

{
   "Version":"2012-10-17",
   "Statement":[{
    "Sid":"PublicReadGetObject",
        "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::your_bucket_name/*"
      ]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Replace "your_bucket_name" with the actual name of your S3 bucket.

Step 5: Upload Your Website Files

5.1. Navigate to the "Objects" tab and click the "Upload" button.
5.2. Use the file dialog to select your website's static and media files, then click the "Upload" button.

Conclusion:

Congratulations! You've successfully created an Amazon S3 bucket and configured it to host your website's static and media files. Now, you have a scalable, secure, and highly available solution to store your website data. With the scalability of Amazon S3, your website can handle any amount of traffic and data will always be served at high speed.

Remember, Amazon S3 also provides robust features such as version control, event notifications, and logging to further enhance the management of your data. Happy hosting on AWS S3!

Image description

Follow me on Twitter: @CodezMikazuki

Thanks for reading, Malcz/Mika

Oldest comments (1)

Collapse
 
mikazukiaugus profile image
Malcolm Mikazuki • Edited

If you're looking to host a public website using an Amazon S3 bucket, you'll need to configure specific settings to make the website accessible to the public.

To serve a public website, the objects (like HTML, CSS, JS files, images, etc.) in your S3 bucket should be publicly readable. This is achieved by setting an appropriate bucket policy. Here's a simple example of a bucket policy that allows public read access:

{
  "Version":"2012-10-17",
  "Statement":[{
    "Sid":"PublicReadGetObject",
    "Effect":"Allow",
    "Principal": "*",
    "Action":["s3:GetObject"],
    "Resource":["arn:aws:s3:::your_bucket_name/*"]
  }]
}
Enter fullscreen mode Exit fullscreen mode

Static Website Hosting:

Enable Static website hosting in the bucket properties. This will allow the bucket to serve your website's static files.
Set the Index document (typically index.html) which the bucket will serve as the default webpage when visitors access your site's root URL.
Optionally, set the Error document to handle 4xx class errors, which can help you display a custom error page instead of the default AWS error message.

Remember that once you set your S3 bucket for public access, it's important to routinely monitor and audit your configurations to ensure that no unintentional permissions are granted, potentially exposing sensitive data. Always adhere to the principle of least privilege, granting only the permissions necessary for the function of your website.