joppot

コピペで絶対動く。説明を妥協しない

ソフトウェア

WP Offload S3 とawsプラグインでwordpressの画像をs3にアップロードする

投稿日:

Pocket

wp_offload_image_top_thumb

概要

みなさんこんにちはcandleです。今回はwordpressの画像をs3にアップロードします。
私は最近まで別のs3にアップロードするプラグインを使っていたのですが、開発が2年前に止まってしまい、最新のwordpressのバージョンではうまく動かなかったので、wp offload s3に変更しました。

wp offload s3はamazon web service pluginの拡張なので、事前にそちらを入れる必要があります。そこも含めて解説していきます。


前提

amazon s3のiamを取得している。
もしも、まだ取得してない人は、こちらの記事を参照してください。
awsのs3を操作する為のaccess keyとsecret keyを取得する(IAM)

s3のバケットを作成しておく



Amazon Web Service pluginとWP Offload S3をインストールする

wp offload s3をインストールする前にamazon web service をインストールします。

wordpressの管理画面から「プラグイン」→「新規追加」を押します。

wordpress_add_new_plugin

プラグインの検索から「Amazon Web Service」で検索して、画像の候補をクリックして、インストールします。

search_amazon_web_service_plugin

同じように検索ボックスで「wp offload s3」で検索して、インストールします。

click_wp_offload_s3

インストールしたプラグイン一覧で、それぞれのプラグインを有効化します。

activate_each_plugin

これでインストールが完了しました。

awsの設定

左のメニューにawsという項目ができます。

aws_menu

s3へのアクセスキーとシークレットキーはwp-configに記述するか、データベースに保存するか選べます。awsプラグインが推奨しているのは、wp-config.phpに記述するほうなので、私はそちらで設定します。

wordpressのwp-config.phpを開いて、すでに取得しているs3のiamのアクセスキーとシークレットキーを記述します。

define( ‘AWS_ACCESS_KEY_ID’, ‘********************’ );
define( ‘AWS_SECRET_ACCESS_KEY’, ‘********************************’ );

awsのキーを設定するとawsのページが以下のように変更されます。

defined_aws_key

awsの設定は以上です。

wp offload s3の設定を行う

s3にアップロードするための設定をおこないます。
左のメニューのAWSの「S3 and CloudFront」を選びます。

choose_s3_and_cloud_front

以下の画面が出てきます。
テキストフィールドに直接バケット名を入れても良いのですが、
「Browse existing buckets」を選べば、
設定したiamのキーで参照できるバケットの一覧が出てくるのでそちらの方が楽です。

what_is_bucket_name

ボタンを押すと、バケットの一覧がでてくるので、アップロードしたいバケットを選びます。

choose_your_bucket

あとは自動的に設定がおこなわれて、以下のような画面が出れば成功です。

wp_s3_setting_window


s3のurlの設定を行う

s3にアップロードしたファイルのアドレスは様々な表現が可能です。

http通信の場合

もしも、あなたのサイトがhttp通信で行われているなら、
Domainの項目は「Bucket name as subdomain」をおすすめします。

pathは「wp-content/uploads/」にします。
http_web_site

https通信の場合

https通信でサイトを運用している場合は問題が起こります。
s3のバケット名ではドット「. 」が使えます。https通信では不要なドットはエラーを出すらしく、このプラグインではhttps通信を行う場合は「Bucket name as subdomain」を選べません。

仕方がないので、「Bucket name as path」にします。

unfortunatly_file_path

これ、自分のバケットはドットが入っていないのがわかっているから、なんとか設定できればいいのにと思っています。

メディアをアップロードしてみる

メディアに移動して画像をアップロードしてみます。

media_image

画像の詳細を見てみると、画像がs3のアドレスになっています。

s3_image_address

https通信だとこんな感じのアドレスでした。
https://s3-ap-northeast-1.amazonaws.com/バケット名/wp-content/uploads/2016/01/17002715/island-984445_640.jpg

s3のマネジメントページに行くと、以下のようになっていました。
自分はewwwのプラグインを入れているので、幾つかファイルが作成されています。

wp_backet_upload_success

まとめ

これ、やっぱりよくよく考えると、https通信の場合でもサブドメインにバケット名のせたいですね。というのも、サーバの引越しとかする場合にバケット名の部分が不要になるからです。

https://s3-ap-northeast-1.amazonaws.com/バケット名/wp-content/uploads/2016/01/17002715/island-984445_640.jpg

https://joppot.info/wp-content/uploads/2016/01/17002715/island-984445_640.jpg

urlにまとめられるならそっちの方が便利ですね。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-ソフトウェア
-

執筆者:


comment

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

関連記事

wordpressの記事一覧で個々の記事のcontentテキストの文字数をプラグインで制限する

English 日本語 概要 みんさんこんにちはcandleです。 最近、wordpress案件でしばらくの間フリーのテーマを使う事があったのですが、 フリーのもの多くは記事一覧で個々の記事の内容を全 …

redmineのaccept pluginでチケットの担当者をボタン1つで自分にする

概要 みなさんこんにちはcandleです。今回はaccept pluginを使って、チケットの担当者を自分にする方法を紹介します。一般にチケットの担当者を変更するには、チケット画面から「編集」を押し、 …

Emacsでreact+es6に対応したflycheck + eslintの環境を構築する

概要 みなさんこんにちはcandleです。 今回は以外に難しい、emacs + eslintの導入をしてみましょう。 emacsは他にもjsHintやjsxHintなどjavascriptの記法をチェ …

emacs25上でvcを使ってgit管理する

概要 みなさんこんにちはcandleです。今回はemacsでデフォルトで入っているvc(version controll)を使って見たいと思います。 vcはgitに特化した機能ではなくsubversi …

Xcode5にCommand Line Tools(コマンドラインツール)をインストールする

概要 Xcodeを使ってみようと思っているcandleです。 特にOpenCVを使用したいので、Command Line Tools(コマンドラインツール)をインストールするわけですが、どうやら、ちょ …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