Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
6

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.

@mekappi(mekappi)

無料ドメインでAWS Route53 + CloudFront + アプリケーション or S3（静的サイト)を構築する

Last updated at Posted at 2019-11-21

はじめに

  • アプリケーションサーバーはAWS内で構築済みの前提
  • S3の静的サイトを作る場合の設定は以下に書きました

Amazon S3 での静的ウェブサイトのホスティング方法
https://qiita.com/mekappi/items/1354e20b275906f31e10

  • 最終ゴールはインターネット経由で→CloudFront→ アプリケーション or S3(静的サイト)にアクセスできるようにすること
  • この記事の設定例はアプリケーションの静的コンテンツをCloudFront経由で配信できるようにしていくものですが、静的サイトの運用の場合にも応用できると思います。

ドメイン取得

まずはドメインを取る
無料でドメイン取得ができるmlドメインとかを使う

Freenom
https://my.freenom.com/

好きなドメインを検索して登録します。
（この時点では何も設定しなくて良い）
今回はこの記事用に「champ-dev.ml」というドメインを取って構築していきます。

aa.JPG

ドメイン名設定

Route53を使ってDNSサーバーを設定していきます。

ホストゾーンの作成→ドメイン名に取得したドメインを入力します。

a6.JPG

作成したホストゾーンにはNSレコードが自動作成されているのでその値をコピーしておきます。
a7.JPG

Freenomに戻ります。

MyDomains
a3.JPG

ManageDomains
a5.JPG

Mabnagement Tools → Nameservers Route53でコピーした４つのNSレコードの値を
それぞれに貼り付けて登録します。

a8.JPG

これでFreenom→Route53の設定が完了です

SSL

AWSのCertificate Managerを開きます。
ここで注意なのはCloudFrontで使う証明書はリージョンがus-east1（バージニア北部）でなくてはいけません。（何故か）
なのでリージョンの切り替えを忘れずに。

パブリック証明書のリクエスト
a10.JPG

証明書を発行したいドメインを入力します。
XXX.mlとサブドメイン分の*.XXX.mlを登録しておきましょう
a11.JPG

DNSの検証
a12.JPG

▶をクリックして証明書のエクスポートを押下、DNS_Configuration.csvというファイルがダウンロードされます。
a13.JPG

ファイルにrecordNameとRecordValueが記載されています。
DNS検証を完了するためにRoute53にこの値を登録する必要があります。

a15.JPG

Route53に戻ります。
レコードセットの作成→名前にcsvのrecordName、値にRecordValueを入力してCNAMEレコードを作成します。
a14.JPG

しばらくしてCertificate Managerに戻ると状態が発行済になります。

S3バケットを作る

バケットを作り、
静的サイトの場合はhtmlファイル等をアップロードします。
アプリケーションの静的リソースをCloudFront + S3で配信したい場合もファイル作成してアップロードしておきましょう

CloudFrontを作る

ディストリビューションとオリジンとbehaviorを作ります
それぞれはこんなイメージ

  • ディストリビューション : 全体設定
  • オリジン ： 個別のサービスの設定
  • behavior : オリジンのルーティングルール

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

作成済みのキャプチャですが、新規作成時はディストリビューションとオリジンを同時に作成する画面になります。

  • Altername Doiman Names 独自ドメインを使用する場合に設定
  • SSL Certificate SSLでアクセスする場合、証明書を設定する独自ドメインを利用する場合は「Custom SSL Certificate」を選択し、独自ドメインの証明書を指定する
  • Default Root Object デフォルトのルートオブジェクトを設定 デフォルトはindex.html
  • Logging ログを取得するかを選択、S3バケットにリクエストログを出力してくれる。有料だが本番環境やデバッグの時はONにしたほうがよい
  • Bucket for Logs ログを配置するS3のバケットを選択
  • Log prefix ログファイル名の先頭に付ける文字列を指定
  • Cookie Logging ログにCookieも記録するか選択
  • Distribution State Distributionの使用準備が整った後、自動的に有効にするかを選択

ちなみにログはこんな感じ（このサンプルではcookieは出力していない）

