AWS S3 Bucket Setup Guide

Setting up an S3 Bucket for your project on AWS is a breeze! Follow this guide to get your static website live in no time.

Access the Console:

• Start by signing into the AWS Management Console.
• Navigate to the Amazon S3 console from the services menu.

Create Your Bucket:

• In the left pane, select Buckets.
• Click Create bucket.
• Enter a unique name for your bucket. This name cannot be changed later and must be unique within the region you select.

Select Region:

• Choose your desired AWS Region, such as US East (N. Virginia) us-east-1.

Configure Access Settings:

• Under Block Public Access settings, uncheck the block options to unblock all. This ensures your bucket is accessible for public use, particularly important for static website hosting.

Upload Project Build:

• Run npm run build in your project to generate the build folder for deployment.
• Navigate to the build folder of your project.
• Drag and drop all files, including the static folder, into the S3 bucket.
• Click Upload to begin the process.

Organize Your Files:

• Ensure that all files and folders are located in the root directory of the S3 bucket.
• If necessary, use the Move option to arrange the files properly to avoid broken links or loading issues.

Set Bucket Policy for Public Access:

• Go to the Permissions tab of your bucket.

• Under Bucket Policy, add a policy that allows public access to the objects in your bucket. Example policy:

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

Enable Encryption:

• Under the Properties tab, enable Server-side encryption.
• Choose Amazon S3 managed keys (SSE-S3) for added security.

Activate Static Website Hosting:

• In the Properties tab, scroll down to find Static website hosting.
• Enable static hosting, and for Index document, enter index.html.

Test Your Website:

• Navigate back to the Objects tab.
• Find and click on index.html to retrieve the static website URL.
• Use the provided link to test your website!