c0d3man52

Webサイト制作

WordPressでメディアの保存先をAmazon S3にする

WordPressのメディア保存先としてAmazon S3を使うと色々メリットがあります。今回は、その設定をしていきます。

更新日: 2019.12.11公開日: 2017.8.21

目次

作業の前に

前提条件

文中では、

  • URL：example.com
  • 画像用のURL：cdn.example.com

とします。それぞれ、ご自身のドメインに置き換えて読んでください。

また、前提として、

  1. Amazon S3に会員登録済み
  2. WordPress用のバケットを設定済み
  3. CDNはCloudFlareを使う & 登録・設定済み

という条件で進めます。もし、これらがまだの方は個別に設定してください。

Amazon S3のバケット名は、ドメイン名になっている必要があるので（この場合はcdn.example.com）、もし別名でバケットを作ってしまっている場合は、新規でバケットを作って、中身をコピーしておいてください。

全体の流れ

全体の流れとしては、

  1. Amazon S3で必要な設定をする
  2. CDNの設定をする
  3. WordPressで設定をする

という流れになります。

それでは、はじめていきましょう。

実装する

AWSでAmazon S3のバケットをホスティング設定

まずは、Amazon S3のバケットをCloudFlareのCNAMEで転送できるように、ホスティング設定をします。

  1. S3に入る
  2. バケット「cdn.example.com」を選択する
  3. Static website hostingを有効化（このバケットを使用してウェブサイトをホストするを選択）
  4. インデックスドキュメント（特に指定がないなら「index.html」）を入力する
  5. エラードキュメント（特に指定がないなら「error.html」）を入力する
  6. 保存ボタンを押す
  7. もう一度「Static website hosting」を選択して、表示されるエンドポイントのURLをコピーする

これで、前準備が完了しました。

あとは、次の項にあるCloudFlareでの設定をすれば、cdn.exmaple.comというドメインにアクセスすると、Amazon S3のバケットにアクセスされるようになります。

CloudFlareでcdn.example.com -> Amazon S3のバケットの転送設定をする

次に、CloudFlareで、cdn.example.com -> Amazon S3バケットの転送設定をします。

  1. DNSタブをクリック
  2. レコード種類(デフォルトではA)を「CNAME」にする
  3. Nameを「cdn」とする
  4. Domain Nameに、その1の7でコピーしたエンドポイントのURLを入力する（http://は消す）
  5. Add Recordをクリック

これで、cdn.example.com = Amazon S3のcdn.example.comバケット、となりました。

WordPressで、メディアの保存先をAmazon S3に設定する

ここからようやく、WordPress内での作業となります。

  1. プラグイン「Amazon Web Services」と「WP Offload S3 Lite」をインストール&有効化
  2. Amazon Web Services用に、wp-config.phpに以下のコードを追記する（場所は一番下でOK）
    define( ‘DBI_AWS_ACCESS_KEY_ID’, ‘ アクセスキー’ );
    define( ‘DBI_AWS_SECRET_ACCESS_KEY’, ‘シークレットアクセスキー’ );
  3. WP Offload S3 Liteの設定画面で、バケット・cdn.example.comを選択
  4. WP Offload S3 Liteの設定画面「CloudFront or Custom Domain」で、cdn.example.comを入力する

これで設定は完了です。

以上の設定ができれば、WordPressで画像をなどをアップすると、Amazon S3にファイルがアップされて、メディアのURLは、自動的にcdn.expample.com//wp-content/uploads/xxx.jpgなどになります。

ちなみに、このプラグインがやっていることは、

  1. 一度、/wp-content/uploads/にファイルをアップロード
  2. そのファイルをAmazon S3にコピー
  3. ファイルのパスをAmazon S3のURL or カスタムドメインのURLに書き換え

という流れで、デフォルトの設定では、アップロードをするとサーバー側にもファイルが残るようになっています。

もし、サーバー側のデータを削除したいのであれば、設定画面の「AWS -> S3 and Cloud Setting」の中の、「Advanced Options -> Remove Files From Server」をオンすればOKです。

WordPressでメディアの保存先をAmazon S3にする方法をみてきました。

最初は複雑に見えますが、慣れればサクッとできるのでぜひ試してみてください。

タグ