はじめに
Web系自社開発企業への転職を目標にLaravel+VuejsでWebアプリケーションを作成しています！
今回は、【Laravel × AWS S3】でプロフィール機能を実装するまでの流れを解説していきます。
目次
はじめに
まずはじめに【AWS S3】でユーザ登録とバケットの作成を行ってください。
以下の記事を参考にしました。
- 環境変数の設定
作成した認証情報を使用して、下記のように環境変数を設定して下さい。
AWS_ACCESS_KEY_ID= csvの認証情報に記載されているAccess key ID
AWS_SECRET_ACCESS_KEY= csvの認証情報に記載されているSecret access key
AWS_DEFAULT_REGION=ap-northeast-1 （リージョンをアジアパシフィック東京で作成したため）
AWS_BUCKET= 作成したバケット名
- S3パッケージのインストール
以下のコマンドを実行してください。
composer require league/flysystem-aws-s3-v3
- ファイルシステムの編集
filesystems.php
return [
'default' => env('FILESYSTEM_DRIVER', 'local'),
'cloud' => env('FILESYSTEM_CLOUD', 's3'),
'disks' => [
'local' => [
'driver' => 'local',
'root' => storage_path('app'),
],
'public' => [
'driver' => 'local',
'root' => storage_path('app/public'),
'url' => env('APP_URL').'/storage',
'visibility' => 'public',
],
's3' => [
'driver' => 's3',
'key' => env('AWS_ACCESS_KEY_ID'),
'secret' => env('AWS_SECRET_ACCESS_KEY'),
'region' => env('AWS_DEFAULT_REGION'),
'bucket' => env('AWS_BUCKET'),
'url' => env('AWS_URL'),
'endpoint' => env('AWS_ENDPOINT'),
],
],
];
モデルを作成
- Userモデルとマイグレーションファイルの作成
php artisan make:model User --migration
- マイグレーションを編集
2014_10_12_000000_create_users_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateUsersTable extends Migration
{
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name')->unique();
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('twitter_id')->nullable();
$table->string('image')->nullable();
$table->string('password')->nullable();
$table->rememberToken();
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('users');
}
}
- マイグレーションファイルを実行してusersテーブルを作成
php artisan migrate
- リレーションの設定
User.php
class User extends Authenticatable
{
//略
protected $fillable = [
'name', 'email', 'password', 'twitter_id', 'image',
];
//略
}
ルーティングの追加
web.php
<?php
//認証系のルーティングを追加
Auth::routes();
//略
//ユーザーページ表示
Route::prefix('users')->name('users.')->group(function () {
Route::get('/{name}', 'UserController@show')->name('show');
//プロフィール編集画面
Route::get('/{name}/edit', 'UserController@edit')->name('edit');
//プロフィール編集処理
Route::patch('/{name}/update', 'UserController@update')->name('update');
Route::get('/{name}/likes', 'UserController@likes')->name('likes');
Route::get('/{name}/followings', 'UserController@followings')->name('followings');
Route::get('/{name}/followers', 'UserController@followers')->name('followers');
Route::middleware('auth')->group(function () {
Route::put('/{name}/follow', 'UserController@follow')->name('follow');
Route::delete('/{name}/follow', 'UserController@unfollow')->name('unfollow');
});
});
//略
コントローラーの作成
- 以下のコマンドを実行してコントローラーを作成する
php artisan make:controller UserController
- 作成したコントローラーにアクションを追加
UserController.php
//プロフィール編集処理
public function update(Request $request, string $name)
{
$user = User::where('name', $name)->first();
$all_request = $request->all();
if (isset($all_request['image'])) {
$profile_image = $request->file('image');
$upload_info = Storage::disk('s3')->putFile('image', $profile_image, 'public');
$all_request['image'] = Storage::disk('s3')->url($upload_info);
}
$user->fill($all_request)->save();
return redirect()->route('users.show', ["name" => $user->name]);
}
ビューを作成
edit.blade.php
//略
<form action="{{ route('users.update', ['name' => $user->name]) }}" method="POST" enctype="multipart/form-data">
@method('PATCH')
@csrf
{{-- 編集フォーム --}}
<label for="image">
<img src="{{ $user->image }}" id="img" class="img-fuild rounded-circle" width="80" height="80">
<input type="file" id="image" name="image" onchange="previewImage(this);" class="d-none">
</label>
<div class="md-form col-lg-6 col-md-7 col-sm-8 col-xs-10 mx-auto">
<label for="name">ユーザー名</label>
<input type="text" class="form-control" id="name" name="name" required value="{{ $user->name }}">
<small>3〜15文字で入力してください</small>
</div>
<div class="md-form col-lg-6 col-md-7 col-sm-8 col-xs-10 mx-auto">
<label for="email">メールアドレス</label>
<input type="text" class="form-control" id="email" name="email" required value="{{ $user->email }}">
</div>
<button type="submit" class="btn btn-block cyan darken-3 text-white col-lg-8 col-md-9 col-sm-10 col-xs-12 mx-auto mt-5 mb-5 waves-effect">
更新する
</button>
</form>
//略
user.blade.php
//略
<a href="{{ route('users.show', ['name' => $user->name]) }}" class="text-dark">
<img src="{{ $user->image }}" alt="Contact Person" class="img-fuild rounded-circle" width="60" height="60">
</a>
//略
card.blade.php
//略
<a href="{{ route('users.show', ['name' => $article->user->name]) }}" class="text-dark">
<img src="{{ $article->user->image }}" alt="Contact Person" class="img-fuild rounded-circle" width="60" height="60">
</a>
//略
エラー発生時に参考にしたサイト
- 【400 Bad Request】
- 【404 Not Found】