全体像

WordPressから画像を投稿したら、S3に保存されるようにする。
画像の配信もS3から行うようにする。
CloudFrontを利用して画像をキャッシュできるようにして配信を高速化する。

画像の保存場所をWebサーバーではなくS3にする理由

Webサーバーのストレージが画像でいっぱいになるのを防ぐ
HTMLへのアクセスと画像へのアクセスを分けることで負荷分散する
サーバーの台数を増やしやすくする
- Webサーバー上に画像が保存されていると、Webサーバーの台数を増やしたときに、画像を同期する必要があり、スケールアウトが難しい
コンテンツ配信サービスから配信することで、画像配信を高速化できる

AWS側の準備

S3のバケット作成

S3ダッシュボードに移動し、バケットを作成をクリック

バケット名：aws-and-infra-wp21301(グローバルで一意になるように設定する)
オブジェクト所有者：ACL 有効を選択
「パブリックアクセスをすべてブロック」のチェックを外す
バケットを作成をクリック

S3の権限を持ったIAMユーザーを作成

IAMダッシュボードに移動し、左のタブからユーザーを選択
ユーザーの作成をクリック

ユーザー名：自分で入力
次へをクリック

許可のオプション：ポリシーを直接アタッチする
許可ポリシーの検索窓に「S3」を入力
「AmazonS3FullAccess」にチェックを入れる
次へをクリック
ユーザーの作成をクリック

作成したIAMユーザーをクリック
中段にあるアクセスキーを作成をクリック

ユースケースを選択し、確認にチェックを入れる
次へをクリック
アクセスキーを作成をクリック

アクセスキーとシークレットアクセスキーを保存・管理しておく

WordPressの設定

プラグインをインストール

WordPress管理画面を表示する

Webブラウザで「http://[パブリックIPアドレス]/wp-admin/」に移動

左のプラグインタブ→プラグインを追加をクリック

プラグインの検索窓に「WP offload media」を入力
「Amazon S3、DigitalOcean Spaces、Google Cloud Storage 用の WP Offload Media Lite」を今すぐインストール
有効化をクリック

必要なライブラリをEC2にインストール

Tera TermでWebサーバーにログインする
必要なライブラリをEC2にインストール

sudo yum install -y php-xml

sudo yum install -y php-gd

Apacheを再起動

sudo systemctl restart httpd.service

プラグインの設定

WordPress管理画面を表示する
左の設定タブ→WP Offload Mediaを選択

3. Add Credentialsのコードをコピーする

Tera Termで/var/www/html/ディレクトリに移動する

cd /var/www/html/

nanoエディタでwp-config.phpを編集する

nano wp-config.php

defineが記述されている所にコピーしたコードを貼り付ける

'access-key-id'と'secret-access-key'(WordPressからS3にアクセスするためのIAMユーザーの認証情報)に、作成したIAMユーザーのアクセスキーを入力する

WordPress管理画面のWP Offload Mediaページを再表示する
Browse existing bucketsを選択し、作成したバケットを選択する
Saveをクリック

サーバー側の画像を削除してサーバーの容量を節約するため、Remove Local Mediaにチェックを入れる
Saveをクリック

動作確認

左の投稿タブから投稿一覧をクリック
編集をクリック

画像をアップロードする
保存をクリック
Webページに画像が表示されたら成功

CloudFrontから配信する

ディストリビューションの作成

CloudFrontダッシュボードに移動し、CloudFrontディストリビューションを作成をクリック

Distribution name：自分で入力



Create distributionをクリック

作成したCloudFrontディストリビューションのDomain nameをコピーしておく

WP Offload Mediaの設定→Delivery Settings→Editをクリック
Amazon CloudFrontを選択

WP Offload Mediaの設定→Delivery Settings→Use Custom Domain NameにコピーしたDomain nameを貼り付け
Saveをクリック

次の記事