Setting Up Public S3 Bucket Policy for React and Node.js

1. S3 Bucket Policy (S3 बकेट पॉलिसी)

A public S3 bucket policy allows everyone to access the objects in the bucket. Here's an example of a public policy for an S3 bucket:

(S3 बकेट पब्लिक पॉलिसी सभी को बकेट में मौजूद ऑब्जेक्ट्स को एक्सेस करने की अनुमति देती है। नीचे एक उदाहरण दिया गया है:)

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

Replace your-bucket-name with the name of your S3 bucket. (your-bucket-name को अपनी S3 बकेट के नाम से बदलें।)

---

2. Applying the Policy to the S3 Bucket (S3 बकेट पर पॉलिसी लागू करना)

1. Go to the AWS S3 console. (AWS S3 कंसोल पर जाएं।)
2. Select your bucket. (अपनी बकेट को चुनें।)
3. Go to the Permissions tab. (Permissions टैब पर जाएं।)
4. Click on Bucket Policy. (Bucket Policy पर क्लिक करें।)
5. Paste the JSON policy above and save. (ऊपर दी गई JSON पॉलिसी को पेस्ट करें और सेव करें।)

---

3. Using the S3 Bucket in a Node.js (React) Application

(Node.js (React) एप्लिकेशन में S3 बकेट का उपयोग करना)
In your React application, you can set an environment variable to store your CDN URL. (अपने React एप्लिकेशन में, आप अपने CDN URL को स्टोर करने के लिए एक एनवायरनमेंट वेरिएबल सेट कर सकते हैं।)
Create a .env file at the root of your React project if you don't already have one and add the following line: (यदि आपके पास पहले से .env फ़ाइल नहीं है, तो अपने React प्रोजेक्ट के रूट में इसे बनाएं और निम्नलिखित लाइन जोड़ें:)
REACT_APP_CDN_URL=https://your-bucket-name.s3.amazonaws.com
Replace https://your-bucket-name.s3.amazonaws.com with the actual URL of your S3 bucket. (https://your-bucket-name.s3.amazonaws.com को अपनी S3 बकेट के वास्तविक URL से बदलें।)

---

4. Accessing the Environment Variable in Your React Code
(अपने React कोड में एनवायरनमेंट वेरिएबल एक्सेस करना)

In your React components, you can access the environment variable like this: (अपने React कंपोनेंट्स में, आप एनवायरनमेंट वेरिएबल को इस प्रकार एक्सेस कर सकते हैं:)

const cdnUrl = process.env.REACT_APP_CDN_URL;
const imageUrl = `${cdnUrl}/path-to-your-image.jpg`;

return (
  <img src={imageUrl} alt="Example" />
);

This ensures that your images are loaded directly from the S3 bucket using the CDN URL. (यह सुनिश्चित करता है कि आपकी इमेज S3 बकेट से सीधे CDN URL का उपयोग करके लोड हो रही हैं।)

---

5. Node.js Backend (if applicable) (Node.js बैकएंड (यदि आवश्यक हो))

If you have a Node.js backend that needs to interact with your S3 bucket, you can use the AWS SDK for JavaScript. (यदि आपका Node.js बैकएंड S3 बकेट के साथ इंटरेक्ट करने की आवश्यकता रखता है, तो आप AWS SDK for JavaScript का उपयोग कर सकते हैं।)

Example: Listing Objects in Your S3 Bucket (उदाहरण: S3 बकेट में मौजूद ऑब्जेक्ट्स को लिस्ट करना)

const AWS = require('aws-sdk');

const s3 = new AWS.S3({
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  region: 'your-region'
});

const params = {
  Bucket: 'your-bucket-name'
};

s3.listObjectsV2(params, (err, data) => {
  if (err) {
    console.log(err, err.stack);
  } else {
    console.log(data);
  }
});

Ensure you have the AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY set in your environment variables or your AWS credentials configured properly. (सुनिश्चित करें कि AWS_ACCESS_KEY_ID और AWS_SECRET_ACCESS_KEY आपके एनवायरनमेंट वेरिएबल्स में सेट हैं या आपके AWS क्रेडेंशियल्स सही से कॉन्फ़िगर किए गए हैं।)

---

6. Conclusion (निष्कर्ष)

By following these steps, you should be able to set up a public S3 bucket policy and access it from both your React front-end and Node.js backend. (इन स्टेप्स को फॉलो करके, आप आसानी से एक पब्लिक S3 बकेट पॉलिसी सेटअप कर सकते हैं और इसे अपने React फ्रंटएंड और Node.js बैकएंड से एक्सेस कर सकते हैं।)

Using S3 storage efficiently can help improve your application's performance and scalability. (S3 स्टोरेज का कुशलतापूर्वक उपयोग करने से आपके एप्लिकेशन की परफॉर्मेंस और स्केलेबिलिटी में सुधार हो सकता है।)