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

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


# インフラの設計で大事なこと
1. サービスを継続できるか
2. システムの性能が良く将来的にも拡張しやすいか
3. 運用と保守ができるか
4. セキュリティがしっかりしているか
5. 今現在のシステムは他のシステムに移行しやすいか    

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

# S3とは
***データを管理、格納できる安く耐久性の高いAWSのクラウドストレージサービス***です。
その中でも3つの概念が大事です。
1. ```バケット```
オブジェクトの保存場所です。
2.```オブジェクト```
データ本体でS3に格納されるファイルです。
3.```キー```
オブジェクトの格納URLパスです。

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

https://www.wafcharm.com/blog/s3-for-beginners/

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


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


# S3のバケット作成
AWS側の準備からしていきます。

### S3のバケット作成をするためのAWS側の準備
まずS3のダッシュボードに移動します。
![スクリーンショット 2022-09-13 18.10.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/94212fda-a00b-5703-e1c7-e00181796b39.png)

バケットを選択していただき、バケットを作成を選択します。
バケット名はご自身で決めてください。
![スクリーンショット 2022-09-13 18.13.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/a36ce690-b810-0db2-d17e-ca25ec857f6c.png)

![スクリーンショット 2022-09-13 18.19.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/b4e1e5ae-e51b-eaaa-6c32-c3068f5ef6b8.png)


このパブリックアクセスが全部オンだとS3のバケットにWordPressからアクセスできなくなります。
![スクリーンショット 2022-09-13 18.17.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/da2ee9f6-1aa8-0a5d-6337-af3a39d9e44c.png)

![スクリーンショット 2022-09-13 18.19.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/d3d609fa-8210-010f-0a8a-29d4ff4fc50c.png)

![スクリーンショット 2022-09-13 18.19.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/cd306132-3e86-7c2f-9fb7-fd7483f5427b.png)

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

![スクリーンショット 2022-09-13 18.33.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/216b87cf-0010-4c36-4663-759ac9a3a7d1.png)

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


### S3の権限をもったIAMユーザー作成
IAMのダッシュボードに移動します。
そしたらメニューのユーザーをクリックします。ユーザーの追加をクリックします。

![スクリーンショット 2022-09-13 18.37.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/6ab95d9e-bde0-622e-600a-97f143190115.png)

チェックを入れたら次のステップにいきます。
![スクリーンショット 2022-09-13 18.38.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/6d39eea0-6180-74f4-7a6c-8522c6efb80a.png)

既存のポリシーを直接アタッチを選択したらS3と検索してAmazonS3FullAccessを選択します。
そしたら次のステップをクリックします。
![スクリーンショット 2022-09-13 18.40.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/0177c8aa-8bed-9e1f-2673-655c5ae9b774.png)

次のタグは何も設定する必要はないです。次のステップをクリックし、最後の確認画面に入ります。
最後の確認画面で確認をします。特に管理ポリシーがAmazonS3FullAccessになっているかを確認します。
確認ができたらユーザーの作成をクリックします。
![スクリーンショット 2022-09-13 18.48.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/4ba7f61c-a2cb-6f82-17d4-d8d1d208e354.png)

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

![スクリーンショット 2022-09-13 18.53.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/fadaeaec-790a-bc7d-0442-f605374f48a6.png)

こうして新しくユーザーができました。
![スクリーンショット 2022-09-13 18.54.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/c1f05a81-6e2d-cb77-3206-3fa531c5a871.png)

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

![スクリーンショット 2022-09-13 18.55.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/342a4ce7-39ab-feff-8566-0ae97ce659fc.png)

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

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

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

![スクリーンショット 2022-09-16 10.08.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/a6e9d979-032d-2e4f-e412-710c8aace548.png)
左側のプラグインを選択し、新規追加をクリックします。
そして検索から***WP Offload Media Lite for Amazon***を検索し、インストールします。

![スクリーンショット 2022-09-16 10.13.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/41775157-86e4-7778-7399-6c868c2f5491.png)

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

![スクリーンショット 2022-09-16 12.15.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/d6dc80bd-c252-40f8-b0a9-73a6a455b7b1.png)

そして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をクリックします。

![スクリーンショット 2022-09-16 12.29.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/3ec5cb54-9cb7-ad19-ef91-e0d063c1e8e5.png)

このような画面にいき、Define access keys in wp-config.phpにチェックが入っているかと思います。
これはWordPressの設定ファイルです。そして画像にはないのですが、
defineから始まるコードがあります。これをコピーします。
S3にアクセスするためのアクセスキーを入力してくれという意味です。
![スクリーンショット 2022-09-16 12.30.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/ed00c9af-e639-9e3e-033f-698292b7f454.png)

コピーしたらターミナルから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を入れます。
そして再度リロードします。
![スクリーンショット 2022-09-16 16.00.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/7f3385ca-4ef9-6c8a-b4ce-3554e9b9384b.png)

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

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




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

https://m-kenomemo.com/wp-s3/

https://hacknote.jp/archives/43897/


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

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

https://leopardkunn-blog.com/wordpress-alt/

https://tanweb.net/2021/03/15/38683/

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

https://cms-hikaku-navi.com/column/5074/#:~:text=%E3%81%BF%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82-,WordPress%20(%E3%83%AF%E3%83%BC%E3%83%89%E3%83%97%E3%83%AC%E3%82%B9)%E3%81%AE%E7%94%BB%E5%83%8F%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84,%E6%99%82%E3%81%AE%E5%AF%BE%E5%87%A6%E6%B3%95%E3%81%BE%E3%81%A8%E3%82%81&text=%E7%94%BB%E5%83%8F%E3%81%8C%E6%AD%A3%E3%81%97%E3%81%8F%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84,%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

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


