Top.Mail.Ru
Публичное облако на базе VMware с управлением через vCloud Director
Вход / Регистрация

Интеграция Laravel с S3-хранилищем Timeweb Cloud

Олег Мещеряков
Олег Мещеряков
Технический писатель
30 ноября 2024 г.
425
12 минут чтения
Средний рейтинг статьи: 5

Данная инструкция подробно описывает, как подключить Amazon S3-совместимое облачное хранилище к приложению Laravel. В процессе вы научитесь выполнять настройку подключения, загружать файлы через интерфейс, маршруты и формы, а также оптимизировать изображения перед загрузкой.

Мы используем S3-хранилище от Timeweb Cloud для демонстрации возможностей интеграции. Оно отлично подходит для хранения медиафайлов, резервных копий и других данных благодаря своей масштабируемости, надежности и безопасности. Следуя данной инструкции, вы сможете легко настроить свое приложение для работы с Timeweb Cloud S3 и эффективно управлять хранилищем данных.

Что такое Amazon S3?

Amazon S3 (Simple Storage Service) — это облачное хранилище для безопасного и масштабируемого хранения данных. Подходит для файлов любого размера и формата, часто используется для хранения изображений, видеороликов, резервных копий и других данных.

Преимущества S3:

  • Любые данные: автоматическая подстройка под объем.
  • Надежность: сохранность данных до 99.98%.
  • Интеграции: поддержка API и SDK.
  • Экономичность: оплата только за использованные ресурсы.
  • Безопасность: встроенная шифрация и поддержка IAM-политик.

Если у вас есть сайт с большим количеством медиа-контента, таким как изображения или видео, Amazon S3 станет более выгодным и эффективным решением, чем покупка сервера с большим объемом диска. S3 позволяет гибко масштабировать хранилище под ваши нужды, обеспечивает высокую надежность данных и избавляет от забот о физических серверах. Вы платите только за использованные ресурсы, а встроенные инструменты безопасности и интеграции делают его идеальным выбором для работы с большими объемами данных.

Создание хранилища S3 в Timeweb Cloud

  1. Зарегистрируйтесь в Timeweb Cloud.
  2. Перейдите в раздел «Хранилище S3» → нажмите «Создать».
  3. Выберите:
    • Размер хранилища: фиксированный или произвольный.
    • Тип бакета: приватный или публичный.
  1. Нажмите кнопку «Заказать».

2024 11 27 10 00 13

Для примера будем использовать публичное хранилище с фиксированным размером 10 ГБ.

Объектное S3-хранилище

Универсальное объектное хранилище,
совместимое с протоколом Amazon S3

Ручная загрузка изображений

Загрузка файла через интерфейс

  1. Войдите в панель Timeweb Cloud.
  2. Откройте бакет.
  3. Перейдите во вкладку «Объекты».
  4. Выберите изображение для загрузки или перетащите в поле загрузки.
  5. Скопируйте URL загруженного изображения.

2024 11 27 10 03 03

Проверка доступности изображения

Создайте HTML-файл:

  
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Тест изображения</title> </head> <body> <h1>Тест изображения</h1> <img src="ссылка_на_изображение" alt="Мое первое изображение"> </body> </html>

Откройте HTML-файл в браузере. Если изображение отображается, загрузка выполнена успешно.

Установка Laravel и подключение S3

Установка Laravel

Установите Laravel с помощью Composer:

  
composer create-project laravel/laravel:^8.0 laravel-s3.loc

Установка пакета для работы с S3

Установите библиотеку Flysystem:

  
composer require league/flysystem-aws-s3-v3 "^1.0"

Настройка диска S3

