Cómo usar el almacenamiento de objetos Vultr en Laravel

Introducción

Laravel tiene una poderosa abstracción de almacenamiento de archivos para interactuar con muchos tipos de sistemas de archivos. Admite almacenamiento en la nube compatible con S3 como Vultr Object Storage para almacenar archivos estáticos.

Esta guía explica cómo configurar el sistema de almacenamiento de archivos Laravel para Vultr Object Storage y usarlo para almacenar archivos que los usuarios cargan desde un portal web.

requisitos previos

Antes de comenzar, debe:

Instalar Nginx y PHP

Añade el ondrej repositorios para obtener la última versión de Nginx y PHP.

                      
                        $ sudo add-apt-repository -y ppa:ondrej/php

$ sudo add-apt-repository -y ppa:ondrej/nginx-mainline

$ sudo apt update

                      
                    

Instala Nginx.

                      
                        $ sudo apt install nginx

                      
                    

Instala PHP y sus extensiones.

                      
                        $ sudo apt install php-{cli,fpm,mysql,gd,soap,mbstring,bcmath,common,xml,curl,imagick,zip}

                      
                    

Instalar Compositor.

                      
                        $ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

$ php composer-setup.php

$ php -r "unlink('composer-setup.php');"

$ sudo mv composer.phar /usr/local/bin/composer

                      
                    

Configurar PHP

  1. Cree un nuevo usuario para el grupo PHP FastCGI Process Manager (PHP-FPM). Este usuario ejecuta el proceso PHP-FPM y tiene la propiedad de los archivos del sitio web. Agrega seguridad adicional y aislamiento a su sitio web.

                              
                                $ sudo adduser website
    
    $ sudo usermod -a -G website www-data
    
                              
                            
  2. Crear el directorio del sitio web.

                              
                                $ sudo mkdir /var/www/website
    
                              
                            
  3. Cambiar la propiedad del directorio.

                              
                                $ sudo chown website:website /var/www/website
    
                              
                            
  4. Copie la configuración predeterminada del grupo de PHP-FPM como plantilla para el nuevo grupo.

                              
                                $ sudo cp /etc/php/8.1/fpm/pool.d/www.conf /etc/php/8.1/fpm/pool.d/website.conf
    
                              
                            
  5. Abra el archivo de configuración del grupo.

                              
                                $ sudo nano /etc/php/8.1/fpm/pool.d/website.conf
    
                              
                            

    Agregue los siguientes cambios.

    • Cambiar el nombre del grupo [www] a [website] .

    • cambiar la línea user = www-data a user = website .

    • cambiar la linea group = www-data a group = website .

    • cambiar la linea listen = /run/php/php8.1-fpm.sock a listen = /run/php/php8.1-fpm-website.sock .

    Guarda el archivo y cierra.

  6. Abre el php.ini expediente.

                              
                                $ sudo nano /etc/php/8.1/fpm/php.ini
    
                              
                            

    Aumente el tamaño máximo de archivo de carga de PHP cambiando upload_max_filesize = 2M a upload_max_filesize = 10M y post_max_size = 8M a post_max_size = 10M .

  7. Elimine la configuración predeterminada del grupo PHP-FPM.

                              
                                $ sudo rm /etc/php/8.1/fpm/pool.d/www.conf
    
                              
                            
  8. Reinicie PHP-FPM.

                              
                                $ sudo systemctl restart php8.1-fpm
    
                              
                            

Configurar Nginx

  1. Deshabilite la configuración predeterminada de Nginx.

                              
                                $ sudo unlink /etc/nginx/sites-enabled/default
    
                              
                            
  2. Cree un nuevo archivo de configuración de Nginx.

                              
                                $ sudo nano /etc/nginx/sites-available/website
    
                              
                            
  3. Agregue las siguientes configuraciones.

                              
                                server {
    
        listen 80;
    
        listen [::]:80;
    
    
    
        server_name googlesyndication.com;
    
    
    
        root /var/www/website/public;
    
    
    
        index index.html index.htm index.php;
    
    
    
        charset utf-8;
    
    
    
        client_max_body_size 10m;
    
        client_body_timeout 60s;
    
    
    
        location / {
    
            try_files $uri $uri/ /index.php?$query_string;
    
        }
    
    
    
        location = /favicon.ico { access_log off; log_not_found off; }
    
        location = /robots.txt  { access_log off; log_not_found off; }
    
    
    
        access_log /var/log/googlesyndication.com-access.log;
    
        error_log  /var/log/googlesyndication.com-error.log error;
    
    
    
        error_page 404 /index.php;
    
    
    
        location ~ .php$ {
    
            include snippets/fastcgi-php.conf;
    
            fastcgi_pass unix:/run/php/php8.1-fpm-website.sock;
    
            fastcgi_buffers 32 32k;
    
            fastcgi_buffer_size 32k;
    
        }
    
    }
    
                              
                            

    Asegúrate de cambiar el nombre de dominio googlesyndication.com a tu dominio. Guarda el archivo y cierra.

  4. Habilite la configuración de Nginx.

                              
                                $ sudo ln -s /etc/nginx/sites-available/website /etc/nginx/sites-enabled/
    
                              
                            
  5. Permita Nginx en el firewall.

                              
                                $ sudo ufw allow 'Nginx Full'
    
                              
                            
  6. Reinicie Nginx.

                              
                                $ sudo systemctl restart nginx
    
                              
                            

