AWS S3 Bucket Setup Guide 🚀

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:

  ```json
  {
    "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! 🌐

Published: Aug 2024

← Back to Blog