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