تصور کنید که یک پلتفرم پخش رسانه را اجرا کنید که در آن کاربران ویدیوهای بزرگ با کیفیت بالا آپلود می کنند. آپلود چنین فایل های بزرگی ممکن است کند باشد و اگر شبکه غیر قابل اعتماد باشد ممکن است با شکست مواجه شود.

استفاده از آپلودهای سنتی تک قسمتی می تواند برای فایل های بزرگ دست و پا گیر و ناکارآمد باشد، که اغلب منجر به خطاهای مهلت زمانی یا نیاز به راه اندازی مجدد کل فرآیند آپلود در صورت خرابی هر قسمت می شود. اینجاست که ویژگی بارگذاری چند قسمتی آمازون S3 وارد عمل می شود و راه حلی قوی برای این چالش ها ارائه می دهد.

در این مقاله، نحوه مدیریت کارآمد فایل‌های بزرگ با آپلود چند قسمتی آمازون S3 را تحلیل خواهید کرد. ما مزایای استفاده از این ویژگی را مورد بحث قرار خواهیم داد، روند آپلود فایل‌ها را به صورت بخش‌هایی طی می‌کنیم، و نمونه‌هایی از کد با استفاده از AWS SDK برای پروژه Node و React تمام پشته ارائه خواهیم کرد.

در پایان این مقاله، باید درک خوبی از نحوه استفاده از آپلود چند قسمتی آمازون S3 برای بهینه سازی آپلود فایل در برنامه های خود داشته باشید.

پیش نیازها

قبل از شروع، اطمینان حاصل کنید که موارد زیر را دارید:

یک حساب AWS با اعتبار کاربری IAM.

Node.js روی دستگاه توسعه شما نصب شده است.

دانش اولیه جاوا اسکریپت، React و Node.js.

فهرست مطالب:

معرفی

پیش نیازها

فهرست مطالب

چگونه کار می کند

مرحله 1: نحوه راه اندازی AWS S3

چگونه یک سطل S3 بسازیم

نحوه پیکربندی خط مشی سطل s3

مرحله 2: نحوه تنظیم AWS S3 Backend با Node.js

چگونه یک پروژه Node.js را راه اندازی کنیم

بسته های مورد نیاز را نصب کنید

ایجاد فایل سرور

واردات و پیکربندی

میان افزار و پیکربندی AWS

مسیرها

Start/Initialize Upload Endpoint

نقطه پایانی قسمت را آپلود کنید

نقطه پایان آپلود را کامل کنید

سرور را راه اندازی کنید

متغیرهای محیطی

در حال اجرا سرور

مرحله 3: نحوه تنظیم Frontend با React

چگونه یک پروژه React را راه اندازی کنیم

بسته های مورد نیاز را نصب کنید

کامپوننت ها را ایجاد کنید

جزء برنامه

آزمایش کردن

آپلود قسمت

آپلود قسمت کامل

کد کامل در GitHub

نتیجه

چگونه کار می کند

یک آپلود فایل بزرگ به قطعات/تکه های کوچکتر تقسیم می شود، هر قسمت به طور مستقل در آمازون S3 آپلود می شود. پس از بارگذاری تمام قسمت ها، آنها برای ایجاد شی نهایی ترکیب می شوند.

مثال: آپلود یک فایل 100 مگابایتی در قسمت های 5 مگابایتی منجر به آپلود 20 قسمت در S3 می شود. هر قسمت با یک شناسه منحصربه‌فرد آپلود می‌شود و ترتیب برای اطمینان از اینکه فایل می‌تواند دوباره به درستی مونتاژ شود حفظ می‌شود.

تلاش‌های مجدد را می‌توان به گونه‌ای پیکربندی کرد که به‌طور خودکار قسمت‌های ناموفق را دوباره امتحان کند، و آپلود را می‌توان در هر زمانی متوقف کرد و از سر گرفت. این باعث می‌شود که فرآیند قوی‌تر و مقاوم‌تر باشد، به‌ویژه برای فایل‌های بزرگ.

