【翻訳】Super Fast Dynamic Websites with CloudFront, ReactJS, and NodeJS - Part 1

Super Fast Dynamic Websites with CloudFront, ReactJS, and NodeJS - Part 1

Paul Coady / October 03, 2016

以下のブログを作者(Paulさん)の許可を得て翻訳しています。
http://blog.backspace.academy/2016/10/super-fast-dynamic-websites-with.html

誤訳は申し訳ありません。正しくはオリジナルを参照願います。
ご連絡頂けると幸いです。

---

CloudFront は、ウェブベースのアプリケーションの配備において、必須の構成要素です。非常に低レイテンシでのパフォーマンスを簡単に提供するだけでなく、最大のサーバ稼働でありながら劇的にサーバの費用を下げます。

低レイテンシな静的ウェブサイトを CloudFront で作成することは、比較的簡単なプロセスだ。あなたは、ただ、あなたのサイトを S3 にアップロードして、CloudFront のディストリビューションを作成すればよい。これは HTML5 のウェブサイト、そして、Jeckyl といった静的ブログのサイトにとても良い。しかし、リアルタイムに情報を生成しエンドユーザに届けるダイナミックなサイトの場合はどうであるか？これには異なる戦略が必要です。ダイナミックなサイトにおける様々なキャッシュの手法について、たくさん公表されています。しかし、私はこの目的を達成する最も一般的で信頼性のある技術を紹介します。

Server Side v Browser Side Rendering

もし、いくつかの Node.js の本を読んだなら、サーバ上で Jade テンプレートを使った多くのレンダリングの例があることは疑わないだろう。もし、まだこれをやっているなら、あなたは価値あるサーバリソースを無駄に消費している。より良い選択は、ブラウザ上でレンダリングすることだ。これに特化したフレームワークはたくさんある。もっとも有名なものは、Facebook の ReactJS と、Google の AngularJS だ (State of JS report参照)。私は個人的に ReactJS を使っており、後の例でも ReactJS になるだろうが、どっちを使ってもかまわない。

ReactJS または AngularJS をつかってサイトを作成し、NodeJS の公開ディレクトリにおけば、レンダリングをサーバ側からクライアントのブラウザ側にシフトすることができる。あなたのアプリケーションのユーザは、ボタンのクリックによって、ページが描画され、見れるようになるまで、もう待たされることはない。

ここで、ReactJS と AngularJS を使ったサイトのために、CloudFront ディストリビューションを作成しよう。

ページはブラウザで簡単に描画されるにもかかわらず、描画のための動的なデータは CloudFront にキャッシュされてしまうだろう。私たちはほとんど、動的なデータをキャッシュされることを望まない。このデータをブラウザに届けるために、何か解決策が必要だ。

Handling Dynamic Data

CloudFront を使って動的データを扱うための、多くの精巧な技法が公開されてきたにもかかわらず、もっとも良い方法は、全てのデータをキャッシュしないことだ。

CloudFrontでは、全ての HTTP メソッドがキャッシュされるわけではなく、GET と HEAD リクエストだけ(OPTIONS リクエスト をキャッシュするかどうか設定することができる)である。もし、別のメソッド、例えば、POST、PUT、DELETE などを使った場合は、CloudFront にキャッシュされない。CloudFront は、これらのリクエストを、単純にバックエンドのサーバにプロキシするだけだ。

私たちの EC2 にある Node.js サーバは、 アプリケーションのための API を作成することにより、動的データのリクエストに応答するために使用することができる。その API は、クライアントのブラウザからの POST リクエストに応答するのだ。

読者のいくつかは、我々がどうして、AWS Lambda や API Gateway のようなサーバレス技術を使わないのか不思議に思うかもしれない。後でこれらを使用した別の記事を投稿するだろう。しかし、私は、ほとんどのアプリケーションにとって、EC2 は好適な技術だと考えている。まずコストについて、サーバレスの議論ではあまり言及されない。もしあなたのアプリケーションが非常に多くのトラフィックがあるなら、従来型の EC2/ELB アーキテクチャは、最もコスト効果が高いだろう。二番目に、多くのモダンな Web アプリケーションでは Websocket 接続を利用している。このタイプの接続は、(プロキシプロトコルを使った) ELB の背後にある EC2 で実現可能である。しかし、サーバレス技術では、コネクションは短いため、これを実現することはできない。

このシリーズの次の投稿では、EC2 上に NodeJS サーバを構築し、CloudFront ディストリビューションを設置し、動的データを扱うための API を作成しよう。

あなたは、最新のアップデートを取得できるように、ブログを購読してください。

もっと多くの AWS トレーニングやチュートリアルは、backspace.academyをチェックしてください。