Help us understand the problem. What is going on with this article?

[AWS]画像の配信方法

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

構成イメージ
スクリーンショット 2020-02-08 10.13.09.png

画像の保存場所を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を検索し、クリック
スクリーンショット 2020-02-02 17.12.45.png

「バケットを作成する」をクリック
スクリーンショット 2020-02-02 17.15.12.png

以下の通り設定し、「次へ」をクリック
バケット名:一意の名前
スクリーンショット 2020-02-02 17.21.14.png

以下の通り設定し、「次へ」をクリック
サーバーアクセスのログ記録:本番環境ではチェックしたほうが良い
スクリーンショット 2020-02-02 17.24.54.png
スクリーンショット 2020-02-02 17.25.11.png

以下の通り設定し、「次へ」をクリック
スクリーンショット 2020-02-02 17.36.25.png
スクリーンショット 2020-02-02 17.37.55.png

設定内容を確認し、「バケットを作成」をクリック
「パブリックアクセスをすべてブロック」がオフになっていること
スクリーンショット 2020-02-02 17.39.58.png
スクリーンショット 2020-02-02 17.40.52.png

バケットが作成されていることを確認
スクリーンショット 2020-02-02 17.45.53.png

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

AWSコンソールからIAMを検索し、クリック
スクリーンショット 2020-02-02 17.50.02.png

サイドバーから「ユーザー」をクリック
スクリーンショット 2020-02-02 17.53.04.png

「ユーザーを追加」をクリック
スクリーンショット 2020-02-02 17.55.40.png

以下の通り設定し、「次のステップ」をクリック
スクリーンショット 2020-02-02 17.58.23.png

以下の通り設定し、「次のステップ」をクリック
スクリーンショット 2020-02-02 18.03.26.png

タグは設定せず、「次のステップ」をクリック
スクリーンショット 2020-02-02 18.06.23.png

設定内容を確認し、「ユーザーの作成」をクリック
スクリーンショット 2020-02-02 18.07.50.png

CSVのダウンロードを行うこと
スクリーンショット 2020-02-02 18.09.25.png

ユーザーが作成されていることを確認
スクリーンショット 2020-02-02 18.11.52.png

WordPressの設定

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

WordPressの管理画面を開く
スクリーンショット 2020-02-02 19.56.48.png

ログイン
スクリーンショット 2020-02-02 19.59.13.png

サイドバーのプラグイン → 新規追加をクリック
スクリーンショット 2020-02-02 20.00.28.png

WP offload mediaを検索し、「今すぐインストール」をクリック
スクリーンショット 2020-02-02 20.03.47.png

「有効化」をクリック
スクリーンショット 2020-02-02 20.05.26.png

WP offload mediaが有効化になっていることを確認
スクリーンショット 2020-02-02 20.06.50.png

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

ターミナルから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の管理画面をリロード
スクリーンショット 2020-02-02 20.17.42.png

設定 → Offload Media Liteをクリック
スクリーンショット 2020-02-02 20.18.48.png

offload mediaの定義情報をコピーしておく
スクリーンショット 2020-02-02 20.22.35.png

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に定義情報を貼り付ける
スクリーンショット 2020-02-02 20.36.44.png

IAMユーザー作成時にダウンロードしたCSVをもとにaccess-key-id,secret-access-keyを入力

offload mediaのページをリロード
スクリーンショット 2020-02-02 20.52.33.png

「Browse existing buckets」をクリックし
スクリーンショット 2020-02-02 20.54.58.png

作成したバケットを選択し、「Save Selected Bucket」をクリック
スクリーンショット 2020-02-02 21.14.00.png

設定が保存されていることを確認
スクリーンショット 2020-02-02 21.16.14.png

「Remove Files From Server」をONに変更し、「Save Changes」をクリック
スクリーンショット 2020-02-02 21.17.56.png

画像のアップロード

投稿 → 投稿一覧をクリック
スクリーンショット 2020-02-02 21.26.43.png

「編集」をクリック
スクリーンショット 2020-02-02 21.28.00.png

「画像の追加」をクリック
スクリーンショット 2020-02-02 21.30.27.png

画像がアップロードされていることを確認
スクリーンショット 2020-02-02 21.33.00.png

「更新」をクリック
スクリーンショット 2020-02-02 21.34.47.png

WordPressのページに画像が表示されていることを確認
スクリーンショット 2020-02-02 21.36.24.png

AWSコンソールからS3を検索し、クリック
スクリーンショット 2020-02-02 21.39.26.png