Instalar Node.js

Laravel necesita Node.js para compilar sus activos front-end. Instale la última versión de Node.js con el administrador de paquetes Snap.

                      
                        $ sudo snap install core

$ sudo snap refresh core

$ sudo snap install --classic node

                      
                    

Crear almacenamiento de objetos

  1. Iniciar sesión en Portal de clientes Vultr .

  2. Navegar a Productos -> Objetos .

  3. Agregar almacenamiento de objetos y ponle una etiqueta.

  4. Haga clic en su almacenamiento de objetos y vaya a la pestaña Cubo.

  5. Cree un depósito y asígnele un nombre.

  6. Toma nota de la nombre de host la Llave secreta la Llave de acceso y el Nombre del depósito .

Crear portal web

Para las tareas restantes, debe ejecutarlas usando el website usuario. Cambie el usuario ejecutando el siguiente comando.

                      
                        $ sudo su website

                      
                    

Crear nuevo proyecto Laravel

Ir al directorio del sitio web.

                      
                        $ cd /var/www/website

                      
                    

Usa Composer para crear un nuevo proyecto de Laravel.

                      
                        $ composer create-project laravel/laravel .

                      
                    

Configurar el sistema de archivos Laravel

El almacenamiento de archivos Laravel tiene un controlador S3 para interactuar con el almacenamiento en la nube compatible con S3, como Vultr Object Storage. Requiere el paquete Flysystem S3. Instálelo a través del administrador de paquetes Composer.

                      
                        $ composer require league/flysystem-aws-s3-v3 "^3.0"

                      
                    

Abre el .env expediente.

                      
                        $ nano .env

                      
                    

Cambiar el FILESYSTEM_DISK valor a s3 . Le dice al almacenamiento de archivos de Laravel que use el controlador S3.

                      
                        FILESYSTEM_DISK=s3

                      
                    

Agregue las credenciales de Vultr Object Storage a las variables de entorno.

                      
                        AWS_ENDPOINT=https://sgp1.vultrobjects.com

AWS_ACCESS_KEY_ID=1234567890ABCDEFGH

AWS_SECRET_ACCESS_KEY=ABCDEFGHIJKLMNOPQ

AWS_BUCKET=example

                      
                    

Descripción de las credenciales:

  • AWS_ENDPOINT es su nombre de host de almacenamiento de objetos Vultr.

  • AWS_ACCESS_KEY_ID es su clave de acceso al almacenamiento de objetos Vultr.

  • AWS_SECRET_ACCESS_KEY es su clave secreta de almacenamiento de objetos Vultr.

  • AWS_BUCKET es su nombre de depósito de almacenamiento de objetos Vultr.

Añadir Tailwind CSS

Esta guía utiliza Tailwind CSS para el marco CSS. Instálelo a través de NPM.

                      
                        $ npm install -D tailwindcss postcss autoprefixer

                      
                    

Cree y abra el archivo de configuración Tailwind CSS.

                      
                        $ npx tailwindcss init -p

$ nano tailwind.config.js

                      
                    

Cambia el contenido a:

                      
                        /** @type {import('tailwindcss').Config} */

module.exports = {

  content: [

    "./resources/**/*.blade.php",

    "./resources/**/*.js",

  ],

  theme: {

    extend: {},

  },

  plugins: [],

}

                      
                    

Abre el resources/css/app.css archivo y agregue las directivas Tailwind CSS.

                      
                        @tailwind base;

@tailwind components;

@tailwind utilities;

                      
                    

Agregar JavaScript

Abre el resources/js/app.js archivo y agregue el siguiente código:

                      
                        document.getElementById('fileImage').addEventListener('change',function(){

    if( this.files.length > 0 ){

        document.getElementById('uploadBtn').removeAttribute('disabled');

    }

});

                      
                    

Crear vistas

