投稿日：2019年11月3日

【XSERVER】Amazon S3でWEBコンテンツを管理する【Amazon S3】

XSERVER上で、サブドメイン用のコンテンツを「Amazon S3」で管理します。そのため、「Amazon S3」のエンドポイントをCNAMEで設定します。

S3のコンテンツをサブドメインで管理
必要なもの
XSERVERのサブドメインを作る
Amazon S3のバケット作成
Amazon S3にアップロード
Static web hosting の設定
サブドメインの CNAME 設定
s3でHTTP化設定
表示テスト

S3のコンテンツをサブドメインで管理

XSERVERのサブドメインにアクセスしたときに、「Amazon S3」のコンテンツを表示させます。

XSERVERで写真やイラスト画像などを管理するには、そのままXSERVERのストレージにアップロードすればそのまま利用できます。WordPressなどでは、「メディアに追加」に画像をアップロードして記事に貼り付けるだけで画像を表示します。ページの画像リンクをクリックすると、以下のようなURLで管理されていることがわかります。

https://hombre-nuevo.com/wp-content/uploads/yyyy/MM/imagename.jpg

この「imagename.jpg」をS3に保存します。そしてXSERVERに設定したサブドメインをバケットに登録し、サブドメインのURLでS3のコンテンツ（imagename.jpg）を表示できるようにします。

今回の目的

独自ドメインをXserverに設定。こちらのDNSを使用します。
サブドメインにアクセスしたときに、Amazon S3 のコンテンツを表示します。
サブドメインは、HTTPSでアクセスします。

必要なもの

今回の作業をするにあたり、必要なものは以下の通りです。

独自ドメイン→ムームードメインなどから購入
XSERVER
AWS

前提条件

独自ドメイン	ムームードメインで購入しました。DNSはXSERVERのものを利用しています。サブドメインをつくりました。
サーバ	XSERVERを利用しています。ドメインは、ムームードメインで購入したものを設定し、サブドメイン作成済み。
AWS	アカウント取得済み。
s3の料金	ホストしている容量に対し、従量課金 (2-3 円/GB) です。

Amazon S3とは？

Amazon S（Simple Storage Service）3とは、AWSの中のサービスの1つで、クラウド型のオブジェクトストレージサービスです。

1GBあたり0.025ドル（東京リージョン、2019年10月現在）と破格の安さです。公式に99.999999999%の耐久性を謳っていて、安さと高可用性が抜群です。

Amazon CloudFrontとは？

Amazon CloudFrontは、Amazon Web Services（AWS）のCDN（コンテンツデリバリネットワーク）サービスです。コンテンツファイルをサーバーから直接配信せず、CDNを介してユーザーに配信します。

キャッシュサーバーやプロキシサーバーのようなものです。キャッシュサーバーとは、ネットワーク上であるサーバが外部に提供しているデータの複製を保存し、そのサーバに代わって応答するサーバのことです。

XSERVERのサブドメインを作る

XSERVERに登録した独自ドメインから、サブドメインを作ります。

→エックスサーバーのサブドメインサイトにWordpressをインストール

Amazon S3のバケット作成

Amazon S3にバケットを作成します。

①AWSのコンソールにログインします。S3の画面に進んでください。

→AWS

②バケットを作成します。

②サブドメインを含んだURLを記述します。

(例: サブドメイン.独自ドメイン.com という名のバケットを作成)

サブドメインを含んだURLを使わないと、のちのちの設定でAWS S3 からアクセスエラーがでます。

③その他の設定は、特に何も設定変更せずに進めます。

④バケットの作成直後のトップページがこちらです。バケットが作成されたことが確認できます。

Amazon S3にアップロード

テスト用のファイルをAmazon S3にアップロードしてみます。

①任意にHTML ファイル (index.html) を作成します。

<html>
<body>
<h1>hello world!</h1>
</body>
</html>

②バケットのリンクをクリックします。

アップロードをクリックします。

③アップロードします。アップロードの際も特に設定の変更は必要ありません。

④アップロード後は、このようにリストで確認できます。

Static web hosting の設定

Static web hosting の設定を行います。エンドポイントを選択した際、index.htmlを開くという設定を行います。

①バケットのリンクをクリックします。

②プロパティタブを選択して、「Static web hosting」をクリックします。

③「このバケットを使用してウェブサイトをホストする」をクリックして、インデックスドキュメントに「index.html」を入力します。最後に保存します。

ここまでの作業で、上記のエンドポイントを選択した際に、指定したファイル (index.html) を開くという設定ができました。

デフォルトでは、ファイル共有は「OFF」です。この状態でエンドポイントにアクセスしてもエラーがでます。後のCloudFrontの設定で、CloudFront からのファイルアクセスを許可するようにします。

サブドメインの CNAME 設定

Amazon S3のエンドポイントとサブドメイン入りURL を紐づけます。サブドメイン入りURLからAmazon S3 のデータにアクセスできるようにします。

①XSERVERのサーバーパネルにアクセスします。

②DNSレコードの設定をクリックします。

DNSレコードとは、権威DNSサーバがドメイン名とIPアドレスを対応させるときに使用するゾーンファイルの各行の内容のことです。ゾーンファイルとは、権威DNSサーバが使用するドメイン名とIPアドレスの対応表です。つまり、サブドメイン（ホスト名）とS3に作成した静的ファイルのエンドポイントを関連付けしてDNSサーバに知らせます。

③サブドメインを設定したドメイン名をクリックします。

③「DNSレコードの追加」タブをクリックして、サブドメインの CNAME として、S3のエンドポイントを設定します。入力が完了したら「確認画面へ進む」をクリックします。

ホスト名	今回使用するサブドメインを入力します。
種別	「CNAME」を設定します。
内容	「Static web hosting の設定」で表示したエンドポイントを入力します。

DNSレコードにはいくつか種別がありますが、今回はCNAMEレコードを設定します。このCNAMEとは、正規ホスト名に対する別名（エイリアス）を定義します。特定のホスト名を別のドメイン名に転送する時などに利用します。

④追加確認が表示されますので、「追加」をクリックします。

登録後は、リストからCNAMEで登録されていることが確認できます。

DNSの設定には、少々時間がかかります。 (丸 1 日かかる場合もあるようです)。

ちなみに、サブドメインをいくら増やしても、追加のコストはかかりません。

s3でHTTP化設定

CloudFrontを利用しHTTPS 化する場合は不要な設定です。

しかし、XSERVERのネームサーバーを利用したドメインだとどうも「AWS Certificate Manager」が上手に設定できませんでした。HTTPのままにするため以下のような設定を行います。

①「サービス」→「s3」と進み、s3バケットのページを表示します。今回作成したバケットをクリックします。

②ブロックパブリックアクセスを設定します。「アクセス権」タグ→「ブロックパブリックアクセス」と進みます。「編集」をクリックします。

③すべてチェックをはずします。最後に「保存」をくりっくします。

④「アクセス権」タグ→「パケットポリシー」と進みます。

⑤バケットポリシーエディターに以下の内容を記述します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::バケットの名前(※1)/*"
        }
    ]
}

(※1)今回作成したサブドメインを記述します。

例）sub.example.com