В файле config/filesystems.php найдите раздел с ключом s3 и создайте новый, например, tws3. Это удобно, если планируете использовать несколько облачных хранилищ или хотите отличить настройки Timeweb Cloud от других:

  
'tws3' => [ 'driver' => 's3', // Этот параметр остается неизменным 'key' => env('TW_ACCESS_KEY_ID'), // Указываем переменную окружения для ключа доступа 'secret' => env('TW_SECRET_ACCESS_KEY'), // Указываем переменную окружения для секретного ключа 'region' => env('TW_DEFAULT_REGION'), // Регион Timeweb Cloud 'bucket' => env('TW_BUCKET'), // Имя бакета 'url' => env('TW_URL'), // URL для доступа к бакету 'endpoint' => env('TW_ENDPOINT'), // Кастомный endpoint для Timeweb S3 ],

Настройка tws3

Почему важно копировать диск и переименовывать ключи?

  • Управляемость: Если понадобится добавить другое S3-хранилище (например, от Amazon или Google), вы сможете легко переключаться между настройками.
  • Гибкость: Уникальные настройки под каждого провайдера позволяют избегать конфликтов в конфигурации.
  • Читабельность: Переименование ключа (например, в tws3) помогает понять, что этот диск настроен специально для Timeweb Cloud S3.

Добавление ключей в .env

В корневой файл .env вашего проекта добавьте переменные окружения:

  
TW_ACCESS_KEY_ID=ваш_ключ # S3 Access Key TW_SECRET_ACCESS_KEY=ваш_секрет # S3 Secret Access Key TW_DEFAULT_REGION=регион_s3 # Регион Timeweb Cloud TW_BUCKET=имя_бакета # Имя бакета TW_ENDPOINT=https://s3.twcstorage.ru # URL Timeweb S3

Добавьте значения переменных из настроек бакета.

63b0fd01 6d91 40f6 8d8c 6ad523075170

Должно получиться примерно так:

Настройки бакета

Почему важно добавлять ключи в .env?

  • Безопасность: Хранение конфиденциальной информации (ключей доступа) в .env защищает их от попадания в публичные репозитории (например, GitHub), так как этот файл обычно добавляют в .gitignore.

  • Удобство: Все параметры конфигурации собраны в одном месте, что облегчает их редактирование при переходе на другой провайдер или изменении настроек.

  • Гибкость: При переносе проекта на другой сервер вам достаточно обновить только файл .env, не меняя исходный код.

Загрузка файлов в S3

Через маршрут

Добавьте маршрут в файл routes/web.php:

  
use Illuminate\Support\Facades\Storage; Route::get('/upload', function () { Storage::disk('tws3')->put('image1.jpg', file_get_contents(public_path('image.jpg'))); return 'Файл загружен!'; });

Скопируйте изображение с названием image.jpg в папку public.

Запустите встроенный сервер для локальной разработки с помощью команды:

  
php artisan serve

Теперь ваше приложение будет доступно по адресу http://127.0.0.1:8000 или localhost:8000. В дальнейшем в инструкции будет использоваться адрес localhost.

Откройте страницу http://localhost:8000/upload в браузере. Если отображается строка «Файл загружен!», загрузка выполнена успешно. Загрузку файла можно проверить в интерфейсе Timeweb Cloud.

2024 11 27 10 17 45

Через форму

Добавьте маршрут для отображения формы в файл routes/web.php:

  
Route::get('/form', function () { return view('form'); });

Создайте файл resources/views/form.blade.php:

  
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Загрузка файла через форму</title> </head> <body> <form action="/upload-form" method="POST" enctype="multipart/form-data"> @csrf <input type="file" name="image" required> <button type="submit">Загрузить</button> </form> </body> </html>

Добавьте маршрут для обработки загрузки изображения:

  
Route::post('/upload-form', function (Illuminate\Http\Request $request) { $path = $request->file('image')->store('', 'tws3'); return 'Файл загружен через форму!'; });

Откройте страницу http://localhost:8000/form в браузере. Выберите файл и нажмите «Загрузить». Если отображается строка «Файл загружен через форму!», загрузка выполнена успешно.

Оптимизация загрузки

Мы можем уменьшить размеры изображений для экономии места в хранилище.

Установите библиотеку Intervention Image:

  
composer require intervention/image:^2

Оптимизируйте изображение перед загрузкой:

  
Route::post('/upload-form', function (Illuminate\Http\Request $request) { $image = Image::make($request->file('image')) ->resize(800, 600) ->encode('jpg'); Storage::disk('tws3')->put('optimized-image.jpg', $image); return 'Файл загружен и оптимизирован через форму!'; });

2024 11 27 10 24 08

Отображение изображений из S3 через фасад Storage

Для демонстрации добавьте следующий маршрут в routes/web.php:

  
use Illuminate\Support\Facades\Storage; Route::get('/view-file', function () { $url = Storage::disk('tws3')->url('image1.jpg'); // Укажите имя файла, загруженного в S3 return view('view-file', ['url' => $url]); });

Создайте файл resources/views/view-file.blade.php с содержимым:

  
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Отображение файла из S3</title> </head> <body> <h1>Ваш файл из S3</h1> <img src="{{ $url }}" alt="Файл из S3" style="max-width: 100%; height: auto;"> </body> </html>

Откройте страницу http://localhost:8000/view-file в браузере и запустите инспектор кода, нажав клавишу F12. Перейдите на вкладку «Elements» и найдите тег <img>. В атрибуте src вы увидите ссылку, указывающую на файл, хранящийся в S3. Это подтверждает успешное отображение изображения из облачного хранилища.

2024 11 27 20 47 58

Использование S3 для хранения аватаров пользователей

В этом разделе мы рассмотрим, как настроить загрузку и хранение аватаров пользователей в облачном хранилище S3. Аватар будет привязан к пользователю через модель User, а ссылка на файл будет сохраняться в базе данных SQLite.

  1. Установите SQLite командой:
  
apt install php8.3-sqlite3
  1. Создайте файл базы данных: database/database.sqlite.
  2. Настройте подключение в базе данных в файле .env:
  
DB_CONNECTION=sqlite DB_DATABASE=/путь/до/проекта/laravel-s3.loc/database/database.sqlite DB_USERNAME=null DB_PASSWORD=null
  1. Перезагрузите встроенный сервер. Для этого просто нажмите Ctrl + C в терминале, где запущен сервер и запустите сервер еще раз:
  
php artisan serve

Подготовка базы данных

Для начала создадим новое поле avatar в таблице users для хранения ссылки на аватар в облаке.

  1. Создайте миграцию командой:
  
php artisan make:migration add_avatar_to_users_table --table=users
  1. Добавьте в миграцию database/migrations/<временная_метка>_add_avatar_to_users_table.php следующий код:
  
public function up() { Schema::table('users', function (Blueprint $table) { $table->string('avatar')->nullable(); // Поле для ссылки на файл аватара в S3 }); } public function down() { Schema::table('users', function (Blueprint $table) { $table->dropColumn('avatar'); }); }
  1. Выполните миграцию для применения изменений:
  
php artisan migrate

Подготовка пользователя

Для тестирования создадим пользователя через консоль Tinker — это интерактивная оболочка Laravel, которая позволяет выполнять команды и взаимодействовать с моделями напрямую.

  1. Запустите Tinker:
  
php artisan tinker
  1. Создайте нового пользователя:
  
User::create(["name"=> "s3","email"=>"s3@email.com","password"=>bcrypt("123456")]);

2024 11 28 11 04 36

После выполнения команды вы увидите созданного пользователя. Ему будет присвоен идентификатор 1, который мы будем использовать в следующих примерах. Если ID отличается, замените его в коде на актуальный.

Подготовка маршрутов

Добавим три маршрута в файл routes/web.php для отображения профиля, загрузки аватара и обработки формы.

  1. Маршрут для отображения профиля пользователя:
  
use App\Models\User; Route::get('/profile', function () { $user = User::find(1); // Используем ID ранее созданного пользователя return view('profile.index', ['user' => $user]); });
  1. Маршрут для формы загрузки аватара:
  
Route::get('/profile/create', function () { return view('profile.create'); });
  1. Маршрут для обработки формы и загрузки аватара в S3:
  
use Illuminate\Http\Request; Route::post('/profile/store', function (Request $request) { $user = User::find(1); // Используем ID ранее созданного пользователя $path = $request->file('avatar')->store('avatars', 'tws3'); // Загрузка файла в S3 в папку avatars $user->avatar = $path; // Сохраняем путь к файлу в базе данных $user->save(); return redirect('/profile'); });

Подготовка шаблонов

Для удобства все шаблоны будут храниться в папке resources/views/profile.

  1. Шаблон формы для загрузки аватара (resources/views/profile/create.blade.php):
  
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Создание пользователя</title> </head> <body> <form action="/profile/store" method="POST" enctype="multipart/form-data"> @csrf <label for="avatar">Выберите изображение:</label> <input type="file" name="avatar" id="avatar" required> <button type="submit">Загрузить</button> </form> </body> </html>
  1. Шаблон профиля пользователя (resources/views/profile/index.blade.php):
  
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Профиль пользователя</title> </head> <body> <h1>Профиль пользователя</h1> <p>{{$user->name}}</p> <!-- Отображение аватара --> @if ($user->avatar) <img src="{{ Storage::disk('tws3')->url($user->avatar) }}" alt="Аватар" style="width: 150px; height: 150px; border-radius: 50%;"> @else <p>Аватар отсутствует.</p> @endif </body> </html>

2024 11 28 11 08 38

Теперь у вас настроена загрузка и отображение аватаров пользователей через S3.

  1. Перейдите на страницу /profile/create и загрузите аватар.
  2. После успешной загрузки вы будете перенаправлены на страницу /profile, где можно увидеть аватар.
  3. Чтобы убедиться, что аватар загружается из S3, откройте инспектор кода (нажмите F12) в браузере. Перейдите на вкладку «Elements» и найдите тег <img>. В атрибуте src вы увидите ссылку, указывающую на файл, хранящийся в S3.

Выгодные тарифы на облако в Timeweb Cloud

  • Premium 3.3 ГГц
  • Dedicated CPU
Москва
12 мес Скидка 10%
Cloud MSK 30

495 ₽/мес

Процессор
1 x 3.3 ГГц
Память
2 ГБ
NVMe
30 ГБ
Канал
1 Гбит/с
Публичный IP
Cloud MSK 40

765 ₽/мес

Процессор
2 x 3.3 ГГц
Память
2 ГБ
NVMe
40 ГБ
Канал
1 Гбит/с
Публичный IP

Заключение

Интеграция Laravel с Timeweb Cloud S3 предоставляет гибкие и безопасные возможности для хранения данных. Следуя этой инструкции, вы освоите подключение S3-совместимого хранилища, научитесь загружать файлы через интерфейс, маршруты и формы, а также настраивать отображение файлов, таких как аватары пользователей.

Эти решения помогут вам:

  • Сократить затраты на хранение медиафайлов благодаря использованию облака.
  • Обеспечить надежность и защиту данных с минимальными усилиями.
  • Повысить масштабируемость вашего проекта, без необходимости беспокоиться о серверных ограничениях.

Теперь ваше Laravel-приложение готово к работе с S3-хранилищем, что позволяет сосредоточиться на развитии функциональности и удобстве для пользователей.

30 ноября 2024 г.
425
12 минут чтения
Средний рейтинг статьи: 5

Читайте также

Хотите внести свой вклад?
Участвуйте в нашей контент-программе за
вознаграждение или запросите нужную вам инструкцию
img-server
  • Ваш комментарий
  • Предпросмотр
Комментарии 1
Компания
Компания
01.04.2025, 23:13

на Intervention\Image V3 немного по другому работает

$image = Image::read($upload)-&gt;resize(800, 600)-&gt;toJpeg();

Произошла неизвестная ошибка
Мы используем на сайте куки.
В интернете без них никак