# CloudFrontの高速化について
***高速コンテンツを配信するCDNのサービス***です。
高速でオリジンサーバーに負荷をかけずに配信できるのが特徴です。
CloudFrontのおかげで***高速化され、S3の負荷が軽減***されます。

# CloudFrontの設定
これからやる作業は以下の手順です。

1. 独自ドメインから配信



まずはCloudFrontの画面に入ってください。

## CloufFrontから配信
***ディストリビューション作成***していきます。
***CloudFrontディストリビューション作成***をクリックします。

***オリジンドメインはここではS3を指定***します。

![スクリーンショット 2022-10-02 12.28.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/1f8273ff-0e55-7d60-7fe7-bbcca1e1adbb.png)

今回は他は特に設定せずに***ディストリビューションを作成***をクリックします。

![スクリーンショット 2022-10-02 12.32.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/05e81cd1-ec4a-3e85-0aae-f2d8e0ddd932.png)


ディストリビューションに入ってから***編集***をクリックします。

![スクリーンショット 2022-10-02 12.33.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/ec8b9d2a-40d9-879e-293c-90153be6dcb4.png)

***代替ドメイン名 (CNAME)で配信されたいドメイン名を記載***します。
ちなみにstaticは***サブドメイン***のことです。

![スクリーンショット 2022-10-02 12.39.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/23b634c9-f4eb-1529-811a-bb358a78f930.png)


### Certificate Manager でSSLサーバー証明書の発行
***証明書をリクエスト***のボタンをクリックします。

![スクリーンショット 2022-10-02 12.41.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/83ee5acb-c5f7-73d2-0ddf-e8185c4b4fb7.png)


![スクリーンショット 2022-10-02 12.42.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/2c7012fb-ac63-c02f-dbe0-5fc05c99d6ab.png)

```*.は*.以下は何でも使えるということ```です。
この証明書に別の名前を追加は*.なしのドメイン名を記載します。

![スクリーンショット 2022-10-02 12.46.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/ec015bbb-ddbf-b02d-fca5-bdc1810f2261.png)

設定が終わったら***リクエスト***をします。


![スクリーンショット 2022-10-02 12.49.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/ba2d9448-ed3c-3281-ff41-9862e1ea4b93.png)

***Route53でレコードを作成***します。

![スクリーンショット 2022-10-02 12.56.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/6c3d8aa8-9177-71c4-c459-6119cadc68f3.png)

***発行されたらCloudFrontの画面に戻ります***。

![スクリーンショット 2022-10-02 12.59.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/0c53f03a-b202-3ba3-2b2d-9b1bb0529e70.png)

***カスタム SSL 証明書 - オプションでACM証明書が使えるようになっている***はずです。

***証明書が発行済み***になるのを待ちましょう。

![スクリーンショット 2022-10-02 13.01.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/afe23e28-32fc-e1c8-1b96-5fa70a0f1867.png)


***発行されたらディストリビューションからIDをクリックして編集***していきます。

![スクリーンショット 2022-10-02 13.11.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/678efd63-af2c-5918-2320-fb09a7696b4b.png)


![スクリーンショット 2022-10-02 13.12.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/cad7ec07-2cb6-2926-151c-48cb599f1de0.png)

***変更を保存***していきます。


続いてRoute53の画面に入ります。
そしてホストゾーンに入ります。aws-infra-study.xyzを開きます。

![スクリーンショット 2022-10-02 13.20.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/e2e522e8-dd35-5dc4-0f18-f78b1e521c3a.png)

そして***レコードを作成***していきます。

![スクリーンショット 2022-10-02 13.24.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/e7ee6c01-b43e-de3b-7cc7-f567cf826667.png)


***ドメイン名をコピーして上の値に貼り付けます***。
![スクリーンショット 2022-10-02 13.23.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/4386a79b-120c-2faf-91db-a18822fbd067.png)

下の画像のように登録されました。

![スクリーンショット 2022-10-02 13.26.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/0498f9dc-736f-cb05-ab68-e1833e902a1d.png)


wordpressの画面に戻って設定に入っていきます。
Offload mediaに入ります。

順番としてはこんな感じです。

　1.WordPressの設定からOffload Mediaを開く
　2. Custom Domain (CNAME)をONにする
　3. Custom Domain (CNAME)にCloudFrontのDomain Nameを入力する
　4. save changesボタンを押して保存する
 

設定のDELIVERY、Provider,changesをクリックします。
![スクリーンショット 2022-10-03 1.23.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/e1f3db34-db51-5542-220e-29c5e6fad31b.png)

次にAmazon CloudFrontを選択して、Saveボタンをクリックします。

![スクリーンショット 2022-10-03 1.35.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/b19b108f-8ce6-43fb-ff26-7f1b087a87c1.png)

Custom Domain(CNAME)にさっき決めた　　static.aws-infra-study.xyzを入力します。
入力したら保存してください。

DELIVERYの中にあるはずです。



保存したらwordpressに投稿した画像のアドレスをコピーしてブラウザにURLを貼ってください。
static.ws-infra-study.xyzで独自ドメインでcloudfrontから配信されていたらokです。


⚫︎***注意***
実際は自分のwordpressが動かなくなってしまったので、操作はできませんでした。
画像でお見せできないので少しわかるづらいと思いますが、ご了承ください。



# 資料

https://www.udemy.com/course/aws-and-infra/?aEightID=s00000016735001&AID=190908007224&a8=PlQKLlknX1zBDBaq.wzJncu_p1fqzQucJwA5k1yg05hnX1QlC1QHRJzHrD0GZGuAv56JgVQTvlQKjs00000016735001