DEV Community

Reardon85
Reardon85

Posted on

Bucket-loads of Fun: Setting up an AWS S3 Bucket

Hello tech aficionados! Today, we're venturing into the exciting world of Amazon Web Services (AWS) to create an S3 bucket, configure its permissions, and use it for sharing and uploading images from an external website. Buckle up, it's going to be a fun ride!

Step 1: Creating an AWS Account and an S3 Bucket

Before we can play in Amazon's big sandbox, we need an AWS account. Head over to the AWS homepage and sign up. Once you're done signing up and logging in, you'll be greeted with the AWS Management Console. It's a bit like the cockpit of a spaceship - lots of buttons, each one more confusing than the last.

Now, we need to create an S3 bucket. S3 stands for Simple Storage Service, and it's basically Amazon's version of an infinitely expanding hard drive in the cloud. Here's how you set it up:

  1. In the AWS Management Console, find the S3 service and click on it.
  2. Click on "Create bucket".
  3. Choose a globally unique name for your bucket and select a region.
  4. Leave the other options as default for now and click on "Create bucket".

Congratulations! You've created an S3 bucket.

Step 2: Setting up Bucket Permissions

Next, we'll set up permissions so that our external website can interact with the bucket. This involves configuring the bucket's CORS (Cross-Origin Resource Sharing) policy. Here's how:

Go to your newly created bucket and click on the "Permissions" tab.
Click on "Cross-origin resource sharing (CORS)".
In the CORS configuration box, paste in the following configuration and then click "Save":

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "[Insert the host Url of your site]"
        ],
        "ExposeHeaders": []
    }
]
Enter fullscreen mode Exit fullscreen mode

This configuration will allow only your site to interact with your bucket.

Step 3: Setting Up an S3 Bucket Policy

While the CORS configuration allows browsers to make requests to your bucket from different domains, the bucket policy specifies who can access your bucket and what actions they can perform. It's crucial to have a well-configured bucket policy for secure and controlled access to your S3 bucket.

To set up a bucket policy:

Go back to your bucket and click on the "Permissions" tab.
Click on "Bucket Policy".
Here, you'll see a JSON editor where you can define your bucket policy. For example, if you want to make your bucket public (which is not recommended for most use cases due to security concerns), you could use the following policy:

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

Remember to replace YOUR_BUCKET_NAME with the actual name of your bucket.

This policy allows anyone ("Principal": "") to perform the s3:GetObject action, which basically means they can read any object in your bucket. The "Resource" specifies which objects in your bucket the policy applies to. In this case, it applies to all objects ("/").

If you're planning on having your website add images as well, you will need to add additional permissions for actions for put objects. But Make sure that you place stricter limitations on who's can perform these actions aka the "Principal"

You can specify different permissions for different users, restrict access based on IP address, deny certain actions, and much more. Be sure to understand the implications and use them wisely!

And there you have it! You now have an AWS S3 bucket set up with CORS and bucket policies. With this setup, you're well on your way to managing image storage for your website. Remember, AWS is a robust tool with a wide range of configurations and customizations, so continue exploring and experimenting. Happy coding!

Top comments (0)