如何在 Laravel 中使用 Vultr 对象存储

文章目录 隐藏

一、介绍

十、结论

一、介绍

Laravel具有强大的文件存储抽象功能，可以与许多类型的文件系统进行交互。它支持与 S3 兼容的云存储，如 Vultr 对象存储来存储静态文件。

本指南介绍如何为 Vultr 对象存储配置 Laravel 文件存储系统，以及如何使用它来存储用户从 Web 门户上传的文件。

二、准备工作

在开始之前，您应该：

在 Vultr 部署 Ubuntu 22.04 服务器。
创建具有 sudo 权限的非 root 用户。

三、安装 Nginx 和 PHP

添加 ondrej 存储库以获取最新版本的 Nginx 和 PHP。

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

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

$ sudo apt update

安装 Nginx。

$ sudo apt install nginx

安装 PHP 及其扩展。

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

安装编辑器。

$ 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

四、配置 PHP

为 PHP FastCGI 进程管理器（PHP-FPM）池创建一个新用户。此用户运行 PHP-FPM 进程并拥有网站文件所有权。它为您的网站增加了额外的安全性和隔离性。
```
$ sudo adduser website

$ sudo usermod -a -G website www-data
```
创建网站目录。
```
$ sudo mkdir /var/www/website
```

更改目录所有权。

$ sudo chown website:website /var/www/website

复制默认的 PHP-FPM 池配置作为新池的模板。

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

打开池配置文件。
```
$ sudo nano /etc/php/8.1/fpm/pool.d/website.conf
```
添加以下更改。
- 将池名称更改为。[www][website]
- 将行更改为。user = www-datauser = website
- 将行更改为。group = www-datagroup = website
- 将行更改为。listen = /run/php/php8.1-fpm.socklisten = /run/php/php8.1-fpm-website.sock
保存文件并退出。
打开文件。php.ini
```
$ sudo nano /etc/php/8.1/fpm/php.ini
```
通过更改toandto来增加PHP最大上传文件大小。upload_max_filesize = 2Mupload_max_filesize = 10Mpost_max_size = 8Mpost_max_size = 10M

删除默认的 PHP-FPM 池配置。

$ sudo rm /etc/php/8.1/fpm/pool.d/www.conf

重新启动 PHP-FPM。
```
$ sudo systemctl restart php8.1-fpm
```

五、配置 Nginx

禁用默认的 Nginx 配置。

$ sudo unlink /etc/nginx/sites-enabled/default

创建一个新的 Nginx 配置文件。

$ sudo nano /etc/nginx/sites-available/website

添加以下配置。

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;

    }

}

请确保将域名更改为您的域。保存文件并退出。example.com

启用 Nginx 配置。

$ sudo ln -s /etc/nginx/sites-available/website /etc/nginx/sites-enabled/

允许防火墙中的 Nginx。
```
$ sudo ufw allow 'Nginx Full'
```
重新启动 Nginx。
```
$ sudo systemctl restart nginx
```

六、安装节点.js

Laravel需要Node.js来编译其前端资产。使用 Snap 包管理器安装最新的 Node.js 版本。

$ sudo snap install core

$ sudo snap refresh core

$ sudo snap install --classic node

七、创建对象存储

登录Vultr 客户门户。
导航到“产品”-“>对象”。
添加对象存储并为其提供标签。
单击您的对象存储并导航到存储桶选项卡。
创建一个存储桶并为其命名。
记下主机名、私有密钥、访问密钥和存储桶名称。

八、创建门户网站

对于其余任务，您需要使用用户运行它们。通过运行以下命令更改用户。website

$ sudo su website

8.1、创建新的拉拉维尔项目

转到网站目录。

$ cd /var/www/website

使用Composer创建一个新的Laravel项目。

$ composer create-project laravel/laravel .

8.2、配置 Laravel 文件系统

Laravel文件存储有一个S3驱动程序，可以与S3兼容的云存储（如Vultr对象存储）进行交互。它需要 Flysystem S3 软件包。通过 Composer 包管理器安装它。

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

打开文件。.env

$ nano .env

将值更改为。它告诉Laravel文件存储使用S3驱动程序。FILESYSTEM_DISKs3

FILESYSTEM_DISK=s3

将 Vultr 对象存储凭证添加到环境变量。

AWS_ENDPOINT=https://sgp1.vultrobjects.com