درباره اسناد بارگذاری چند قسمتی Amazon S3 بیشتر بیاموزید.

بیا شروع کنیم!

مرحله 1: نحوه راه اندازی AWS S3

چگونه یک سطل S3 بسازیم

ابتدا وارد کنسول مدیریت AWS شوید

به سرویس S3 بروید.

یک سطل جدید ایجاد کنید و نام سطل را یادداشت کنید.

برای سادگی، تیک تنظیمات دسترسی عمومی را بردارید. پس از ایجاد سطل، دسترسی سطل را نیز با استفاده از سیاست های IAM پیکربندی می کنیم.

تنظیمات دیگر را به عنوان پیش فرض بگذارید و سطل را ایجاد کنید.

نحوه پیکربندی S3 Bucket Policy

اکنون که سطل را ایجاد کرده اید، بیایید این خط مشی را تنظیم کنیم تا به کاربران اجازه دهد url اشیاء (فایل/فیلم) شما را بخوانند.

روی نام سطل کلیک کنید و به تب Permissions بروید.

به قسمت Bucket Policy بروید و روی Edit کلیک کنید.

خط مشی زیر را وارد کرده و your-bucket-name را با نام سطل واقعی خود جایگزین کنید:

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

Version : شماره نسخه شیء آمازون S3 برای زبان خط مشی سطل.

Statement : آرایه ای از یک یا چند عبارت فردی که خط مشی را تعریف می کند.

Effect : افکت تعیین می کند که آیا عبارت اجازه دسترسی را می دهد یا رد می کند.

Principal : نهادی که این سیاست برای آن اعمال می شود. در این صورت ما به همه مدیران اجازه می دهیم. در تولید، باید کاربر یا نقش IAM را که نیاز به دسترسی دارد، مشخص کنید.

Action : اقدامی که خط مشی اجازه می دهد یا رد می کند. در این مورد، ما به عمل s3:GetObject اجازه می دهیم که به کاربران اجازه می دهد اشیاء را از سطل بازیابی کنند.

Resource : نام منبع آمازون (ARN) سطل و اشیایی که این خط‌مشی برای آنها اعمال می‌شود. در این حالت، ما اجازه دسترسی به تمام اشیاء موجود در سطل را می دهیم.

برای اعمال سیاست روی ذخیره تغییرات کلیک کنید.

مرحله 2: نحوه تنظیم AWS S3 Backend با Node.js

در مرحله بعد، بیایید سرور پشتیبان را با AWS SDK تنظیم کنیم تا فرآیند آپلود فایل را انجام دهد.

چگونه یک پروژه Node.js را راه اندازی کنیم

یک دایرکتوری جدید برای پروژه خود ایجاد کنید و یک پروژه Node.js جدید را راه اندازی کنید:

 mkdir s3-multipart-upload cd s3-multipart-upload npm init -y

بسته های مورد نیاز را نصب کنید

بسته های زیر را با استفاده از npm نصب کنید:

 npm install express dotenv multer aws-sdk

ایجاد فایل سرور

یک فایل جدید با نام app.js ایجاد کنید (برای سادگی، ما از این فایل فقط برای تمام منطق آپلود استفاده می کنیم) و کد زیر را اضافه کنید:

واردات و پیکربندی

 const cors = require("cors"); const express = require("express"); const AWS = require("aws-sdk"); const dotenv = require("dotenv"); const multer = require("multer"); const multerUpload = multer(); dotenv.config(); const app = express(); const port = 3001;

واردات

cors : میان‌افزار برای فعال کردن اشتراک‌گذاری منابع متقاطع (CORS). این لازم است تا برنامه frontend شما با پشتیبان میزبانی شده در دامنه یا پورت دیگری تعامل داشته باشد.

express : یک چارچوب کاربردی وب Node.js حداقل و انعطاف پذیر.

AWS : AWS SDK برای جاوا اسکریپت که به شما امکان می دهد با سرویس های AWS تعامل داشته باشید.

dotenv : ماژولی که متغیرهای محیطی را از یک فایل .env در process.env بارگیری می کند.