Crear resources/views/gallery.blade.php archivo con el siguiente contenido:

                      
                        <html>

    <head>

        <title>Gallery</title>



        @vite(['resources/css/app.css', 'resources/js/app.js'])

    </head>

    <body>

        <div class="max-w-7xl m-auto">

            <h1 class="text-3xl font-bold text-gray-900 text-center py-8 uppercase">Gallery</h1>

            <form action="" method="post" enctype="multipart/form-data" class="flex flex-wrap text-center items-center justify-center p-4 rounded-lg items-center">

                @csrf

                <label class="block">

                  <input id="fileImage" type="file" name="fileImage" class="block w-full text-sm text-slate-500 pr-6

                    file:cursor-pointer

                    file:mr-4 file:py-2 file:px-4

                    file:rounded-full file:border-0

                    file:text-sm file:font-semibold

                    file:bg-indigo-50 file:text-indigo-700

                    hover:file:bg-indigo-100

                  "/>

                  @if ($errors->has('fileImage'))

                    <span class="block text-red-700 py-4 text-left">{{ $errors->first('fileImage') }}</span>

                  @endif

                </label>

                <button id="uploadBtn" disabled class="rounded border border-transparent bg-indigo-600 px-6 py-2 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50" type="submit">

                    Upload Image

                </button>

            </form>



            <div class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">

                @foreach ($images as $image)

                    <div>

                        <img class="rounded" src="">

                    </div>

                @endforeach

            </div>

        </div>

    </body>

</html>

                      
                    

Compile los activos front-end.

                      
                        $ npm run build

                      
                    

Crear controlador

Crear un GalleryController .

                      
                        $ php artisan make:controller GalleryController

                      
                    

Abre el GalleryController expediente.

                      
                        $ nano app/Http/Controllers/GalleryController.php

                      
                    

Carga el Storage fachada en el GalleryController expediente. Contiene un conjunto de funciones que necesita para interactuar con Object Storage.

                      
                        use IlluminateSupportFacadesStorage;

                      
                    

Crear el index acción. Muestra el formulario de carga y enumera todas las imágenes del gallery carpeta en su cubo. utiliza el files método de la Storage fachada para obtener una matriz de todos los archivos en un directorio.

                      
                        public function index()

{

    $images = Storage::files('gallery');

    return view('gallery', compact('images'));

}

                      
                    

Crear el upload acción. Maneja cuando un usuario sube sus imágenes. Valida el archivo y luego lo almacena en Vultr Object Storage usando el putFile método de la Storage fachada.

                      
                        public function upload(Request $request)

{

    $validated = $request->validate([

        'fileImage' => 'required|image',

    ]);



    Storage::putFile('gallery', $validated['fileImage'], 'public');



    return redirect("https://www.vultr.com/");

}

                      
                    

El siguiente es el contenido completo del GalleryController expediente:

                      
                        <?php



namespace AppHttpControllers;



use IlluminateHttpRequest;

use IlluminateSupportFacadesStorage;



class GalleryController extends Controller

{

    public function index()

    {

        $images = Storage::files('gallery');



        return view('gallery', compact('images'));

    }



    public function upload(Request $request)

    {

        $validated = $request->validate([

            'fileImage' => 'required|image',

        ]);



        Storage::putFile('gallery', $validated['fileImage'], 'public');



        return redirect("https://www.vultr.com/");

    }

}

                      
                    

Definición de rutas

Abierto routes/web.php .

                      
                        $ nano routes/web.php

                      
                    

Actualízalo con el siguiente código:

                      
                        <?php

use IlluminateSupportFacadesRoute;

use AppHttpControllersGalleryController;



Route::get("https://www.vultr.com/", [GalleryController::class, 'index']);

Route::post("https://www.vultr.com/", [GalleryController::class, 'upload']);

                      
                    

Portal web de prueba

  1. Abre tu dominio en un navegador.

  2. Debería ver el formulario de carga.

  3. Subir una imagen.

  4. Compruebe si la imagen aparece en su Almacenamiento de objetos Vultr y la galería debajo del formulario de carga.

Portal web seguro con Let’s Encrypt

Let’s Encrypt proporciona un certificado SSL gratuito para su sitio web. Para generar el certificado, debe utilizar la herramienta de software Certbot.

  1. Instale Certbot.

                              
                                $ sudo snap install core; sudo snap refresh core
    
    $ sudo snap install --classic certbot
    
    $ sudo ln -s /snap/bin/certbot /usr/bin/certbot
    
                              
                            
  2. Genere el certificado SSL.

                              
                                $ sudo certbot --nginx
    
                              
                            
  3. Visite su dominio en el navegador y confirme que tiene una conexión HTTPS.

El certificado de Let’s Encrypt caduca después de 90 días. Certbot agrega el comando de renovación al temporizador systemd o Cron Job para renovar el certificado automáticamente antes de que caduque. Puedes verificarlo con los siguientes comandos:

                      
                        $ systemctl list-timers | grep 'certbot|ACTIVATES'

$ ls -l /etc/cron.d/certbot

                      
                    

Conclusión

El almacenamiento de archivos de Laravel proporciona una interfaz única para interactuar con diferentes sistemas de almacenamiento. Tiene un controlador S3 que puede usar para integrar Vultr Object Storage en Laravel.

Otras lecturas

Título del artículo Nombre (opcional) Correo electrónico (opcional) Descripción

Enviar sugerencia

Related Posts