#Version: 1.0
#Fields: date time x-edge-location sc-bytes c-ip cs-method cs(Host) cs-uri-stem sc-status cs(Referer) cs(User-Agent) cs-uri-query cs(Cookie) x-edge-result-type x-edge-request-id x-host-header cs-protocol cs-bytes time-taken x-forwarded-for ssl-protocol ssl-cipher x-edge-response-result-type cs-protocol-version fle-status fle-encrypted-fields
2019-05-21	06:29:14	NRT12-C3	333	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/content/css/loading.css	304	http://champ-dev.ml/	Mozilla/5.0%2520(Windows%2520NT%252010.0;%2520Win64;%2520x64)%2520AppleWebKit/537.36%2520(KHTML,%2520like%2520Gecko)%2520Chrome/74.0.3729.157%2520Safari/537.36	-	-	Hit	L5QfLg4DgAfaKnpgpRZPHaS_JyP8ThrcfHACWu5fyd4VLSaJ2yY0EQ==	champ-dev.ml	http	467	0.001	-	-	-	Hit	HTTP/1.1	-	-
2019-05-21	06:29:14	NRT12-C3	2885	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/	200	-	Mozilla/5.0%2520(Windows%2520NT%252010.0;%2520Win64;%2520x64)%2520AppleWebKit/537.36%2520(KHTML,%2520like%2520Gecko)%2520Chrome/74.0.3729.157%2520Safari/537.36	-	-	Miss	g0Tk2y7e_nOCihKH-XOeCPhJzRKH4DAYj8Tn4ztBR3YNawhpL_qXmQ==	champ-dev.ml	http	442	0.335	-	-	-	Miss	HTTP/1.1	-	-
2019-05-21	06:29:14	NRT12-C3	2885	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/	200	-	Mozilla/5.0%2520(Windows%2520NT%252010.0;%2520Win64;%2520x64)%2520AppleWebKit/537.36%2520(KHTML,%2520like%2520Gecko)%2520Chrome/74.0.3729.157%2520Safari/537.36	-	-	Miss	UR6HFZku3uxcY9nGa7gHKRJVB9WUaWMpvnBC3A7SQbfWurt3REncdA==	champ-dev.ml	http	423	0.154	-	-	-	Miss	HTTP/1.1	-	-
2019-05-21	06:29:14	NRT12-C3	333	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/content/css/loading.css	304	http://champ-dev.ml/	Mozilla/5.0%2520(Windows%2520NT%252010.0;%2520Win64;%2520x64)%2520AppleWebKit/537.36%2520(KHTML,%2520like%2520Gecko)%2520Chrome/74.0.3729.157%2520Safari/537.36	-	-	Hit	RZCyKJrRemWJVl_nlTg7D2JG8i4KdFyjXpZbReUgaiq-VD5R6m-__w==	champ-dev.ml	http	448	0.001	-	-	-	Hit	HTTP/1.1	-	-
2019-05-21	06:29:14	NRT12-C3	333	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/content/images/logo-jhipster.png	304	http://champ-dev.ml/content/css/loading.css	Mozilla/5.0%2520(Windows%2520NT%252010.0;%2520Win64;%2520x64)%2520AppleWebKit/537.36%2520(KHTML,%2520like%2520Gecko)%2520Chrome/74.0.3729.157%2520Safari/537.36	-	-	Hit	5b6CMCNfUCSL_wtbXW5jKch_WrkjUfGxwjWIUtzday7CG6FzB9BG2A==	champ-dev.ml	http	501	0.000	-	-	-	Hit	HTTP/1.1	-	-
2019-05-21	06:29:16	NRT12-C3	2885	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/api/scoreboards	200	http://champ-dev.ml/	Mozilla/5.0%2520(Windows%2520NT%252010.0;%2520Win64;%2520x64)%2520AppleWebKit/537.36%2520(KHTML,%2520like%2520Gecko)%2520Chrome/74.0.3729.157%2520Safari/537.36	gameGroupId=1&page=0&size=20	-	Miss	AA1nM01jaGRfOCsrxt_MPCkIbPaDuAIcmuDsDTP7uvdqgKvXqPYmXg==	champ-dev.ml	http	383	0.344	-	-	-	Miss	HTTP/1.1	-	-
2019-05-21	06:29:27	NRT12-C3	2885	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/	200	-	Mozilla/5.0%2520(iPhone;%2520CPU%2520iPhone%2520OS%252010_3_1%2520like%2520Mac%2520OS%2520X)%2520AppleWebKit/603.1.30%2520(KHTML,%2520like%2520Gecko)%2520Version/10.0%2520Mobile/14E304%2520Safari/602.1	-	-	Miss	i99Bzkx76Z9EpTGceIwh5W4qlAWQz8MjNDeLHsTn0vSfrAj68RWIKg==	champ-dev.ml	http	488	0.312	-	-	-	Miss	HTTP/1.1	-	-
2019-05-21	06:29:27	NRT12-C3	4066	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/content/css/loading.css	200	http://champ-dev.ml/	Mozilla/5.0%2520(iPhone;%2520CPU%2520iPhone%2520OS%252010_3_1%2520like%2520Mac%2520OS%2520X)%2520AppleWebKit/603.1.30%2520(KHTML,%2520like%2520Gecko)%2520Version/10.0%2520Mobile/14E304%2520Safari/602.1	-	-	Hit	u5gXWVHEh_Rs7j-RvopmIl_5OdaOxBgwzU1-7CC3p8zP25S8BMbZSg==	champ-dev.ml	http	412	0.001	-	-	-	Hit	HTTP/1.1	-	-
2019-05-21	06:29:27	NRT12-C3	127664	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/app/polyfills.bundle.js	200	http://champ-dev.ml/	Mozilla/5.0%2520(iPhone;%2520CPU%2520iPhone%2520OS%252010_3_1%2520like%2520Mac%2520OS%2520X)%2520AppleWebKit/603.1.30%2520(KHTML,%2520like%2520Gecko)%2520Version/10.0%2520Mobile/14E304%2520Safari/602.1	-	-	Hit	JwvBqo2wVdt6X0OMfe63Sx-ywm6fZyMgRJs6ntz6ZE4ngQRwIeEe5g==	champ-dev.ml	http	397	0.001	-	-	-	Hit	HTTP/1.1	-	-

