Hogar Cómo usar el almacenamiento de objetos Vultr en Laravel

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 elOndrejrepositorios 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

Instale 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íneauser = www-dataauser = website.

    • cambiar la lineagroup = www-dataagroup = website.

    • cambiar la linealisten = /run/php/php8.1-fpm.sockalisten = /run/php/php8.1-fpm-website.sock.

    Guarda el archivo y cierra.

  6. Abre elphp.inihora de oficina.

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

    Aumente el tamaño máximo de archivo de carga de PHP cambiandoupload_max_filesize = 2Maupload_max_filesize = 10Mypost_max_size = 8Mapost_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 example.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/example.com-access.log;

    error_log  /var/log/example.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 dominioexample.coma 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 enPortal de clientes Vultr.

  2. Navegar aProductos -> Objetos.

  3. Agregar almacenamiento de objetosy 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 lanombre de hostlaLlave secretalaLlave de accesoy elNombre del depósito.

Crear portal web

Para las tareas restantes, debe ejecutarlas usando elwebsiteusuario. 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.envhora de oficina.

$ nano .env

Cambiar elFILESYSTEM_DISKvalor uns3. 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_ENDPOINTes su nombre de host de almacenamiento de objetos Vultr.

  • AWS_ACCESS_KEY_IDes su clave de acceso al almacenamiento de objetos Vultr.

  • AWS_SECRET_ACCESS_KEYes su clave secreta de almacenamiento de objetos Vultr.

  • AWS_BUCKETes 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 elresources/css/app.cssarchivo y agregue las directivas Tailwind CSS.

@tailwind base;

@tailwind components;

@tailwind utilities;

Agregar JavaScript

Abre elresources/js/app.jsarchivo y agregue el siguiente código:

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

    if( this.files.length > 0 ){

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

    }

});

Crear vistas

Crearresources/views/gallery.blade.phparchivo 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 unGalleryController.

$ php artisan make:controller GalleryController

Abre elGalleryControllerhora de oficina.

$ nano app/Http/Controllers/GalleryController.php

Carga elStoragefachada en elGalleryControllerexpediente. Contiene un conjunto de funciones que necesita para interactuar con Object Storage.

use IlluminateSupportFacadesStorage;

Crear elindexacción. Muestra el formulario de carga y enumera todas las imágenes delgallerycarpeta en su cubo. utiliza elfilesmétodo de laStoragefachada para obtener una matriz de todos los archivos en un directorio.

public function index()

{

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

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

}

Crear eluploadacción. Maneja cuando un usuario sube sus imágenes. Valida el archivo y luego lo almacena en Vultr Object Storage usando elputFilemétodo de laStoragefachada.

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 delGalleryControllerhora de oficina:

<?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

Abiertoroutes/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 suAlmacenamiento de objetos Vultry 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

  • Almacenamiento de objetos Vultr.

  • Almacenamiento de archivos Laravel.

  • Instale Let's Encrypt.

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

Enviar sugerencia

Artículos Relacionados

combine-first-name-and-last-name-or-split-a-name-in-Google-Sheets.png

Cómo combinar nombre y apellido o dividir un nombre en Google Sheets

Google Sheets tiene una serie de funciones para hacer su vida diaria mucho más fácil. La mayoría de la gente necesita romper...
Deploying-WordPress-on-Terraform-Using-the-Liquid-Web-CLI.png

Implementación de WordPress en Terraform utilizando Liquid Web CLI

Implementar WordPress en Terraform usando la interfaz de línea de comandos (CLI) de Liquid Web es similar a usar cualquier otra CLI. Vamos…
Terraform-Example-with-WordPress-on-Infrastructure-as-Code-IaC.png

Ejemplo de Terraform con WordPress sobre infraestructura como código (IaC)

Implementar y administrar un sitio web robusto de WordPress en plataformas en la nube como Liquid Web o AWS se vuelve mucho más fácil cuando...
Using-the-Liquid-Web-Command-Line-Interface-LW-CLI.png

Uso de la interfaz de línea de comandos de Liquid Web (LW CLI)

¿Qué es la interfaz de línea de comandos web líquida (LW CLI)? Esta es la interfaz de línea de comando oficial para Liquid...
1697212207_mount-iso-file-linux-01-mount-iso-ubuntu-800x497.png

Cómo montar un archivo ISO en Linux

El estándar ISO 9660 es uno de los formatos más populares para distribuir imágenes de datos de CD y DVD en línea. En…
calculate-age-with-Google-Sheets-Microsoft-Excel.png

Cómo calcular la edad con Google Sheets, Microsoft Excel o cualquier otro programa de hoja de cálculo

La fecha de nacimiento es un atributo importante que a menudo necesitamos compartir al unirnos a una nueva empresa, obtener un…
get-ChatGPT-responses-on-Telegram.png

¿Cómo obtener respuestas de ChatGPT en Telegram?

ChatGPT es una de las iteraciones más poderosas de Internet y hoy podemos obtener resultados para nuestra búsqueda...
use-the-SUMIF-and-SUMIFS-functions-in-Microsoft-Excel-and-Google-Sheets.png

¿Cómo utilizar las funciones SUMAR.SI y SUMAR.SI en Microsoft Excel y Google Sheets? Una breve guía para la suma condicional en programas de hojas de cálculo

Si está tratando con un gran conjunto de datos en una oficina, debe utilizar Microsoft Excel, Google…
Create-and-Delete-folders.jpg

Cómo crear y eliminar directorios en la terminal

Puede crear fácilmente directorios/carpetas en Linux usando un administrador de archivos gráfico, pero si prefiere usar el comando...
Creating-a-Liquid-Web-Cloud-API-Token-in-the-my.liquidweb-Interface.png

Creación de un token API de Liquid Web Cloud en la interfaz my.liquidweb

La nube de Liquid Web tiene una sólida interfaz de programación de aplicaciones (API) que permite acceder a su cuenta desde fuera de la interfaz my.BYNSS. Para…