概要
バックエンド（CMS管理画面）のナビゲーションバーにある「Media」から画像等のファイルをアップロードして使うことができる。
アップロードしたときの保存先はデフォルトだとウェブサーバだが、これをS3にする。
公式ドキュメント（英語）でも丁寧に説明されている。
手順概要
- S3を準備する
- CMSにS3アクセスのための設定を追加する
- 必要なパッケージをインストールする
- Mediaからアップロードする
- ブログから使ってみる
手順
S3を準備する
AWS Management Console などからS3のbucketを作成する。
IAMでWebサーバ用のユーザにbucketへの書き込みアクセスを持たせる（なければ作成）。
バケットの権限設定で他に追加する必要はない。
（以前はpublicにread-onlyを付与していたが、最近は推奨されていないので、個々のファイルでアクセスコントロールを行う。）
設定追加
config/filesystem.phpのdisks.s3に設定、あるいは.envとenv()で設定する。
.envについては「環境別の設定」を参照。
以下が.envを使用した例
AWS_ACCESS_KEY_ID=ABCDEFGHIJKLMNOPQRST
AWS_SECRET_ACCESS_KEY=PKLZbqRBqsGbD1qKiOQ+VXkZxYtkHsVM2qMY4SlR
AWS_REGION=ap-northeast-1
AWS_S3_BUCKET=my-blog-bucket
AWS_S3_URL=https://s3-ap-northeast-1.amazonaws.com/my-blog-bucket/media
AWS_ACCESS_KEY_IDとAWS_SECRET_ACCESS_KEYはIAMでアクセスを許可したユーザのクレデンシャル。その他は見ての通り。
これらが、下記のようにconfigファイルに設定されるようにする。
return [
'disks' => [
...
's3' => [
'driver' => 's3',
'key' => env('AWS_ACCESS_KEY_ID'),
'secret' => env('AWS_SECRET_ACCESS_KEY'),
'region' => env('AWS_REGION'),
'bucket' => env('AWS_S3_BUCKET'),
'visibility' => 'public',
],
...
],
]
Octoberのドキュメントには書いてないが、最後の 'visibility' => 'public' を設定することで、mediaからファイルをアップロードする際の権限をデフォルトでpublic-readにできる。これをしないと、公開するウェブサイト上でファイルを表示できなくなる。
config/cms.phpのstorage.mediaも修正。
return [
'storage' => [
...
'media' => [
'disk' => 's3',
'folder' => 'media',
'path' => env('AWS_S3_URL'),
],
...
],
]
folderはbucket内に作ったフォルダ名。
pathはS3コンソールで適当なファイルをアップロードしてプロパティを見てみるとわかる。
パッケージのインストール
S3にアクセスするためのパッケージをインストールする必要がある。
ドキュメントでは、Driversプラグインをインストールするように書いてあるが、このプラグインはcomposerで依存を定義しているだけ。
素直にインストールしても良いが、それだとDriverプラグインの中のvendorディレクトリにパッケージがインストールされてしまい、プロジェクトルートのvendorと重複してしまう可能性がある。
動作に問題はないが、プロジェクト内に同じソースコードが複数あるのは気持ち悪い。
なので、このDriverプラグインのcomposerでrequireしているパッケージをプロジェクトルートのcomposer.jsonにコピペする。
"require" : {
...
"aws/aws-sdk-php": "~3.0",
"pda/pheanstalk": "~3.0",
"iron-io/iron_mq": "~1.5",
"predis/predis": "~1.0",
"league/flysystem-rackspace": "~1.0",
"league/flysystem-aws-s3-v3": "~1.0",
"guzzlehttp/guzzle": "~6.0",
...
}
上記がそのcomposer.jsonファイルだが、このうち aws/aws-sdk-php と league/flysystem-aws-s3-v3 がS3を使うのに必要なので、この２つをプロジェクトのcomposer.jsonの require に追加する。（ guzzlehttp/guzzle も必要だが aws/aws-sdk-php の require に入っているので指定する必要はない。）
そして、これを適用する
$ composer update
ちなみに、パッケージがプラグインディレクトリの中のvendorディレクトリに入ってしまうのは、プラグインのcomposer.jsonにrequireが記述されているからではない。composer updateがプラグインディレクトリで実行されてしまうのが原因。
なので、プラグインのcomposer.jsonにrequireを記述しても、プロジェクトルートでcomposer updateすれば、プラグインが依存するパッケージもプロジェクトルートのvendorディレクトリにまとめてインストールしてもらえる。
Mediaからアップロードしてみる
バックエンドのナビゲーションバーから「Media」を開いて、アップロードするとリストに表示される。
リストで項目を選択すると、右側に表示される情報の"PUBLIC URL"の右の"Click here"をクリックするとS3のURLをブラウザが表示する。
ブログから使ってみる
メディアから挿入ボタンで簡単にアップした画像を挿入できる。
おまけ：バックエンドのフォームでメディアを使う
バックエンドのフォームでメディアを選択するにはMedia Finderウィジェットを入れるだけ。簡単。
media finderで選択するとmediaのconfigで指定したディレクトリ以下のパスだけが記録される。
ttl(キャッシュする時間)を設定できる。