コンテンツにスキップ

[読書]サーバレスシングルページアプリケーション

#spa #JavaScript #OReilly #tdd #しがないラジオ

📕 読んだ本
サーバーレスシングルページアプリケーション
――S3、AWS Lambda、API Gateway、DynamoDB、Cognitoで構築するスケーラブルなWebサービス

💪 モチベーション

  • サーバサイド(ありきで開発してきた)エンジニアだったので、「サーバレス」ということがどういうことなのか知りたかった。
  • 個人ではAWSは触ったことがなかったので、触れておきたかった。
  • しがないラジオ ep.19 で @zuckey_17 さんがおすすめしていて、ピンときたのが一番のきっかけ。
  • AWSは先に料金体系を学ばないとどこでお金がかかるのかわからなくて着手しにくいが、ちょっとAWSのことをしらべても料金体系が決してわかりやすい印象がなく、まずは手っ取り早く触りたかった。
  • しがないラジオで聴いた感触で、「本のボリュームが軽く、本のとおりに写経ですすめていけば無料でセキュリティやスケールアップのことを含めてスタディできる」というのが好印象だったので、やってみた。
  • 実用的な内容になっているという前評価をみた。チュートリアルが終わっても、セキュリティやスケールアップの観点がないと、「とはいえ、現実問題案件としてつかえるの？😒」ということになりがちなので、それが書かれている良書だと思ってスタディすることにした。

🕐 かかった時間など

  • 期間 2021/6/2 〜 2021/8/16
  • トータル時間 37 hくらい。 途中以下に記載するところでだいぶハマったので、それがなければさらっと終われるはず
  • やりかた
    • githubに写経用のリポジトリをつくって、各項理解したことをREAME.mdにメモしながら
    • チュートリアル用のリポジトリは、Forkしたリポジトリ をサブモジュールにしてすすめた。

Note

スタディしたメモ等を残した親リポジトリは、書籍側の著作権を考慮して非公開にしています

🍛 完成したもの

http://learnjs.ngwork0301.com.s3-website-us-east-1.amazonaws.com/

  • 書籍の写経のとおりつくったもの。JavaScriptのスタディを想定して、コードをフォームに入力して、答え合わせをするアプリ

Warning

Google認証して、解答を保存できる機能がありますが、本当のWebサービスではないので、現状はテスト用の一部の指定アカウントに制限してあります。

😄 ざっくりと理解したこと

  • まずハリボテのWebページをAmazon S3にいれてしまえば、それだけでサービスができあがる。先にデプロイしてしまって、肉付けしながら開発するのがモダンな開発手法。今回は、著者が用意したAWS SDK/CLIをつかった簡単なスクリプト(sspa)ですぐにデプロイできた。
  • ルーティングもすべてクライアント側JSで書ける。つまり最初のリクエストでプログラムの動作のほとんどをブラウザにロードさせる。
  • 一部のサーバサイドの処理が必要な部分ももちろんあるが、従来のようなサーバサイドのプログラムを用意する必要はない。
    • 認証処理は、この例ではAWS CognitoからGoogle認証させる方法でおこなえる。クライアントサイドからの呼び出しと設定だけでセキュアに使える。
    • DB関連の処理は、DynamoDBとAWSの機能をつかって、こちらもクライアントサイドからのクエリ実行と設定だけでセキュアに使える。
    • Lambdaをつかって、フロントだけではできない処理はマイクロサービスとして呼び出せる。たとえば今回の例では統計情報を集める処理で使用した。
  • セキュリティの観点では、むしろ自前でサーバプログラムをつくらないでことでAWSのしくみ乗っかって守ってもらうような印象。ただしセキュリティ対策は従来どおり必要なので、各観点でAWSを使う場合にどう対策する/してあるのか調べて必要な部分を適用すること。
  • AWS CloudWatchでログをとって、統計情報(書籍ではシェル芸でとった)をみて、スケールアップの有無をチェック。料金体系とのバランスで各制限を変更。とくに一番最初にひっかかりそうなのはDynamoDB周りの読み書きのスレッショルド。とはいえ、かなりのことが無料の範囲でできる。

😂 ハマったところ