対象のバケットをクリック
S3に画像が保存されていることを確認
スクリーンショット 2020-02-02 21.49.38.png

CloudFrontから配信

ディストリビューションの作成

AWSコンソールからCloudFrontを検索し、クリック
スクリーンショット 2020-02-08 10.24.13.png

「Create Distribution」をクリック
スクリーンショット 2020-02-08 10.25.56.png

WEBの「Get Started」をクリック
スクリーンショット 2020-02-08 10.33.42.png

Origin Domain Nameを指定し、「Create Distribution」をクリック
Origin Domain Name:作成したS3
Restrict Bucket Access:CloudFrontのみアクセスする(S3にはアクセスしない)
スクリーンショット 2020-02-08 11.20.57.png
スクリーンショット 2020-02-08 11.21.59.png
スクリーンショット 2020-02-08 11.22.16.png

ディストリビューションが作成されていることを確認
スクリーンショット 2020-02-08 11.26.39.png

独自ドメインから配信

SSLサーバー証明書の発行

ディストリビューションのIDをクリック
スクリーンショット 2020-02-08 11.29.17.png

「Edit」をクリック
スクリーンショット 2020-02-08 11.30.52.png

「Request or Import a Certificate with ACM」をクリック
スクリーンショット 2020-02-08 11.44.42.png

作成したドメイン名を追加し、「次へ」をクリック
(ドメイン名の前に「*.」を付与することでサブドメインに対応できる)
スクリーンショット 2020-02-08 12.12.28.png

「DNSの検証」にチェックを入れ、「次へ」をクリック
スクリーンショット 2020-02-08 12.16.41.png

タグを任意追加し、「確認」をクリック
スクリーンショット 2020-02-08 12.26.04.png

設定内容を確認し、「確定とリクエスト」をクリック
スクリーンショット 2020-02-08 12.28.44.png

「Route 53でのレコードの作成」をクリック
スクリーンショット 2020-02-08 12.31.57.png

「作成」をクリック
スクリーンショット 2020-02-08 12.33.43.png

適用したドメイン全てのレコードを作成したら、「続行」をクリック
(レコードの名前が同じ場合、レコードの作成は1つで良い)
スクリーンショット 2020-02-08 12.35.56.png

SSLサーバー証明書が発行されたことを確認
スクリーンショット 2020-02-08 12.40.33.png

独自ドメインを登録

AWSコンソールからCloudFrontを検索し、クリック
ディストリビューションのIDをクリック
「Edit」をクリック
スクリーンショット 2020-02-08 12.46.35.png
スクリーンショット 2020-02-08 12.47.13.png

以下の通り入力し、「Yes,Edit」をクリック
Alternate Domain Names:適用したいドメイン名(今回はサブドメイン「static」を付与)
SSL Certificate:「Custom SSL Certificate」にチェックし、発行したSSLサーバー証明書を選択
スクリーンショット 2020-02-08 12.54.17.png
スクリーンショット 2020-02-08 12.56.34.png

設定内容が反映されていることを確認
スクリーンショット 2020-02-08 12.59.52.png

CNAMEレコードの作成

AWSコンソールからRoute 53を検索し、クリック
ホストゾーンをクリック
対象のドメイン名をクリック
スクリーンショット 2020-02-08 13.50.39.png
スクリーンショット 2020-02-08 13.56.41.png
スクリーンショット 2020-02-08 13.57.52.png

「レコードセットの作成」をクリック
スクリーンショット 2020-02-08 14.00.30.png

以下の通り設定し、「作成」をクリック
名前:CloudFrontで定義したサブドメイン
タイプ:CNAME
値:CloudFront DistributionのDomain Name
スクリーンショット 2020-02-08 14.06.36.png

レコードセットが作成されていることを確認
スクリーンショット 2020-02-08 14.10.44.png

Offload Mediaの設定

WordPressの管理画面から設定 → Offload Media Liteをクリック
スクリーンショット 2020-02-08 14.18.45.png

「Custom Domain」をON、CloudFrontで定義したドメイン名を入力し、「Save Changes」をクリック
スクリーンショット 2020-02-08 14.24.17.png

設定が保存されたことを確認
スクリーンショット 2020-02-08 14.40.20.png

参考

AWS:ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得

welmo
介護福祉の課題をテクノロジーで解決するサービスの開発と、子どもの可能性を解放する障がい児支援施設を運営しています。
https://welmo.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away