AWS-S3-Bucket

The AWS S3 (Simple Storage Service) Bucket project demonstrates how to securely upload files to an AWS S3 bucket using pre-signed URLs generated by a Node.js backend (Express) and a React.js frontend. Pre-signed URLs allow users to upload files directly to S3 without exposing AWS credentials.

This guide provides two main parts:

1. Basic Practice: A quick guide to set up an AWS account, create an S3 bucket, and interact with it using the AWS CLI.
2. Application Practice: Step-by-step guide for uploading files using a React application with pre-signed URLs.

---

Basic AWS S3 Practice

1. Create an AWS Account

• Go to AWS and create a free account if you haven't done so already.

2. Create an IAM User

• Log into your AWS account.
• Go to IAM (Identity and Access Management).
• Create a new user and assign Programmatic Access.
• Attach the policy AmazonS3FullAccess (or use more granular permissions based on your needs).
• Save the Access Key ID and Secret Access Key.

3. Install AWS CLI

• Follow the official AWS documentation to install AWS CLI for your operating system.

4. Verify AWS CLI Installation

• Run the following command to check if the AWS CLI is installed correctly:

aws --version 

5. Configure AWS CLI

• Configure the AWS CLI with your credentials and settings:

aws configure

You'll be prompted to enter:

• AWS Access Key ID
• AWS Secret Access Key
• Default region name (e.g., us-west-1)
• Default output format (optional, e.g., json)

6. Create an S3 Bucket

• Run the following command to create an S3 bucket:

aws s3 mb s3://bucket-name

7. Upload a File to S3

• Upload a file (file.txt as an example) to your S3 bucket:

aws s3 cp file.txt s3://bucket-name/

8. List S3 Buckets

• Run this command to list all your S3 buckets:

aws s3 ls

Application Practice

• Frontend: React + TypeScript + Vite
• Backend: Node.js + Express.js
• Cloud Service: AWS S3

1. Set up AWS S3 and IAM Permissions

• Create an S3 bucket in AWS.
  • Create using aws-cli or from aws account
• Set appropriate bucket policies to allow file uploads and pre-signed URLs.
• Create an IAM user or role with the required S3 permissions (upload and generate pre-signed URLs).
• For security, it's best to generate pre-signed URLs in the backend to avoid exposing AWS credentials.

2. Create a Backend for S3 Interaction

• Create a server folder and use the following commands:

npm init -y
npm install express cors dotenv @aws-sdk/client-s3 @aws-sdk/s3-request-presigner

3. Create a .env file

• Create a .env file in the root of server and paste the following inside it:

AWS_ACCESS_KEY_ID=your-access-key
AWS_SECRET_ACCESS_KEY=your-secret-key
AWS_REGION=your-aws-region
S3_BUCKET_NAME=your-bucket-name

4. Create a Backend for S3 Interaction

• Create a client folder and use the following commands:

npm create vite@latest .

Then, choose the following:

• React
• TypeScript + SWC

&, after this just type these commands

npm install
npm run dev

6. Setup Policy for Pre-signed URLs

• Go to the permissions of the specified bucket and under Bucket Policy, enter the following:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowGetObjectFromLocalhost",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bucket-name/*", // Enter bucket name
            "Condition": {
                "StringLike": {
                    "aws:Referer": "http://localhost:5173/*" // Or your application link
                }
            }
        }
    ]
}

• Also check the Block public access (bucket settings) and Cross-origin resource sharing (CORS) of your S3 bucket

This README.md provides an easy-to-follow guide for setting up AWS CLI, interacting with S3, and building a React app with S3 file uploads via pre-signed URLs.