メシのタネ

めしのたねになるIT情報配信サイト


【AWS】S3からWordPressの画像を表示させる方法

,

  1. aws
  2. 【AWS】S3からWordPressの画像を表示させる方法

AWS_logo
AWSのアカウントをこの間取りました。無料期間が登録から1年間毎月規定値まで無料っぽいのでこれはなんかテストで使いたいなぁと思っておりました。さすがにサーバーを移動させるのはしんどいので、画像だけS3から表示させてみることにしました。S3って何って人はこちらを見れば何となく分かると思います。

流れ

・S3の設定
・AWSSDKのアクセスキー、シークレットキー取得
・WordPressプラグイン絡新婦を取得
・WordPressプラグイン絡新婦の設定

ステップは4つです。あんまり難しくないです。なるべくサムネイルつけて記事書いていきます。

S3バケットを作成

とりあえずアカウントは取ってる前提で話を進めていきます。ログインして、サービスがずらーって並んだコンソール的な画面が出てきます。Storage & Content DeliveryからS3を選びます。

バケット作成手順

S3を選択

s3nosetmei00

CreateBucketを選択

s3nosetmei01

Createで作成完了

s3nosetmei02

バケット命名ルール

バケットっていうのは、オブジェクトを入れとくバケツだと解釈してます。サーバーのルート以下のフォルダみたいな解釈でも良いような気がします。もしかしたら勘違いしてる可能性があるので、気になる人は調べてみて下さい。で、このバケットには命名のルールというのがあります。

  • バケット名は3~63 文字以内
  • バケット名は、1 つのラベルまたは一連の複数のラベルとして指定
  • 隣り合うラベルは単一のピリオドで区切る
  • 小文字の英文字、数字、およびハイフン(-)を含めることが可能
  • 各ラベルの先頭および末尾は、小文字の英文字または数字にする
  • バケット名は、IP アドレスの形式で指定ができない

この決まりがあるの知らなくてバケット名の指定ができなくて一瞬焦りましたが、決まりを守れば普通に指定することができます。

  • wp.update.data
  • wpupdatedata
  • wpdata.1

例としてこんな感じで指定します。

バケットの設定

バケット作成後にプロパティの設定をします。こっちも手順を列挙する的な手法にしたいと思います。

  • バケット名を右クリックしてPropertiesを選択
  • 右フレームにプロパティ一覧が表示される
  • Static Website Hostingを選択後にEnable website hostingを選択
  • Endpointが表示されるのでメモる
  • index documentとErrorDocumentを設定(index.html,404.htmlみたいな感じでいい)
  • saveを押すと設定完了

バケット設定画面キャプチャ

バケット名を右クリックしてPropertiesを選択

s3nosetmei03

Static Website Hostingを選択後にEnable website hostingを選択した後

s3nosetmei04

これでバケットの設定は完了です。

AWS SDKのアクセスキーとシークレットキーを取得

AWS SDKはamazonが提供しているAPIです。コレを扱う為にはアクセスキーとシークレットキーを認証させないとダメなので、この手順が必要になります。

  • ここに移動
  • アカウントをプルダウン後に認証情報をクリック
  • ポップアップを×で閉じる
  • Accecess Keysを展開
  • Create New Access Keyを押すとキーの取得ができる

キーの取得部分の画面キャプチャ

アカウントをプルダウン後に認証情報をクリック

s3nosetmei05

Accecess Keysを展開後

s3nosetmei06

絡新婦の取得と設定

WordPressプラグイン絡新婦を取得します。これは多分、WordPressのメディアアップロードにアップした画像をS3のバケットに放り込んでくれるツールだと思われます。僕のバケットにはwp-content/uploads/..という風にフォルダができていて画像が入ってるので多分そうなんだと思います。ちなみに絡新婦の読み方はじょろうぐもで、妖怪の一種で美しい女に化ける事ができるそうです。話がそれましたが設定方法を書いていきます。

  • WordPressの管理画面へログイン
  • プラグインの新規追加からNephila clavataってプラグインを検索
  • 取得したアクセスキーとシークレットアクセスキーを入れてバケットに設定したリージョンを選択
  • 情報が正しければS3バケットとS3のURLを追加で入力が可能になる
  • S3のURLはさっき控えたエンドポイント

変更を保存すれば、画像の読込先がS3の方に書き換わります。これでサーバーの負荷がすこーし軽減されるかもしれませんね!


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

若い頃、「仕事中にハマったこと」や「誰かに共有したい技術的な気づき」をアウトプットしたくてブログを始めましたが、勢い任せでよく分からない記事を大量生産し、あえなく飽きて終了。

改めて今、キャリア15年分の経験や知識が、これからITエンジニアを目指す方や、同じような課題で悩んでいる現役エンジニアの「メシのタネ」になるような記事を残したいと思っています。
※過去の記事は見ると精神が崩壊するため、そっとしておいてください。

🛠 経歴という名の珍道中:
文系Fラン → 広告営業 → Web営業 → 通信営業 → Web進行 → 出版 → Web媒体運用 → ソフトウェアハウス → SES → フリーランス

専門教育も受けず、転職歴も多数。履歴書はまるで時系列の事故記録のようですが、試行錯誤を重ね、なんとかエンジニアとして食べています。

このブログでは、そんな「履歴書クラッシャー型エンジニア」が送る、
名古屋一敷居の低い、実務に役立つ技術ブログを目指します。

PHP
魔王と行く! / Interface / Polymorphism / Ontology 深淵ガイドNew!!
Laravel
Laravel 12、「コード 1 行も書き換えず未来へ」──静かな革命の手順書New!!
Laravel
LaravelのMiddlewareって意味あるの?仕組み・使いどころ・やらかしまで整理してみたNew!!
Laravel
ServiceProviderって何してるの?DIの背後で動いてるやつの正体New!!
Laravel
LaravelのサービスコンテナとDI、「書いてるだけで動く」コードの正体
Laravel
Laravelのアーキテクチャ、実は誰もわかってない説