d1.JPG

d2.JPG

オリジン作成

※オリジンはパブリックアクセスできるものである必要があります。
ALBがパブリックなので、設定してもcloudFront経由でアクセスも、ALBに直接アクセスも可能になります。
ALBの直接アクセスを封じたい場合は以下を参照

CloudFrontのELBオリジンへ直接アクセスする通信を制限する方法
https://dev.classmethod.jp/cloud/aws/how-to-restrict-elb-origin/

  • origin domain name オリジンを指定、ここではS3
  • origin path cloudFrontへのリクエストをオリジンサーバーの特定のパスにルーティングしたい場合に設定。 「/foo/index.html」に誘導したい場合は「/foo/index.html」と入力する。 |
  • origin path このディストリビューションを区別するための名前を設定（好きなものでOK） |
  • Restrict Bucket Access オリジンがS3の場合のみ有効 S3バケットのコンテンツへのアクセスをCloudFrontからのみに制限する場合は「Yes」を選択。S3のエンドポイントへ直接アクセスした場合もコンテンツを表示できるようにしておく場合は「No」を選択 |

まずはS3側
a1.JPG

次にアプリケーション側
今回はECSでクラスター組んでいてALBが入り口になっているのでそれを指定します。
a2.JPG
aaaa.JPG

behavior作成

  • Path Pattern このオリジンを有効にするリクエストのパスパターンを指定
  • Allowed HTTP Methods エンドユーザに許可するHTTPメソッドを選択
  • Cached HTTP Methods CloudFrontでのキャッシュが有効になるHTTPメソッドを選択
  • Forward Headers CloudFrontがオリジンサーバーに転送するリクエストヘッダーの指定と、ヘッダー値に基づいてオブジェクトをキャッシュするかの設定を行う。「Whitelist」を選択すると、ヘッダー値によってキャッシュする内容をコントロールすることが可能になる。
  • Object Caching Cloud Frontがキャッシュを保持する時間の設定。オリジンサーバーで追加したCache-Controlの時間に応じてキャッシュを保存する場合は、今回の値を設定する。ヘッダーに依存せずに時間を決める場合は「Customize」を選択し、Minimum TTLを設定する
  • Forward Cookies CloudFrontからオリジンサーバーに転送するCookieを指定。動的に作成されたコンテンツでもCookieの値が同じであればCloudFrontでキャッシュすることができる。効果的に使えばアクセスが速くなり、オリジンサーバーの負荷も下がる。なお、S3はCookieを処理できないため、オリジンサーバがS3の場合はこの機能は無効
  • Forward Query String クエリ文字列をオリジンサーバーに転送するか選択、「Yes」にすることでクエリ文字列が一致した場合はキャッシュを返すことが可能になる
  • Smooth Streaming Microsoftスムーズストリーミング形式のメディアファイルを配信する場合はYes
  • Restrict Viewer Access 署名付きURLを利用するかの選択。例えば認証されたユーザーのみにコンテンツを配信する場合等に「Yes」を選択する

S3側の値

b1.JPG
b2.JPG

アプリケーション側
bb1.JPG
bb2.JPG

これでCloudFront → App or S3ができました

Route53→CloudFront

Route53でAレコードを作ります。
ドメインと値を紐づけていく

r1.JPG

これでインターネットからアクセスできました。
完了です。

5
6
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
Sign upLogin
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?