CloudFrontの設定(S3をオリジンサーバーとした利用例)

CloudFrontを活用すると「レスポンス速度の向上」「オリジンサーバーの負荷軽減」といったメリットがあります。ここでは、S3をオリジンサーバーとしてCloudFrontの利用方法を確認します。

用語

オリジンサーバー

ELB EC2 S3 API Gateway などのコンテンツ配信元を オリジンサーバー と言います。

API Gateway は内部でCloudFrontが使われていますが WAF をつけられません。そのため、別途CloudFrontを使うケースがあります。 つけれるようになったようです。

参考

ディストリビューション

CloudFrontの設定単位です。オリジンサーバーの設定、キャッシュの設定など行います。
ディストリビューションごとに dxxxxxxxxxxxx.cloudfront.net というドメインが割り当てられます。

参考

エッジロケーション

オリジンサーバーから取得したコンテンツをキャッシュして、配信します。
CloudFront DNSがユーザーの位置情報を近いエッジロケーションにルーティングします。

参考

オリジンサーバーを作成

今回は、静的ウェブサイトホスティング用に設定した S3バケット をオリジンサーバーとして利用します。

<!doctype html>
<html lang="ja">
  <head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>
669-aws-cloudfront_s3_1.png

上記ソースをS3にアップしています。

669-aws-cloudfront_s3_2.png

S3バケットを静的ウェブサイトホスティング用として設定してます。

curlでアクセスしてみます。

$ curl -i http://xxxxxxxxxxxxxxxxxxxxxxx.s3-website-ap-northeast-1.amazonaws.com/
HTTP/1.1 200 OK
x-amz-id-2: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x-amz-request-id: xxxxxxxxxxxxxxxx
Date: Sun, 21 Apr 2019 03:17:08 GMT
Last-Modified: Sun, 21 Apr 2019 03:12:12 GMT
ETag: "b4405f180ab80b4f338cf4399630e544"
Accept-Ranges: bytes
Content-Type: text/html
Content-Length: 148
Server: AmazonS3

<!doctype html>
<html lang="ja">
  <head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

参考

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

669-aws-cloudfront_cf1.png

Create Distributionをクリックします。

669-aws-cloudfront_cf2.png

コンテンツの配信方法を選択します。
今回は、Webを選択します。

RTMPは、動画配信などのときに利用するもののようです。

669-aws-cloudfront_cf3.png

S3による静的ウェブサイトホスティングのドメインを設定します。

669-aws-cloudfront_cf4.png

キャッシュルールを設定します。

オリジンサーバーのほうで Cache-Controlヘッダーを設定している場合、Use Origin Cache Headersを選択します。

669-aws-cloudfront_cf5.png

dxxxxxxxxxxxx.cloudfront.net というドメインの代わりに、独自のドメインを設定することができます。

参考
代替ドメイン名 (CNAME) を追加してカスタム URL を使用する

設定が完了したら、 Create Distribution クリックします。下記のようにディストリビューションが作成されます。

669-aws-cloudfront_cf6.png

StatusDeployed になれば利用できます。10~15分ほどかかります。

669-aws-cloudfront_cf7.png

作成後も、各ディストリビューションのページから、設定編集できます。

動作確認

StatusDeployed になったので、動作確認してみます。

初めてのアクセス
( Miss from cloudfront )

curlでアクセスしてみます。

$ curl -i https://dxxxxxxxxxxxx.cloudfront.net/index.html
HTTP/2 200
content-type: text/html
content-length: 148
date: Sun, 21 Apr 2019 03:48:12 GMT
last-modified: Sun, 21 Apr 2019 03:12:12 GMT
etag: "b4405f180ab80b4f338cf4399630e544"
accept-ranges: bytes
server: AmazonS3
x-cache: Miss from cloudfront
via: 1.1 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.cloudfront.net (CloudFront)
x-amz-cf-id: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

<!doctype html>
<html lang="ja">
  <head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

初めてアクセスしたので、x-cache: Miss from cloudfront となりました。

もう1度アクセス
( Hit from cloudfront )

もう1度アクセスします。

$ curl -i https://dxxxxxxxxxxxx.cloudfront.net/index.html
HTTP/2 200
content-type: text/html
content-length: 148
date: Sun, 21 Apr 2019 03:48:12 GMT
last-modified: Sun, 21 Apr 2019 03:12:12 GMT
etag: "b4405f180ab80b4f338cf4399630e544"
accept-ranges: bytes
server: AmazonS3
age: 20
x-cache: Hit from cloudfront
via: 1.1 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.cloudfront.net (CloudFront)
x-amz-cf-id: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

<!doctype html>
<html lang="ja">
  <head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

今度は x-cache: Hit from cloudfront となっており、Cacheが利用されたようです。

Popular Objects Report というページにて、目的のディストリビューションを選択して、キャッシュヒット率を確認できます。

669-aws-cloudfront_cf8.png

キャッシュの削除
( Invalidation )

管理画面から削除

669-aws-cloudfront_invalidation_1.png

目的のディストリビューションページにて、Invalidationタブを選択します。

Create Invalidationをクリックします。

669-aws-cloudfront_invalidation_2.png

削除するパスを入力します。今回は全パスを削除するので、/*と入力しました。

669-aws-cloudfront_invalidation_3.png

StatusCompleted となれば削除完了です。

AWS CLIで削除

以下のように、AWS CLIでも削除可能です。

aws cloudfront create-invalidation --distribution-id $CDN_DISTRIBUTION_ID --paths "/*"

参考

参考

【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。