More than 1 year has passed since last update.

AWS初心者は必ず読むべき！必見！AWSの基本⑦S3とCloudFront(画像配信をする)　

Last updated at 2022-10-11Posted at 2022-10-11

この記事の概要

S3やCloudFrontを使って画像配信をしていきます。
WordPressから画像を投稿したらS3に画像が保存されるように設定していきます。
そして配信もS3からにします。
次にCloudFrontを使って画像配信を高速化します。

インフラの設計で大事なこと

サービスを継続できるか
システムの性能が良く将来的にも拡張しやすいか
運用と保守ができるか
セキュリティがしっかりしているか
今現在のシステムは他のシステムに移行しやすいか

特に1と2が大事みたいです。

S3とは

データを管理、格納できる安く耐久性の高いAWSのクラウドストレージサービスです。
その中でも3つの概念が大事です。

バケット
オブジェクトの保存場所です。
2.オブジェクト
データ本体でS3に格納されるファイルです。
3.キー
オブジェクトの格納URLパスです。

この記事にも説明が載っています。

S3がよく使われるケース

ex)
・静的コンテンツの配信
・バッチ連携用のファイル(バッチとは定期的に実行するプログラムのこと)
・ログなどの出力先
・静的ウェブホスティング

保存場所をS3にする

画像の保存をS３にする理由はWebサーバーのストレージが一杯になることを防ぐためです。
そしてサーバーの台数が増やしやすくなり、コンテンツ配信サービスから配信することで
画像配信を高速化できます。

S3のバケット作成

AWS側の準備からしていきます。

S3のバケット作成をするためのAWS側の準備

まずS3のダッシュボードに移動します。

バケットを選択していただき、バケットを作成を選択します。
バケット名はご自身で決めてください。

このパブリックアクセスが全部オンだとS3のバケットにWordPressからアクセスできなくなります。

全部確認が終わったらバケットを作成します。

オブジェクトが公開可能かチェックしてください。
非公開だとWordPressから画像をアップロードできなくなります。

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

IAMのダッシュボードに移動します。
そしたらメニューのユーザーをクリックします。ユーザーの追加をクリックします。

チェックを入れたら次のステップにいきます。

既存のポリシーを直接アタッチを選択したらS3と検索してAmazonS3FullAccessを選択します。
そしたら次のステップをクリックします。

次のタグは何も設定する必要はないです。次のステップをクリックし、最後の確認画面に入ります。
最後の確認画面で確認をします。特に管理ポリシーがAmazonS3FullAccessになっているかを確認します。
確認ができたらユーザーの作成をクリックします。

最後は.csvのダウンロードをしておきます。ダウンロードしたら閉じるを押します。

こうして新しくユーザーができました。

新しくできたユーザ-を選択して直接アタッチ済みになっているかチェックします。

WordPressの画像をS3にアップロード

WordPressの画像をS3にアップロードしていきます。

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

ドメイン名でWordPressの画面に入ります。ドメイン名/wp-adminがURLです。
URLがわからない場合はこの記事の兄弟記事の⑥を参照してください。
WordPressを導入した時のユーザー名とパスワードを入力します。

すると下のような画面になると思います。

左側のプラグインを選択し、新規追加をクリックします。
そして検索からWP Offload Media Lite for Amazonを検索し、インストールします。

インストールが終わり有効化になったら有効化を押します。
そしてプラグインのインストール済みプラグインの中でWP Offload Media Liteが
無効化になっていればokです。今動いている証拠です。

そしてWP Offload Media Liteを動かすために必要なライブラリーがあります。
そのために必要なサーバーをインストールします。

まずはEC2のパブリックIPアドレスを確認します。
そしてEC2からSSH接続していきます。
そして以下のphp-xmlをインストールします。

[ec2-user@ip-10-0-7-161 ~]$ sudo yum install -y php-xml
読み込んだプラグイン:extras_suggestions, langpacks, priorities, update-motd
amzn2-core                                              | 3.7 kB     00:00     
依存性の解決をしています
#省略
依存性関連をインストールしました:
  libxslt.x86_64 0:1.1.28-6.amzn2                                              

完了しました!

そしてApacheの再起動をします。

[ec2-user@ip-10-0-7-161 ~]$ sudo systemctl restart httpd.service #Apache再起動

そしてWordPressの画面に戻ります。そして下の設定のOffload Media　Liteをクリックします。

このような画面にいき、Define access keys in wp-config.phpにチェックが入っているかと思います。
これはWordPressの設定ファイルです。そして画像にはないのですが、
defineから始まるコードがあります。これをコピーします。
S3にアクセスするためのアクセスキーを入力してくれという意味です。

コピーしたらターミナルからwp-config.phpに記載していきます。

[ec2-user@ip-10-0-7-161 ~]$ cd wordpress/
[ec2-user@ip-10-0-7-161 wordpress]$ ls   #wp-config.phpがある
##wp-config.phpがない場合は手動で変更するみたいです

そしてnanoエディタで編集します。

[ec2-user@ip-10-0-7-161 wordpress]$ nano wp-config.php
#省略
/** データベースのユーザー名 */
define( 'DB_USER', 'username_here' );

/** データベースのパスワード */
define( 'DB_PASSWORD', 'password_here' );

/** データベースのホスト名 */
define( 'DB_HOST', 'localhost' );

/** データベースのテーブルを作成する際のデータベースの文字セット */
define( 'DB_CHARSET', 'utf8' );

/** データベースの照合順序 (ほとんどの場合変更する必要はありません) */
define( 'DB_COLLATE', '' );

define( 'AS3CF_SETTINGS', serialize( array(　　　#さっきコピーしたものを追記
    'provider' => 'aws',
    'access-key-id' => '',　　#''との間に追記　　Access key IDのこと
    'secret-access-key' => '',　　#''との間に追記　　Secret access keyのこと
) ) );

⚫︎補足
追記するAccess key IDとSecret access keyは
WordPressからS3にアクセスするためのIAMを作った時のIAMユーザーの認証情報です。
その時に認証情報のCSVファイルをダウンロードしたものの中にあります。

そしてnanoエディタの中でわからない場合はctr+Gでヘルプで確認します。
終了は　ctr+X ctr+Sが保存です。保存して終了します。
終わったらWordPressのOffload Media Liteに戻ってリロードします。

もし失敗するなら
下の画像みたいにAccess Key　IDとSecret Access Keyを入れます。
そして再度リロードします。

引用　　https://deliciousbrains.com/wp-offload-media/doc/amazon-s3-quick-start-guide/

この辺も参考にしました。

リロードすると下のサイトの下から2番目の画像みたいなOffload Media Lite みたいになればokです。
下のサイトも参考にしてください。

Browse existing bucketsで作成しているバケットを確認できます。
使いたいバケットを選択してSave Selected Bucketをクリックします。
その後設定で確認します。Provider,バケットがあっているか確認します。
下にスクロールしてADVANCED OPTIONSの Remove Files From Serverをオンにします。
サーバーではなくS3に保存できるようにするためです。
save changesを押します。これで画像を投稿するとS3に保存されるようになります。

画像投稿ができずエラーが出る場合はこのサイトを参考にしてみてください。

画像が表示されない場合はこの記事を参考にしてみてください。
自分の場合はプラグインを無効化したら画像が表示されました。

コンソールに入ってS3の画面からもちゃんと保存されているか確認しましょう。