2020-06-29

AWSのS3にWebアプリケーションから直接画像を保存する方法

AWS S3

それでは早速説明していきます！

下記関連ページでは画像自体をローカルストレージに保存し、そのパスをデータベースに保存しました。画像を画面に表示させる場合はそのパスを利用しています。本記事では、画像の保存先をS3に変更するだけで基本的な実装は同じ程で話を進めますので、アプリケーションの構築方法は下記ページをご覧下さい。
また過去の画像アップロード関係の記事も貼っておきますのでご覧ください。

まず .env ファイルの下記項目を設定する必要があります。

#.env

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=ap-northeast-1
AWS_BUCKET=

リージョンをアジアパシフィック（東京）に設定している方はAWS_DEFAULT_REGIONを上記の様に設定してください。
AWS_BUCKETには作成したバケット名を入力してください。
AWS_ACCESS_KEY_IDとAWS_SECRET_ACCESS_KEYを設定していきます。

f:id:ryoryo1220:20200625165602p:plain
「サービス」から「IAM」をクリック

f:id:ryoryo1220:20200625171444p:plain
続いて「ユーザー」を選択

f:id:ryoryo1220:20200626101533p:plain
「ユーザー名」をクリック

f:id:ryoryo1220:20200626102117p:plain
「認証情報」タブから「アクセスキーの作成」をクリック

f:id:ryoryo1220:20200626102436p:plain
これで「アクセスキー」と「シークレットアクセスキー」の取得が完了しました。

それでは先ほど取得したアクセスキーとシークレットキーを.envファイルに入力してください。

.envファイルを編集したらキャッシュをクリアして下さい。

#ターミナル

php artisan config:cache

次にローカルのファイルシステムとS3を操作するためのパッケージをインストールしていきます。

#ターミナル

composer require league/flysystem-aws-s3-v3 ~1.0

以上で環境設定完了です。

最後に画像を保存するためのファイルを変更していきます。

#画像保存機能をつけるController

$image = $request->file('image');
$path = Storage::disk('s3')->put('/', $image, 'public');
$post->image = Storage::disk('s3')->url($path);

上記の様に変更を加えれば設定完了です。

最後に
本日はAWSのS3にWebアプリケーションから直接画像を保存する方法をご紹介しました。
いかがだったでしょうか？
最後までご覧いただきありがとうございました！

2020-06-28

AWSのS3を使って画像ファイルをアップロードする

AWS S3

早速紹介していきます。

S3とは

S3とは、Simple Storage Serviceの略です。

クラウド型のオブジェクトストレージサービスで、簡単に説明すると容量が無制限なFTPサーバーのようなイメージです。　　　　　　　　　　　　　　　　　　　　　1GBあたり0.025ドルと破格の安さでありながら、公式に99.999999999%の耐久性を謳っており、安さと高耐久を兼ね備えています。

Amazon S3（拡張性と耐久性を兼ね揃えたクラウドストレージ）｜AWS

S3がどういったものかがわかったところで、S3にファイルをアップロードしていきましょう！

１、バケットを作成する

f:id:ryoryo1220:20200624183059p:plain

まずはサービスから「S3」をクリック

f:id:ryoryo1220:20200624183731p:plain

続いて「バケットを作成する」をクリック

f:id:ryoryo1220:20200624184626p:plain

「バケット名」を入力します。バケット名はこのサービスに登録されている全名称においてユニークである必要があります。簡単に言うと、バケット名は重複してはいけません。

「リージョン」はすでに設定されているアジアパシフィック（東京）のままにしておきました。入力したら「次へ」ボタンをクリックします。

f:id:ryoryo1220:20200625100325p:plain

続いてバージョニングやログ記録の設定、オブジェクトタグの付与を行えます。

今回は特に変更しておりません。

f:id:ryoryo1220:20200625100629p:plain

続いてアクセス許可の設定を行います。

アクセスコントロールリスト(ACL)、パケットポリシーを介してバケット、オブジェクトへのパブリックアクセスをブロックするかどうかの設定が行えます。

初期からパブリックアクセスをすべてブロックの項目にチェックが入っています。

今回はそのチェックを外しておきます。

最後に確認画面が表示されるので入力した内容と誤りがなければ「バケットを作成」をクリックしてください

f:id:ryoryo1220:20200624185738p:plain

先ほど作成したバケットがこの様に表示されていればバケットの作成は完了です。

２、画像をアップロードしよう

f:id:ryoryo1220:20200625105119p:plain

先ほど作成したバケットの名前をクリックし上記の画面で「アップロード」をクリック

f:id:ryoryo1220:20200625105256p:plain

中央にある「ファイルを追加」をクリックしアップロードしたい画像を選択

f:id:ryoryo1220:20200625105530p:plain

ターゲットパスが画像のアップロード先のファイルであるかを確認し、間違いがなければ「次へ」をクリック

それ以降のページで特に設定するところはなかったので割愛させていただきます。

