寄付支援サイト part2 -SPA&サーバレス-

#SPA#VueJS#サーバレス

前回は寄付支援サイトを作ろうと思った理由について述べました。 http://roy29fuku.com/web/vue-js/donation-support/what-is-donation/   part2では技術的な挑戦内容を（勉強しながら）まとめます。 本プロジェクトでは以下の技術・概念の理解・習熟を目指します。

  • SPA（シングルページアプリケーション）
  • サーバレスアーキテクチャ

SPA（シングルページアプリケーション）とは

はじめに一枚のHTMLをロードし、以降はユーザの操作に応じて動的にページを書き換えていくウェブアプリです。   通常ウェブサイトを開くと、ページ遷移の度にHTMLとかCSSとかJSとかを読み込みます。 でもダブりが多く、それだけ無駄に通信していることになります。   SPAでは必要な部分だけを書き換えるのでレスポンスが高速になります。

サーバレスアーキテクチャとは

AWS Lambdaに代表されるFaaS（Function as a Service）やBaaS（Backend as a Service）で構成されたアーキテクチャです。   オンプレのサーバやEC2ではサーバごとにOSやミドルウェアの管理をしなくてはならず、運用コストが重いものでした。 また、これらのサーバは基本的に常時起動していなくてはなりません。 例えば季節や曜日に応じてアクセス数が大きく変わるものでは、あまりアクセスがないときにリソースが無駄になってしまいます。   サーバレスにすることで、運用コストを抑えたり、完全な従量課金を実現したりすることが可能になります。

目標

まずはこちらのスライドのような構成で小さく作ります。 https://speakerdeck.com/cloneko/hazimetefalsespawo-sabaresudezuo-ru-with-angularjs-plus-s3-plus-lambda-plus-api-gateway-plus-route-53   ただしJSのフレームワークはVue.jsを使います。 次回から、まずはVue.jsでサンプル的にSPAを作ってみます。

おまけ

理想はこんな感じです。 ここまで立派なものは作れませんが、少しずつ付け加えて良いものにしていきたいです。 https://www.slideshare.net/masayuki-kato/serverless-awsspa

参考