پرونده ها را در AWS S3 با Laravel 11 & Next.js با استفاده از URL های از پیش امضا شده بارگذاری کنید

فهرست مطالب

مقدمه
پیش نیازهای

تنظیم سطل AWS S3

پیکربندی باطن لاراول

نصب AWS SDK

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

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

اجرای Next.js frontend

بارگذاری پرونده ها با استفاده از URL های از پیش امضا شده

ایجاد مؤلفه بارگذاری

پایان

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

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

یک حساب AWS با دسترسی به S3.

Laravel 11 نصب شده است.

یک پروژه Next.JS تنظیم شده است.

1. تنظیم سطل AWS S3 یک سطل S3 ایجاد کنید:

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

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

روی “ایجاد سطل” کلیک کنید.
Evervault – Docs

یک نام منحصر به فرد ارائه دهید و یک منطقه را انتخاب کنید.

تنظیمات دیگر را در صورت لزوم تنظیم کرده و سطل را ایجاد کنید.
Evervault – Docs

تنظیم مجوزهای سطل:

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

خط مشی CORS را پیکربندی کنید:

خط مشی CORS را تنظیم کنید تا برنامه جلوی شما با سطل S3 تعامل داشته باشد:

json
کپی کردن
ویرایش کردن

{
  "CORSRules": [
    {
      "AllowedHeaders": ["*"],
      "AllowedMethods": ["PUT"],
      "AllowedOrigins": ["*"],
      "ExposeHeaders": []
    }
  ]
}

“*” را در رده های مجاز با URL Frontend خود در یک محیط تولید برای امنیت پیشرفته جایگزین کنید.

1. پیکربندی Backend Laravel a. نصب AWS SDK ابتدا ، AWS SDK را برای PHP با استفاده از آهنگساز نصب کنید:

ضربه شدید
کپی کردن
ویرایش کردن
آهنگساز به AWS/AWS-SDK-PHP نیاز دارد
ب. تنظیم متغیرهای محیط
اعتبارنامه AWS و اطلاعات سطل خود را به پرونده .env خود اضافه کنید:

با توجه به
کپی کردن
ویرایش کردن
AWS_ACCESS_KEY_ID = your_access_key_id
AWS_SECRET_ACCESS_KEY = your_secret_access_key
AWS_DEFAULT_REGION = your_region
aws_bucket = your_bucket_name
اطمینان حاصل کنید که این متغیرها به درستی تنظیم شده اند تا از مشکلات احراز هویت جلوگیری شود.

ج. ایجاد مسیر و کنترلر
مسیری را در مسیرهای خود/web.php یا مسیرها/api.php تعریف کنید:

PHP
کپی کردن
ویرایش کردن
استفاده از Illuminate \ http \ درخواست ؛
از Illuminate \ Support \ نمای \ مسیر استفاده کنید.
استفاده از AWS \ S3 \ S3Client ؛

مسیر :: پست ('/get-s3-signed-url' ، عملکرد (درخواست $ درخواست) {
$ درخواست-> اعتبارسنجی ([
‘filename’ => ‘required|string|max:255’,
‘filetype’ => ‘required|string|in:video/mp4,video/quicktime,video/x-msvideo’,
]) ؛

$s3 = new S3Client([
    'version' => 'latest',
    'region' => env('AWS_DEFAULT_REGION'),
    'credentials' => [
        'key' => env('AWS_ACCESS_KEY_ID'),
        'secret' => env('AWS_SECRET_ACCESS_KEY'),
    ],
]);

$key = 'uploads/videos/' . uniqid() . '_' . preg_replace('/[^a-zA-Z0-9_\-.]/', '_', $request->filename);

$command = $s3->getCommand('PutObject', [
    'Bucket' => env('AWS_BUCKET'),
    'Key' => $key,
    'ContentType' => $request->filetype,
    'ACL' => 'bucket-owner-full-control',
]);

$signedUrl = $s3->createPresignedRequest($command, '+15 minutes')->getUri();

return response()->json([
    'signed_url' => (string)$signedUrl,
    'public_url' => $s3->getObjectUrl(env('AWS_BUCKET'), $key),
    'key' => $key,
    'expires_at' => now()->addMinutes(15)->toIso8601String(),
]);

}) ؛

1. اجرای next.js frontend a. بارگذاری پرونده ها با استفاده از URL های از پیش امضا شده ، تابعی را برای رسیدگی به بارگذاری پرونده با استفاده از URL از پیش امضا شده ایجاد می کند:

جاذب
کپی کردن
ویرایش کردن
واردات Axios از 'axios' ؛

Export Const UploadVideotOS3 = Async (پرونده ، onprogress) => {
const timestamp = date.now () ؛
const پسوند = file.name.split ('.'). پاپ () ؛
const basename = file.name.replace (/.[^/.]+$/، '') ؛
const safename = ${timestamp}_${baseName.replace(/[^a-zA-Z0-9-_]/g, '')}.${extension}؛

پاسخ const = await axios.post (
${process.env.NEXT_PUBLIC_API_BASE_URL}/api/get-s3-signed-urlبا
{
نام پرونده: Safename ،
FileType: file.type ،
} ،
{
هدرها: {
“نوع محتوا”: “برنامه/json” ،
} ،
}
) ؛

const {signed_url ، public_url} = پاسخ. data ؛

در انتظار axios.put (امضا شده_url ، پرونده ، {
هدرها: {
“نوع محتوا”: file.type ،
“X-Amz-Server-Side-Side-Side”: “AES256” ،
'
:: ContentReference[oaicite:37]{فهرست = 37}