susunshunのお粗末な記録

お粗末に丁寧に生きる

AWSでブログサーバ構築(静的コンテンツをS3に配置)

前回は最も単純な構成でブログサーバを構築しました。susunshun.hatenablog.com

今回はこれにS3を足してコンテンツ(画像とか)を配置しましょう。

構成

EC2(Webサーバ、DBサーバ)

S3(コンテンツ)

大まかな手順

  1. バケットの作成
  2. 画像のアップロード
  3. S3のプラグイン導入

バケットの作成

マネジメントコンソールからS3を選択。
f:id:susunshun:20150325225112p:plain

”バケットとは”サポートから引用すると

バケットとは、 Amazon S3 に格納されるオブジェクトのコンテナです。すべてのオブジェクトはバケット内に格納されます。たとえば、photos/puppy.jpg という名前のオブジェクトが johnsmith バケットに格納される場合、URL http://johnsmith.s3.amazonaws.com/photos/puppy.jpg を使ってアドレスを解決できます。

だそうです。

基本的にS3の管理はバケット単位で行います。
またDNSを使用しない場合、バケット名が配置したコンテンツのURLに含まれます。

まずはこのバケットを作成しましょう。
f:id:susunshun:20150325225124p:plain


バケット名:任意
リージョン任意:任意(特にこだわりが無いなら東京にしておきましょう)
f:id:susunshun:20150325225135p:plain

何かエラーが出てますね。

実はバケット名は全てのリージョンで一意というのが条件です。他のバケットと名前が重複してはいけません。

ありがちな名前をつけてしまったのでバケット名を付け直してトライ。
f:id:susunshun:20150325225141p:plain

今度は無事バケットが作成されました!

画像のアップロード

タチコマ君の画像をアップロードしてみましょう。

アップロード対象のバケットをクリック
f:id:susunshun:20150325225152p:plain

左上の[upload]をクリック
f:id:susunshun:20150325225216p:plain

灰色の領域に画像をdrag&dropか、[add files]からファイルを追加。
アップロードの準備ができたことを確認して[start upload]をポチっ
f:id:susunshun:20150325225317p:plain

アップロードされました!
f:id:susunshun:20150325225325p:plain

実はこのままだとタチコマ君の画像はまだWebの世界に公開されていません。
※ブラウザから画像のURLを叩いてもアクセス拒否されます。

そこで画像を[右クリック] > [Make Public]
これで画像が公開されるようになります。
f:id:susunshun:20150325225332p:plain

S3のプラグイン導入 ※ここからはWordPress管理画面の操作になります

S3を設置しましたが、このままではWordPressから画像を追加してもS3にはアップロードされません。WordPressを導入しているサーバ(EC2)にアップロードされます。

プラグインを導入することでWordPressから画像を追加した場合、S3にアップロードされるようにしましょう。

この超便利なプラグインを使用します。※Amazonのセミナーで使用されてて知りましたwordpress.org

こいつを導入すると最初の設定を行えば、WordPressから画像を追加する際に、特にS3を意識することなく自動でS3に画像がアップロードされます。

それではプラグインを導入していきましょう。

WordPress管理画面サイドバーから[プラグイン] > [新規追加]を選択
f:id:susunshun:20150325233249p:plain

Amazon S3 for WordPress”で検索しインストール。
f:id:susunshun:20150325233252p:plain

インストール中の画面が表示されるので少々待ち。

完了したら[プラグインを有効化]をクリック
f:id:susunshun:20150325233256p:plain

するとサイドバーにAmazon S3が追加されます!
f:id:susunshun:20150325233300p:plain

次にプラグインの設定を行います。
今回導入したWordPressプラグインからAWSのサービスにアクセスするために、AccessKeyをとSecretKeyを設定しないといけません。

【AccessKeyの確認】※AWSの操作
AWSのダッシュボードから[Users] > [Manage AccessKey]
f:id:susunshun:20150325234036p:plain

AccessKeyはここに表示されますが、SecretKeyは表示されていません。
[Create AccessKey]をぽちり。
f:id:susunshun:20150325234206p:plain

どうやら無事AccessKeyが作成されたようです。
AccessKey、SecretKeyの確認はファイルをダウンロードして行います。
ということで[Download Credentials]をクリック。
f:id:susunshun:20150325234414p:plain

するとCVSがダウンロードされるので、そこからSecretKeyを確認しましょう。

AWSから確認したAccessKeyとSecretKeyを入力
f:id:susunshun:20150325234526p:plain

これでOK!かとおもいきや”Access Denied”というエラーが表示され先に進まない。
それはポリシーの設定をしていないからです。(恥ずかしながらこれを解決するのに結構時間がかかりました。。。。)

【IAMポリシーの設定】※AWSの操作
AWS複数サービス(今回はEC2とS3)を連携するときはポリシーを設定し、サービス間のアクセス制御を行います。

このサービスをAWSでは”IAM”と呼びます。

docs.aws.amazon.com

このページを読むとサービス間の制御を行うためだけでなく、一つのアカウントで複数のユーザが使用することも考慮されてのことらしいですね、なるほど。

つまりAccessKeyとSecretKeyがあれば誰でも自由にAWSにアクセスできるわけではありません。

今回は”S3がEC2にアクセスすることを許可しますよ”というポリシーを設定します。

キャプチャ撮り忘れました。。。

ダッシュボードの[Policies]をクリック

AmazonS3FullAccess ※とりあえず先に進めるためにFullAccessにしました

Policy > Attach

ユーザにひもづける

これでOK

てことでWordPressに戻りトライ。
うまくいくと詳細設定ができます。

Use This Backet:作成したバケット
File Uploads:チェック入れる
FilePermissions:チェック入れる
f:id:susunshun:20150326001531p:plain

以上で設定は完了です。

試しにWordPressから画像をアップロード、記事を作成して画像のパスがS3に向いてることを確認しましょう!