概要

バックエンド（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を使用した例

.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ファイルに設定されるようにする。

config/filesystems.php

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も修正。

config/cms.php

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にコピペする。

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(キャッシュする時間)を設定できる。