More than 3 years have passed since last update.

[AWS]画像の配信方法

Posted at 2020-02-08

2020年2月8日現在の内容です。

構成イメージ

画像の保存場所をWebサーバーではなくS3にする理由

Webサーバーのストレージが画像で一杯になることを防ぐ
HTMLへのアクセスと画像へのアクセスを分けることで負荷分散する
サーバーの台数を拡張しやすい
- Webサーバー上に画像が保存されていると、Webサーバーの台数を増やした際に、画像を同期する必要があり、スケールアウトが難しい
- 画像の保存場所は分離されていたほうがWebサーバーの台数を簡単に増やすことができる
コンテンツ配信サービスから配信することで、画像配信を高速化できる

用語説明

S3(Simple Storage Service)

安価で耐久性の高いAWSのクラウドストレージサービス

特徴

0.023USD/GB・月と安価(1GB約3円/月)
99.999999999%の高い耐久性
容量無制限(1ファイル最大5TBまで)
バケットやオブジェクトに対してアクセス制限を設定できる

重要概念

バケット
- オブジェクトの保存場所(名前はグローバルでユニークな必要がある)
オブジェクト
- S3に格納されるファイルで、URLが付与される(データ本体)
- バケット内オブジェクト数は無制限
キー
- オブジェクトの格納URLパス

利用シーン

静的コンテンツの配信
- img画像はS3から配信する
バッチ連携用のファイル置き場
- S3にファイルを置いて、バッチでそのファイルを参照して処理を行う
ログなどの出力先
- 定期的にS3にログを送る
静的ウェブホスティング
- 静的なWebサイト(ランディングページ等)をS3から公開する

CloudFront

高速にコンテンツを配信するサービス
CDN(Content Delivery Network)のサービス

オリジンサーバー(元となる画像を配信するサーバー)上にあるコンテンツを世界中100箇所以上にあるエッジロケーション(データセンター)にコピーし、そこから配信する

特徴

高速
- ユーザーから最も近いエッジロケーションから画像を配信する
効率的
- エッジサーバーでコンテンツのキャッシングを行うので、オリジンサーバーに負荷をかけずに配信できる

ディストリビューション

CloudFrontの設定(ルール)

SSLサーバー証明書

Webサイトの運営者が存在することを保証し、ブラウザとWebサーバーで暗号化通信を行う際の電子証明書

Certificate Manager

SSLサーバー証明書の管理を行うAWSサービス

CNAME

すでに定義されているドメイン名に対し別名を定義すること

S3のバケット作成

AWSコンソールからS3を検索し、クリック

「バケットを作成する」をクリック

以下の通り設定し、「次へ」をクリック
バケット名：一意の名前

以下の通り設定し、「次へ」をクリック
サーバーアクセスのログ記録：本番環境ではチェックしたほうが良い

以下の通り設定し、「次へ」をクリック

設定内容を確認し、「バケットを作成」をクリック
「パブリックアクセスをすべてブロック」がオフになっていること

バケットが作成されていることを確認

S3操作用のIAMユーザー作成

AWSコンソールからIAMを検索し、クリック

サイドバーから「ユーザー」をクリック

「ユーザーを追加」をクリック

以下の通り設定し、「次のステップ」をクリック

タグは設定せず、「次のステップ」をクリック

設定内容を確認し、「ユーザーの作成」をクリック

CSVのダウンロードを行うこと

ユーザーが作成されていることを確認

WordPressの設定

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

WordPressの管理画面を開く

ログイン

サイドバーのプラグイン　→　新規追加をクリック

WP offload mediaを検索し、「今すぐインストール」をクリック

「有効化」をクリック

WP offload mediaが有効化になっていることを確認

ライブラリをインストール

ターミナルからEC2へSSHログイン
ssh -i test-ssh-key.pem ec2-user@18.179.167.73

ライブラリをインストール
sudo yum install -y php-xml
sudo yum install -y php-gd

ライブラリを反映

[ec2-user@ip-10-0-10-10 ~]$ sudo systemctl restart httpd.service

プラグインの設定

WordPressの管理画面をリロード

設定　→　Offload Media Liteをクリック

offload mediaの定義情報をコピーしておく

wp-config.phpを開く

[ec2-user@ip-10-0-10-10 ~]$ cd /var/www/html/
[ec2-user@ip-10-0-10-10 html]$ ls
index.php        wp-blog-header.php    wp-cron.php        wp-mail.php
license.txt      wp-comments-post.php  wp-includes        wp-settings.php
readme.html      wp-config-sample.php  wp-links-opml.php  wp-signup.php
wp-activate.php  wp-config.php         wp-load.php        wp-trackback.php
wp-admin         wp-content            wp-login.php       xmlrpc.php
[ec2-user@ip-10-0-10-10 html]$ vi wp-config.php

wp-config.phpに定義情報を貼り付ける