multer : نرم افزار میانی برای مدیریت داده های چندبخشی/فرم، که در درجه اول برای آپلود فایل ها استفاده می شود.

پیکربندی

multerUpload : multer برای مدیریت آپلود فایل ها راه اندازی می کند.

dotenv.config() : متغیرهای محیطی را از یک فایل .env بارگیری می کند.

app : یک برنامه Express را راه اندازی می کند.

port : پورتی را که برنامه Express روی آن اجرا می شود را تنظیم می کند.

میان افزار و پیکربندی AWS

سپس کد زیر را برای پیکربندی میان افزار و AWS SDK اضافه کنید:

 app.use(cors()); AWS.config.update({ accessKeyId: process.env.AWS_ACCESS_KEY, secretAccessKey: process.env.AWS_SECRET_KEY, region: process.env.AWS_REGION, }); const s3 = new AWS.S3(); app.use(express.json({ limit: "50mb" })); app.use(express.urlencoded({ limit: "50mb", extended: true }));

app.use(cors()) : CORS را برای همه مسیرها فعال می‌کند و به جلوی شما اجازه می‌دهد بدون مشکلات مربوط به درخواست‌های متقاطع با پشتیبان ارتباط برقرار کند.

AWS.config.update({ ... }) : AWS SDK را با کلید دسترسی، کلید مخفی و منطقه از متغیرهای محیطی پیکربندی می کند.
const s3 = new AWS.S3(): نمونه ای از سرویس S3 ایجاد می کند.

app.use(express.json({ limit: '50mb' })) : Express را برای تجزیه بدنه های JSON با محدودیت اندازه 50 مگابایت پیکربندی می کند.

app.use(express.urlencoded({ limit: '50mb', extended: true })) : Express را برای تجزیه بدنه های رمزگذاری شده با URL با محدودیت اندازه 50 مگابایت پیکربندی می کند.

مسیرها

زمان آن رسیده است که مسیرهای خود را ایجاد کنیم. مسیرهای مورد نیاز برای فرآیند آپلود چند قسمتی به شرح زیر است:

راه اندازی فرآیند آپلود

آپلود بخش هایی از فایل

تکمیل فرآیند آپلود.

Start/Initialize Upload Endpoint