Cognito/Google認証がなかなかうまくいかなかった。

  • 結局写経したときの3箇所のスペルミスによって発生していた。
  • 一旦写経やめて模範解答のソースにいれかえてもうまく動作していなかったので、クライアントサイドではないと思い込んでいた。JSだけでなくhtmlにもミスがあって複合的な現象になっていた。
  • デバッグのやり方のコツをつかむ必要がある。今回はAWS SDKをつかっているVendor.jsがMinifyされているため、クライアント側もデバッグしづらかったのと、サーバサイドはクラウドの雲に潜って掘り出す感覚。認証についてのクラウド側の設定に問題はなさそうということがわかるまで時間を要した。
  • ハマったおかけで、AWS Webコンソールの見方とaws cliの使い方の理解が深まった(笑)。
  • JavasSriptというか関数側言語のデバッグのコツをつかむ必要があった。Java/Pythonのデバッグではスタックトレースをベースにみるが、JSではどこから呼ばれてどこにいくのかわかりにくかった。
  • ESLintをいれてあったのでスペルミスなどは安心していた。ちゃんとチェックされていたのだろうか。VSCodeの設定がまずかった？JSの開発環境まわりはもう少しちゃんとスタディしておいたほうがよさそう。

Amazon API GatewayをつかったLambda関数の呼び出しが何度やってもコケる。

  • Amazon API Gatewayは書籍を執筆したころからだいぶ変わってしまった様子
  • CloudWatchをAWSのヘルプから先にスタディするなどして、クラウド側のログを強化して対策した。
  • 結論、POSTリクエストでの引数の引き渡しがうまくいってなかった。
  • 「マッピングテンプレート」というのを編集して、対象の引数problemNumberがルート要素として、Lambda側に渡るように設定したら解決した。Lambda側で受け取るリクエストの中身が、入れ子になっていた様子。掘り出してとってくるようにLambda側で直しても良いが、AWS SDKからの呼び出しとどちらもつかえるようにするには、リクエストの中身をいじる必要があった。

🎉 感想

  • 簡単にクラウドベースのWebアプリがつくれたのはよかった。つらいAWSの料金体系とかセキュリティとかを軽く理解しつつ、あまり意識せずにこれができるのはやはりうれしい。
  • SPAはいわゆるPoC(Proof of Concept)のような形でソフトウェアの試作を素早く作成するのに向いている印象。ある程度市場の手応えをえた段階でも、AWSの設定でスケールアップもできるので、しばらくはつかってもらえるレベルのものはつくれる印象。前に会社でソフトウェアの試作大会のようなことをする機会があったが、そのときに知りたかった感。
  • とはいえ、上記でめっちゃハマってたので、自分には初回では爆速では作れなかった。２回、３回目とつくっていけば、開発速度はかなり上がるはず。
  • 本書も基本TDDで進められている。テスト駆動開発 の読書後のスタディだったので、テスト駆動開発自体の理解をさらに深めることができたのはよかった。たとえばEtoEのテストばかり書かずに細かい粒度で網羅的に書くことの重要性＝FIREなテストスイートなど。
  • ハマったときはなかなか進まずツラかった。自分がこれまでやってきた開発のようにサーバサイドのログはとれず、ブラウザに帰ってきたレスポンスで調査を始める必要があり、デバッグのコツがつかめなかった。しかもAWS用語が多すぎる。スタディに時間がかかって、AWS固有のノウハウはスタディのモチベーションがあがらない部分も少なからずあった。

😔 よくなかったところ(本を選ぶ上での反省点)

  • 書籍が古いので、内容もすこし古い。古すぎて差し支えるということはなかったが、とくにAWS API Gatewayの使い方などはだいぶ差が出ていた。もう他にこの時期に読み進めているひと(Forkしている人)は今はいない感があった。
  • typoのプルリクを出したけど、著者のBen Radyさんももうこのリポジトリをメンテンスしていないのか、マージされず。初めてのプルリクなのでやり方がよくなかったか？簡単すぎる内容なのでissueを切っていないのがよくなかった？
  • jQueryである。サーバレスシングルページアプリケーションを学ぶのであれば、モダンなフレームワークをつかっているほうがよさそう。「りあクト」という書籍でFirebase + React.jsベースでのSPA作成が紹介されているのをあとから知って、そちらを読めばよかった感がある。
  • とはいえ、自分にはjQueryに多少なりとも親しみがあったのと、軽くEC2以外のAWSの感触が学べたのでこれはこれでよかった。

🔭 今後の展望など

  • これを中心に、社内の試作・提案、個人開発などでつかってみて、試作をサクッとつくれる基盤を整えることができたらよいなぁという希望
  • 世の中のどのくらいのSaasがSPAになっているのか気になるので、調査してみたい。ロードされたJSをみてみたり、Wappalyzerで使われている技術を分析してみたりしてみれば、ある程度のことはわかりそう。
  • JSフレームワークも仕事でつかっていないので、ちゃんとはスタディしていない。Vue.jsを少しみたくらい。最近復権しているReact.jsをちゃんと学んでみるか。
最終更新日: August 24, 2021