主机百科
一、介绍
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 中。
