8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

S3 + CloudFront でコンテンツを配信してみた

Last updated at Posted at 2018-09-20

Amazon S3 バケットをオリジンとして設定し、
ウェブブラウザを使用してディストリビューションをテストし、
コンテンツが配信されていることを確認します。

作業前に[test-image.png]という名前でに適当なサンプル画像を用意しておいてください。


###1.Amazon S3 パケットを作成する

Amazon S3 を開き、「パケットを作成する」をクリックするとパケットの作成画面が表示されます。
バケット名 に「任意の名前」、リージョンに「アジアパシフィック(東京)」を選択し、「次へ」と進みます。
*既に存在しているパケット名は登録できません。
E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102018.51.36.png

[オプションの設定] は今回すべて無効にしておき、「次へ」と進みます。
E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102018.55.05.png

[アクセス許可の設定]を設定できますが、今回は何もせず、「次へ」と進みます。
E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102018.55.19.png

「バケットの作成」をクリックし完了です。
E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102018.57.59.png

作成されたバケット名をクリックします。
E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102018.59.00.png

「アップロード」をクリックし、「ファイルを追加」からダウンロードしておいた test-image.png を選択し、「次へ」と進みます。
E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102019.09.53.png

[アクセス許可を設定する] タブで画像をパブリック(外部との通信)で読み取れるようにします。
S3 はデフォルトでプライベート(内部のみ)に設定されています。
[パブリックアクセス許可を管理する] を「このオブジェクトにパブリック読み取りアクセス権限を付与する」 に変更し、「次へ」と進みます。
E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102019.15.31.png

[プロパティを設定する] オプションでは今回は何もせず「次へ」と進みます。
E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102019.15.42.png

「アップロード」します。
E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102019.16.35.png

###2.Amazon CloudFrontをを起動する

CloudFrontを開き、[Create Distribution (ディストリビューションを作成)]をクリックします。
E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102019.23.06.png

[Origin Domain Name (オリジンのドメイン名)] で、test-image.png を保存したS3 バケットの名前を選択し、一番下の [Create Distribution (ディストリビューションを作成)] をクリックします。
E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102019.30.22.png

ディストリビューションが作成されたらステータスが[In Progress (実行中)] から [Deployed (デプロイ済み)] に変わります。
E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102022.33.19.png

CloudFrontによってディストリビューションに割り当てられたドメイン名は、ディストリビューションの一覧に表示されます。
[Distribution ID (ディストリビューションID)] をクリックすると、[Domain Name (ドメイン名) ] に CloudFront ドメインが表示されているページに移動します。
E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102019.45.36.png

###3.リンクをテストする

コンピュータのテキストエディターを開き以下の HTML コードをコピーして貼り付けます。

<html>
<head>My CloudFront Test</head>
<body>
<p>My text content goes here.</p>
<p><img src="http://domain-name/object-name" alt="my test image"
</body>
</html>`

たとえば、ドメイン名が d111111abcdef8.cloudfront.net で、オブジェクトが image.jpg の場合、リンクの URL は次のようになります。
http://d111111abcdef8.cloudfront.net/image.jpg

参考:
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/distribution-web-testing.html

E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102022.29.00.png

###4.ディストリビューションを無効にする手順

作成したディストリビューションの隣にあるチェックボックスを選択して、「Disable (無効)」 をクリックするだけです。
E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102022.33.35.png


参考
例: 静的ウェブサイトをセットアップする
例: Amazon CloudFront でウェブサイトを高速化する

8
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?