این مسیر فرآیند آپلود را در بازی قرار می دهد. کد زیر را برای ایجاد یک نقطه پایانی برای مقداردهی اولیه فرآیند آپلود چند قسمتی اضافه کنید:

 app.post("/start-upload", async (req, res) => { const { fileName, fileType } = req.body; const params = { Bucket: process.env.S3_BUCKET, Key: fileName, ContentType: fileType, }; try { const upload = await s3.createMultipartUpload(params).promise(); // console.log({ upload }); res.send({ uploadId: upload.UploadId }); } catch (error) { res.send(error); } });

تابع بالا یک نقطه پایانی POST /start-upload ایجاد می کند که انتظار دارد یک بدنه JSON با مشخصات fileName و fileType باشد. سپس از روش createMultipartUpload از سرویس S3 برای مقداردهی اولیه فرآیند آپلود چند قسمتی استفاده می کند. در صورت موفقیت آمیز بودن، uploadId به کاربر برمی گرداند که برای آپلود بخش هایی از فایل استفاده می شود.

آپلود قسمت پایانی

این مسیری است که بخش‌های مختلف کوچکتر آپلود فایل بزرگ دریافت و برچسب‌گذاری می‌شود. کد زیر را برای ایجاد نقطه پایانی برای آپلود بخشی از فایل اضافه کنید:

 app.post("/upload-part", multerUpload.single("fileChunk"), async (req, res) => { const { fileName, partNumber, uploadId, fileChunk } = req.body; const params = { Bucket: process.env.S3_BUCKET, Key: fileName, PartNumber: partNumber, UploadId: uploadId, Body: Buffer.from(fileChunk, "base64"), }; try { const uploadParts = await s3.uploadPart(params).promise(); console.log({ uploadParts }); res.send({ ETag: uploadParts.ETag }); } catch (error) { res.send(error); } });

تابع بالا یک نقطه پایانی POST در /upload-part ایجاد می کند که انتظار دارد یک بدنه داده فرم با ویژگی های uploadId ، partNumber و fileName باشد. از روش uploadPart از سرویس S3 برای آپلود بخشی از فایل استفاده می کند. در صورت موفقیت آمیز بودن، ETag قسمت آپلود شده را به مشتری برمی گرداند.

ETag یک شناسه منحصر به فرد برای قسمت آپلود است که برای تکمیل آپلود چند قسمتی استفاده می شود.

نقطه پایان آپلود را کامل کنید

هنگامی که قسمت آپلود شد، مرحله نهایی ترکیب همه قسمت ها برای ایجاد شی نهایی است.

کد زیر را برای ایجاد یک نقطه پایانی برای تکمیل فرآیند آپلود چند قسمتی اضافه کنید:

 app.post("/complete-upload", async (req, res) => { const { fileName, uploadId, parts } = req.body; const params = { Bucket: process.env.S3_BUCKET, Key: fileName, UploadId: uploadId, MultipartUpload: { Parts: parts, }, }; try { const complete = await s3.completeMultipartUpload(params).promise(); console.log({ complete }); res.send({ fileUrl: complete.Location }); } catch (error) { res.send(error); } });

تابع بالا یک نقطه پایانی POST در /complete-upload ایجاد می کند که بدنه JSON با uploadId ، fileName و ویژگی های parts را انتظار دارد. از متد completeMultipartUpload از سرویس S3 برای ترکیب قسمت های آپلود شده و ایجاد شی نهایی استفاده می کند. در صورت موفقیت آمیز بودن، شی داده حاوی fileUrl در مورد آپلود تکمیل شده برمی گرداند.

سرور را راه اندازی کنید

در نهایت کد زیر را برای راه اندازی سرور Express اضافه کنید:

 app.listen(port, () => { console.log(`Server running on port ${port}`); });

این کد سرور اکسپرس را در پورت 3001 راه اندازی می کند و زمانی که سرور در حال اجرا است پیامی را به کنسول ثبت می کند.

متغیرهای محیطی

یک فایل جدید به نام .env در دایرکتوری ریشه پروژه خود ایجاد کنید و متغیرهای محیطی زیر را اضافه کنید:

 AWS_ACCESS_KEY=your-access-key AWS_SECRET_KEY=your-secret-key AWS_REGION=your-region S3_BUCKET=your-bucket-name

your-access-key ، your-secret-key ، your-region و your-bucket-name با اعتبار AWS واقعی و نام سطل خود جایگزین کنید.

در حال اجرا سرور

برای اجرای سرور، دستور زیر را در ترمینال خود اجرا کنید:

 node app.js

با این کار سرور روی پورت 3001 راه اندازی می شود.

مرحله 3: نحوه تنظیم Frontend با React

اکنون که بک‌اند راه‌اندازی شد، بیایید یک React frontend ایجاد کنیم تا با سرور تعامل داشته باشد و با استفاده از فرآیند آپلود چند قسمتی، فایل‌ها را در S3 آپلود کنیم.

فرانت‌اند مسئول تقسیم فایل به بخش‌ها، آپلود هر قسمت در سرور و تکمیل فرآیند آپلود خواهد بود.

چگونه یک پروژه React را راه اندازی کنیم

یک پروژه React جدید با استفاده از Create React App ایجاد کنید:

 npx create-react-app s3-multipart-upload-frontend cd s3-multipart-upload-frontend

بسته های مورد نیاز را نصب کنید

بسته های زیر را با استفاده از npm نصب کنید:

 npm install axios

کامپوننت ها را ایجاد کنید

یک فایل جدید با نام Upload.js در پوشه src/components ایجاد کنید و کد زیر را اضافه کنید:

 import React, { useState } from "react"; import axios from "axios"; const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB const FileUpload = () => { const [file, setFile] = useState(null); const [fileUrl, setFileUrl] = useState(""); const handleFileChange = (e) => { setFile(e.target.files[0]); }; const handleFileUpload = async () => { const fileName = file.name; const fileType = file.type; let uploadId = ""; let parts = []; try { // Start the multipart upload const startUploadResponse = await axios.post( "http://localhost:3001/start-upload", { fileName, fileType, } ); uploadId = startUploadResponse.data.uploadId; // Split the file into chunks and upload each part const totalParts = Math.ceil(file.size / CHUNK_SIZE); console.log(totalParts); for (let partNumber = 1; partNumber <= totalParts; partNumber++) { const start = (partNumber - 1) * CHUNK_SIZE; const end = Math.min(start + CHUNK_SIZE, file.size); const fileChunk = file.slice(start, end); const reader = new FileReader(); reader.readAsArrayBuffer(fileChunk); const uploadPart = () => { return new Promise((resolve, reject) => { reader.onload = async () => { const fileChunkBase64 = btoa( new Uint8Array(reader.result).reduce( (data, byte) => data + String.fromCharCode(byte), "" ) ); const uploadPartResponse = await axios.post( "http://localhost:3001/upload-part", { fileName, partNumber, uploadId, fileChunk: fileChunkBase64, } ); parts.push({ ETag: uploadPartResponse.data.ETag, PartNumber: partNumber, }); resolve(); }; reader.onerror = reject; }); }; await uploadPart(); } // Complete the multipart upload const completeUploadResponse = await axios.post( "http://localhost:3001/complete-upload", { fileName, uploadId, parts, } ); setFileUrl(completeUploadResponse.data.fileUrl); alert("File uploaded successfully"); } catch (error) { console.error("Error uploading file:", error); } }; return ( <div> <input type="file" onChange={handleFileChange} /> <button disabled={!file} onClick={handleFileUpload}> Upload </button> <hr /> <br /> <br /> {fileUrl && ( <a href={fileUrl} target="_blank" rel="noopener noreferrer"> View Uploaded File </a> )} </div> ); }; export default FileUpload;

مؤلفه FileUpload در بالا فرآیند آپلود فایل را با استفاده از روش آپلود چند قسمتی انجام می دهد. فایل را به قطعات تقسیم می کند، هر قسمت را در سرور آپلود می کند و فرآیند آپلود را کامل می کند.

کامپوننت از بخش های کلیدی زیر تشکیل شده است:

CHUNK_SIZE : اندازه هر قسمت بر حسب بایت. در این حالت از قطعات 5 مگابایتی استفاده می کنیم.

handleFileChange : تابعی که فایل انتخابی را در حالت تنظیم می کند.

handleFileUpload : تابعی است که فرآیند آپلود چند قسمتی را با ارسال فایل به سرور به صورت بخش‌هایی آغاز می‌کند.

فرآیند آپلود را با فراخوانی نقطه پایانی /start-upload آغاز می کند و uploadId را بازیابی می کند.

فایل را به قطعات تقسیم می کند و هر قسمت را با استفاده از نقطه پایانی /upload-part در سرور آپلود می کند.

با فراخوانی نقطه پایانی /complete-upload با uploadId و آرایه قطعات، فرآیند آپلود را تکمیل می کند.

fileUrl : یک متغیر حالت که URL فایل آپلود شده را ذخیره می کند.

کامپوننت یک فیلد ورودی برای انتخاب یک فایل، یک دکمه برای آپلود فایل و یک پیوند برای مشاهده فایل آپلود شده ارائه می کند.

جزء برنامه

فایل App.js را در پوشه src با کد زیر به روز کنید:

 import React from "react"; import FileUpload from "./components/FileUpload"; function App() { return ( <div className="App"> <h1>Large File Upload with S3 Multipart Upload</h1> <FileUpload /> </div> ); } export default App;

مؤلفه App مؤلفه FileUpload را ارائه می‌کند که فرآیند آپلود فایل را مدیریت می‌کند.

چگونه Frontend را راه اندازی کنیم

برای اجرای frontend، دستور زیر را در ترمینال خود اجرا کنید:

 npm start

با این کار سرور توسعه React در پورت 3000 راه اندازی می شود و برنامه در مرورگر وب پیش فرض شما باز می شود.

آزمایش کردن

بیایید برنامه را با آپلود یک فایل بزرگ با استفاده از frontend آزمایش کنیم. باید مشاهده کنید که فایل در قسمت‌هایی آپلود می‌شود و سپس ترکیب می‌شود تا شی نهایی در سروری که تب شبکه شما را تحلیل می‌کند، ایجاد شود.

آپلود قسمت

در تصویر زیر، نقطه پایانی start-upload برای مقداردهی اولیه و شروع فرآیند آپلود فراخوانی شده است. فایل بزرگ آپلود شده به قطعات تقسیم شده و با نقطه پایانی upload-part آپلود می شود. می توانید تا 10 یا بیشتر را ببینید (بسته به اندازه هر تکه تا حجم کل فایل).

هر قسمت آپلود دارای یک شناسه منحصر به فرد Etag است که برای آپلود کامل استفاده می شود.

به صورت قطعات" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/06/uplaod-start-parts.png 600w, https://www.freecodecamp.org/news/content/images/size/w1000/2024/06/uplaod-start-parts.png 1000w, https://www.freecodecamp.org/news/content/images/size/w1600/2024/06/uplaod-start-parts.png 1600w, https://www.freecodecamp.org/news/content/images/2024/06/uplaod-start-parts.png 1767w" sizes="(min-width: 1200px) 1200px" width="1767" height="658" loading="lazy">

آپلود قسمت کامل

آخرین و آخرین مرحله فرآیند، نقطه پایانی complete-upload است که در آن قسمت های آپلود با هم ترکیب می شوند تا یک شی واحد برای فایل آپلود شده تشکیل دهند.

به صورت قطعات" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/06/upload-complete.png 600w, https://www.freecodecamp.org/news/content/images/size/w1000/2024/06/upload-complete.png 1000w, https://www.freecodecamp.org/news/content/images/size/w1600/2024/06/upload-complete.png 1600w, https://www.freecodecamp.org/news/content/images/2024/06/upload-complete.png 1791w" sizes="(min-width: 1200px) 1200px" width="1791" height="658" loading="lazy">

برای دسترسی به فایل آپلود شده خود می توانید روی View Uploaded File کلیک کنید.

کد کامل در GitHub

برای دسترسی به کد کامل در GitHub روی لینک زیر کلیک کنید:

آپلود فایل های چند بخشی با react و NodeJS

نتیجه

در این مقاله، نحوه مدیریت کارآمد فایل‌های بزرگ با آپلود چند قسمتی Amazon S3 را تحلیل کردیم. ما مزایای استفاده از این ویژگی را مورد بحث قرار دادیم، روند آپلود فایل‌ها را به صورت قسمت‌هایی تحلیل کردیم و نمونه‌هایی از کد را با استفاده از Node.js و React ارائه کردیم.

این یک پیاده‌سازی سطح بالایی از فرآیند آپلود چند قسمتی است، می‌توانید با گفت ن آپشن های بیشتری مانند ردیابی پیشرفت، مدیریت خطا و آپلودهای قابل ازسرگیری، آن را بیشتر تقویت کنید.

با استفاده از بارگذاری چند قسمتی آمازون S3، می‌توانید با تقسیم فایل‌های بزرگ به قسمت‌های کوچک‌تر، آپلود مستقل و ترکیب آن‌ها برای ایجاد شی نهایی، آپلود فایل‌ها را در برنامه‌های خود بهینه کنید. این رویکرد نه تنها عملکرد آپلود را افزایش می‌دهد، بلکه تحمل خطا و انعطاف‌پذیری را برای توقف موقت و از سرگیری آپلودها اضافه می‌کند، که آن را برای مدیریت فایل‌های بزرگ در شبکه‌های ناپایدار ایده‌آل می‌کند.

خبرکاو