AWS_ACCESS_KEY_ID=1234567890ABCDEFGH

AWS_SECRET_ACCESS_KEY=ABCDEFGHIJKLMNOPQ

AWS_BUCKET=example

凭据说明：

AWS_ENDPOINT是您的 Vultr 对象存储主机名。
AWS_ACCESS_KEY_ID是您的 Vultr 对象存储访问密钥。
AWS_SECRET_ACCESS_KEY是您的 Vultr 对象存储密钥。
AWS_BUCKET是您的 Vultr 对象存储桶名称。

8.3、添加 CSS

本指南使用 Tailwind CSS 作为 CSS 框架。通过 NPM 安装它。

$ npm install -D tailwindcss postcss autoprefixer

创建并打开顺风 CSS 配置文件。

$ npx tailwindcss init -p

$ nano tailwind.config.js

将内容更改为：

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

module.exports = {

  content: [

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

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

  ],

  theme: {

    extend: {},

  },

  plugins: [],

}

打开该文件并添加 Tailwind CSS 指令。resources/css/app.css

@tailwind base;

@tailwind components;

@tailwind utilities;

8.4、添加 JavaScript

打开文件并添加以下代码:resources/js/app.js

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

    if( this.files.length > 0 ){

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

    }

});

8.5、创建视图

创建包含以下内容的文件：resources/views/gallery.blade.php

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

编译前端资产。

$ npm run build

8.6、创建控制器

创建一个。GalleryController

$ php artisan make:controller GalleryController

打开文件。GalleryController

$ nano app/Http/Controllers/GalleryController.php

在文件中加载外观。它包含与对象存储交互所需的一组函数。StorageGalleryController

use Illuminate\Support\Facades\Storage;

创建操作。它显示上传表单并列出存储桶中文件夹中的所有图像。它使用外观中的方法获取目录中所有文件的数组。indexgalleryfilesStorage

public function index()

{

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

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

}

创建操作。它处理用户上传其图像的时间。它验证文件，然后使用外观中的方法将其存储在 Vultr 对象存储中。uploadputFileStorage

public function upload(Request $request)

{

    $validated = $request->validate([

        'fileImage' => 'required|image',

    ]);



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



    return redirect('/');

}

以下是文件的完整内容：GalleryController

<?php



namespace App\Http\Controllers;



use Illuminate\Http\Request;

use Illuminate\Support\Facades\Storage;



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('/');

    }

}

8.7、定义路由

打开。routes/web.php

$ nano routes/web.php

使用以下代码更新它：

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\GalleryController;



Route::get('/', [GalleryController::class, 'index']);

Route::post('/', [GalleryController::class, 'upload']);

8.8、测试门户网站

在浏览器中打开您的域名。
您应该会看到上传表单。
上传图片。
检查图像是否出现在您的Vultr 对象存储和上传表单下方的库中。

九、使用“加密”保护 Web 门户

Let’s Encrypt为您的网站提供免费的SSL证书。要生成证书，您需要使用 Certbot 软件工具。

安装Certbot。

$ sudo snap install core; sudo snap refresh core

$ sudo snap install --classic certbot

$ sudo ln -s /snap/bin/certbot /usr/bin/certbot

生成 SSL 证书。
```
$ sudo certbot --nginx
```
在浏览器中访问您的域并确认它具有 HTTPS 连接。

让我们加密证书在 90 天后过期。Certbot 将续订命令添加到 systemd 计时器或 Cron 作业，以便在证书过期之前自动续订证书。您可以使用以下命令进行验证：

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

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

十、结论

Laravel文件存储提供了一个与不同存储系统交互的单一界面。它有一个 S3 驱动程序，您可以使用它来集成 Vultr 对象存储在 Laravel 中。

如何在 Laravel 中使用 Vultr 对象存储

一、介绍

二、准备工作

三、安装 Nginx 和 PHP

四、配置 PHP

五、配置 Nginx

六、安装节点.js

七、创建对象存储

八、创建门户网站

8.1、创建新的拉拉维尔项目

8.2、配置 Laravel 文件系统

8.3、添加 CSS

8.4、添加 JavaScript

8.5、创建视图

8.6、创建控制器

8.7、定义路由

8.8、测试门户网站

九、使用“加密”保护 Web 门户

十、结论

相关推荐

联系本站

最新文章

热门文章

热门标签

网站统计

其他操作