f:id:ryoryo1220:20200625110032p:plain

これでアップロード完了です。

上記の設定で画像が表示されない場合は、アップロードした画像の詳細ページからパブリックアクセスののEveryoneにオブジェクトの読み取りを許可してください。

f:id:ryoryo1220:20200625110700p:plain

最後に

本日はAWSのS3に画像をアップロードする方法をご紹介しました。

いかがだったでしょうか？

近いうちにS3に作成したWebアプリケーションからアクセスし、画像を保存する方法をご紹介いたします！

最後までご覧いただきありがとうございます。

皆様のお役に立てていれば幸いです。

2020-06-27

AWSアカウントでIAMユーザーの作成

AWS IAM

早速説明していきます。

IAMとは

IAMはIdentity and Access Managementの略。AWSへのアクセス権限を人やAWS以外のサーバに付与するためのもの。ただ、自分一人しか使わない場合でも、常にAWSアカウントを作った時のルートユーザーで作業し続けるのは危険なので、最低限の権限を与えたIAMユーザで作業するのがベストである。

IAMでユーザーの追加

f:id:ryoryo1220:20200625165602p:plain

まずは「サービス」から「IAM」を選択

f:id:ryoryo1220:20200625171444p:plain

続いて「ユーザー」をクリックします。

f:id:ryoryo1220:20200625172752p:plain

そこから「ユーザーを追加」をクリック

f:id:ryoryo1220:20200625173038p:plain

まずはユーザー名を入力します。

次にアクセス権限を選択、今回は「AWSマネジメントコンソールへのアクセス」を選択

そしてコンソールのパスワードをカスタムパスワードに変更し自分で決めていきます。

f:id:ryoryo1220:20200625173505p:plain

続いてグループを作成していきます。

「グループの作成」をクリック

f:id:ryoryo1220:20200625173723p:plain

グループ名を入力し、「AdministratorAccess」にチェックを入れて「グループの作成」をクリック

f:id:ryoryo1220:20200625174008p:plain

グループに先ほど設定したグループが確認できれば「次のステップ：タグ」を選択

f:id:ryoryo1220:20200625174211p:plain

タグは空欄でも大丈夫ですので今回は入力せずに次に進みます。

最後に確認画面に移行するのでそこで設定内容に変更がなければ「ユーザーの作成」をクリックすればユーザーの追加が完了です！

最後に

本日はAWSアカウントでIAMユーザーの作成についてご紹介しました。

いかがだったでしょうか？

最後までご覧いただきありがとうございました。

2020-06-26

Laravelで画像のpathをDBに保存する方法

php Laravel DB

早速紹介していきます。

本日はそのパスをDBに格納する方法をご紹介していきます！

前回の記事でLaravelで画像を保存することができていれば非常に簡単です！

#app/Http/Controllers/ImageController.php

 public function store(ImageRequest $request)
    {
        $path = $request->photo->storeAs('storage/images', Auth::id() . '.jpg');
        var_dump($path);
        Image::insert([
            'path' => $path,
            'user_id' => Auth::id(),
            ]);

        return redirect('/')->with('success', '新しいプロフィールを登録しました');
    }

上記の様にコントローラーを編集すれば実装可能です！
詳しく説明すると、DBのImageテーブルのpathカラムにstorage/imagesディレクトリに保管している画像を挿入しています。
また、Imageテーブルのuser_idカラムに画像をアップロードしたユーザーのidを保存していますので、user_idでDBから検索してviewに簡単に出力できます。

前回の記事のリンクを下記に貼っておきますので流れを追っていただければより分かりやすいと思います。

Laravelで画像アップロード機能の実装 - ryoryo1220’s blog

本日は
以上になります。
ご覧いただきましてありがとうございました。
皆様のお役に立てていれば幸いです。

2020-06-25

Laravelで画像アップロード機能の実装

laravel php

早速説明していきます！

開発環境
php 7.4.7
Laravel 7.15.0
MySQL 5.7.29

１、ルートを定義

＃web.php

Route::get('/image', 'ImageController@index');
Route::post('/image', 'ImageController@store');

２、画像アップロード用のファイル作成

＃ターミナル

$ php artisan make:controller ImageController

続いて作成したControllerを編集していきます。

＃app/Http/Controllers/ImageController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller
{
    /**
     * プロフィール登録フォームの表示
     *
     * @return Response
     */
    public function index()
    {
        return view('image/index');
    }
}

次にviewファイルにアップロード用のフォームを作成します。

＃resources/views/image/index.blade.php

<form method="POST" action="/image" enctype="multipart/form-data" >
    {{ csrf_field() }}
    <input type="file" name="image">
    <input type="submit">
</form>

フォームを利用するときは{{ csrf_field() }}でCSRF トークンの隠しフィールドを生成する必要があります。記述していないとエラーの原因になりますので気をつけましょう。

３、バリデーション

#ターミナル

$php artisan make:request ImageRequest
Request created successfully.

