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

Бесплатный перенос IT-инфраструктуры в облако

30 ноября 2024 г.

12 минут чтения

Данная инструкция подробно описывает, как подключить 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

Зарегистрируйтесь в Timeweb Cloud.
Перейдите в раздел «Хранилище S3» → нажмите «Создать».
Выберите:

- Размер хранилища: фиксированный или произвольный.
- Тип бакета: приватный или публичный.

Нажмите кнопку «Заказать».

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

s3

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

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

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

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

Создайте 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
],

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

Управляемость: Если понадобится добавить другое 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.timeweb.cloud # URL Timeweb S3

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

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

Почему важно добавлять ключи в .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.

Через форму

Добавьте маршрут для отображения формы в файл 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 'Файл загружен и оптимизирован через форму!';
});

Отображение изображений из 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. Это подтверждает успешное отображение изображения из облачного хранилища.

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

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

Установите SQLite командой:

apt install php8.3-sqlite3

Создайте файл базы данных: database/database.sqlite.
Настройте подключение в базе данных в файле .env:

DB_CONNECTION=sqlite
DB_DATABASE=/путь/до/проекта/laravel-s3.loc/database/database.sqlite
DB_USERNAME=null
DB_PASSWORD=null

Перезагрузите встроенный сервер. Для этого просто нажмите Ctrl + C в терминале, где запущен сервер и запустите сервер еще раз:

php artisan serve

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

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

Создайте миграцию командой:

php artisan make:migration add_avatar_to_users_table --table=users

Добавьте в миграцию 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');
    });
}

Выполните миграцию для применения изменений:

php artisan migrate

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

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

Запустите Tinker:

php artisan tinker

Создайте нового пользователя:

User::create(["name"=> "s3","email"=>"s3@email.com","password"=>bcrypt("123456")]);

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

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

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

Маршрут для отображения профиля пользователя:

use App\Models\User;

Route::get('/profile', function () {
    $user = User::find(1); // Используем ID ранее созданного пользователя
    return view('profile.index', ['user' => $user]);
});

Маршрут для формы загрузки аватара:

Route::get('/profile/create', function () {
    return view('profile.create');
});

Маршрут для обработки формы и загрузки аватара в 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.

Шаблон формы для загрузки аватара (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>

Шаблон профиля пользователя (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>

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

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

Заключение

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

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

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

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

Хотите внести свой вклад?

Участвуйте в нашей контент-программе за
вознаграждение или запросите нужную вам инструкцию