続いて作成したファイルを編集していきます。

#app/Http/Requests/ImageRequest.php

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class ImageRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'image' => 'required|file|image|mimes:jpeg,png,jpg,gif|max:2048'
        ];
    }
}

さらにrulesメソッドにはバリデーションルールを記載します。

#app/Http/Controllers/ImageControllers.php

use App\Http\Requests\ImageRequest;

class ImageController extends Controller
{

    /**
     * 画像の保存
     *
     * @param ImageRequest $request
     * @return Response
     */
    public function store(ImageRequest $request)
    {

    }
}

４、画像ファイルを保存する

今回はローカルのstorageディレクトリにimagesディレクトリを作成し、”（ユーザID）.jpg”というファイル名で登録していきます。

#app/Http/Controllers/ImageControllers.php

use Illuminate\Support\Facades\Auth;

class ImageController extends Controller
{
    /**
     * 画像の保存
     *
     * @param ImageRequest $request
     * @return Response
     */
    public function store(ImageRequest $request)
    {

        $request->photo->storeAs('public/images', Auth::id() . '.jpg');

        return redirect('image')->with('success', '新しい画像をを登録しました');
    }
}

５、保存した画像を表示

今のままではstorage/appにアクセスできないので、シンボリックリンクを貼ります。

#ターミナル

$ php artisan storage:link

#app/Http/Controllers/ImageController.php

use Illuminate\Support\Facades\Storage;

class ImageController extends Controller
{
    /**
     * プロフィール登録フォームの表示
     *
     * @return Response
     */
    public function index()
    {
        $is_image = false;
        if (Storage::disk('local')->exists('public/images/' . Auth::id() . '.jpg')) {
            $is_image = true;
        }
        return view('image/index', ['is_image' => $is_image]);
    }
}

画像が表示できるか確認してみましょう。

#resources/views/image/index.blade.php

@if ($is_image)
<figure>
    <img src="/storage/images/{{ Auth::id() }}.jpg" width="150px" height="150px">
    <figcaption>現在のプロフィール画像</figcaption>
</figure>
@endif

保存した画像が表示できましたか？

次回はDBへ画像のpathを保存し、画像を出力する方法について紹介していきます。
本日もご覧いただきましてありがとうございます。
皆様のお役に立てていれば幸いです。

2020-06-24

AWSのEC2でcomposer installができない！

AWS EC2

早速ですが説明していきます。

原因

EC2の無料枠にはスワップ領域が用意されていないことです！

なのでスワップ領域を設定する必要があります。

早速、スワップ領域の設定の仕方を説明していきます。

設定方法

スワップ領域の追加

#!/bin/bash

# 1Mのブロックを512個で合計512Mのファイルを/swapfileとして作成
sudo dd if=/dev/zero of=/swapfile bs=1M count=512
# 600にアクセス権限を変更
sudo chmod 600 /swapfile
# スワップ領域を作成
sudo mkswap /swapfile
# スワップ領域を有効化
sudo swapon /swapfile

# 再起動時にもスワップ領域がマウントされるように、/etc/fstabに追加
sudo sh -c 'echo "/swapfile  none        swap    sw              0   0" >> /etc/fstab'

上記のコマンドを入力すればスワップ領域の設定完了です！

そしておまけとしてスワップ領域について説明していきます。

スワップ領域とは

一言で言うと、現在使っていないメモリの内容を一時的に保存するための場所です。

詳しく説明すると、メモリ使用量が実メモリの量を超えると、使われていない部分が一時的に書き出される場所がスワップ（領域）です。 HDD上の仮想的なメモリなので、これを増やすと見かけ上のメモリが増えるため、できることが増えます。

最後に

本日はスワップ領域の設定方法について紹介しました。

いかがだったでしょうか？

ご不明点、ご質問等ございましたらお気軽にコメントしてくださいね。

最後までご覧いただきまして、ありがとうございました。

皆様のお役に立てていれば幸いです。

2020-06-23

「AWS」　RDSとは？　設定方法は？

AWS AWS

早速ですが説明していきます！

RDSとは？

RDSとはリレーショナルデータベースサービスの略でAWS（アマゾンウェブサービス）のサービスです。

RDSを使うと、、、

クラウド上のリレーショナルデータベースのセットアップ、オペレーション、スケールが簡単になります。ハードウェアのプロビジョニング、データベースのセットアップ、パッチ適用、バックアップなどの時間がかかる管理タスクを自動化しながら、コスト効率とサイズ変更可能なキャパシティーを提供します。これにより、アプリケーションに集中することができ、必要とされる高速なパフォーマンス、高可用性、セキュリティ、互換性をアプリケーションに実装できるようになります。

https://aws.amazon.com/jp/rds/　から引用

上記のようなことができます！

RDSの設定方法は？

RDSがどういったものであるのかを理解していただいたので、実際に設定していきましょう！

まずはRDSの設定ができるページに進みましょう！

f:id:ryoryo1220:20200623134030p:plain