サーバーレスを使用して最初の６ヶ月で学んだ６つのこと


>こちらの記事は[6 things I’ve learned in my first 6 months using serverless](https://read.acloud.guru/six-months-of-serverless-lessons-learned-f6da86a73526)の和訳になります。

サーバーレスの世界は適切なツールさえ見つければミドルレイヤーを省けるのでとても良いものです。

10月に行われた[Serverlessconf](https://serverlessconf.io/)の後、自分の会社を全てサーバーレスにすることに決めました。最初の２ヶ月は　[Python Flask appにLambdaを導入する](https://read.acloud.guru/adventures-in-migrating-to-serverless-a63556b39042)のに必死でしたが、そのおかげでより良い方法を思いつきました。

そして６ヶ月後、私たちにとって４番目に大きいプロジェクトをサーバーレスでデプロイすることになったのです。以下の内容がデプロイするまでに私たちが学んだ教訓、意見です。

##レッスン１　Pythonの使用は避けましょう
Flaskは昔ながらのリクエスト、レスポンスのスタイルで、サーバーによって管理されるセッションがあるWebサイトにとってはぴったりのフレームワークです。とてもいいのですが、今の時代のインタラクティブなWebサイトにとっては輪ゴムと水切りワイパーで家を建てるようなものです。
![1_zxfBj5hPtinpfRJK3_CGpQ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407975/f4e69b64-e15a-37bf-0482-45418a1cf983.png)
<sup>昔のやり方：Python Flask appをElastic Beanstalkで起動し、データをRDSに保存する</div></sup>

Webページに動きを出すためにクライアントサイドをやっていくうちにJavaScriptを使わざるを得なくなっていきます。結局Pythonテンプレートをカスタマイズせざるを得なくなり、技術的負債を産み出してしまいます。

Flaskでの解決方法は複数の言語を使ってその場しのぎの解決策にますますなっていきました。このアプローチが間違っていると私はすぐに気がつき、なぜPythonをつかっているのかがわからなくなってきました。

Nodeに移行してからは全てが管理しやすく合理的で、一つの言語で済むようになりました。WebpackでのNode/Expressのシンプルな環境設定、そしてPythonデベロッパーからからかわれていたJavaScriptの厄介な構文が取り除かれたES6をも使うことができます。

Zappa/Flaskを使って同じようなことをするのは、恐ろしく過酷です。しかしLambda上で動くNode/Expressのアプリを作るのは５分で簡単にできます。なので私の会社はPythonを使うのをやめ、Javascriptのエコシステムを活用する事にしたのです。
![0_cIeYrB-v2NlRgbe6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407975/7fcac7c3-5501-d738-5cc7-1c5dbd02e534.png)
<sup>モノリシックなLambda関数</sup>

では私たちは何を犠牲にしたのか。Pythonを使うデベロッパーはPythonのいいところを語りますが、実用的なJavaScriptの非同期処理に比べたらただの小道具でしかありません。それにもうPythonのバージョン２や３（アップグレードするかもわかりませんが）の心配もする必要がなくなったのです。少なくとも私たちのプロジェクトでは簡単に変更することができました。

[Ben Kehoe](https://medium.com/@ben11kehoe) はサーバーレスに関する[自身の見解](https://read.acloud.guru/node-is-the-wrong-runtime-for-serverless-jk-c69595f6a8eb)を訴えているので、そちらも合わせて見てみてください。
![1_wpOWBlixtMgEsPRlcxOE6Q.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407975/d8c478f0-6474-3952-f25e-c5325b7e0f0f.png)

##レッスン２　ミドルレイヤーを省きましょう
サーバーレスの利点について気づくのにかなりの時間を要しました。私たちがウェブアプリばかり作っているからか、もしくは年かもしれません。

私たちが手掛けたいくつかのウェブアプリは、状況に対応するために、セッションを記憶するNode /Expressの層がありました。
1) ユーザーが同じLambdaを何回もクリックしたと思い込んで間違った時　
2) DynamoDBにセッションIDを何度も何度も記憶させた時
いったい何をやっていたのでしょう。。。

「移行」の時期、私たちはラムダにWebサーバーのような働きを持たせていました。これは間違いであり、とても悪いことです。なので結局HTMLのページからJavascriptでREST APIを呼んでいました。このやり方はとても原始的で、メンテナンス性も悪くすぐにダメになりました。結局私たちはミドルレイヤーを無くしました。サーバーレスではミドルレイヤーは取り除かなければいけません。

![0_zOcQl4UwJ9FchYxt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407975/aad7874a-af9a-189e-1d38-68a54dae4f60.png)
<sup>状態はクライアント側で保持し、logicはLambdaで保持する
</sup>

##レッスン３　Vueを使いましょう

全てをフロントエンドにまとめられるのはとても楽ですが、すぐにぐちゃぐちゃになってしまいます。最終的には恥ずかしさのあまりコードをチェックするのをやめてしまいます。「コードを確認しないこと」はデベロッパーにとっては致命的です。

シングルぺージアプリケーション(SPAs)の世界に入りユーザーインタフェースを作るにあたって、人気のReactと出会いました。Reactはとてもいいのですが、Webpack/Babelのセットアップや、JSXなどと学ぶことがたくさんあります。いつかは使うかも知れないものでしたが、早急に必要な代わりとしては荷が重すぎました。

幸いなことに[Vue.js](https://vuejs.org/)と出会い、私のサーバーレスの人生は至福を迎えました。Vueは1日で学べます。

Vue.js、 AWS Lambda、Travis CI、 そして Github を使って作ったページ[https://t.co/Ck6sz39ks4](https://t.co/Ck6sz39ks4)を見てみてください。元はHerokuにPug/Sass/Expressを使ってあげていました。コストはほぼ０になり、GitHubにバックアップされているので、コードがどれだけ汚いかを一目で確認できるようになりました。 — [@danhannigan](https://twitter.com/danhannigan/status/979477162393612288)

Vueは私たちのデザインモデルにぴったりフィットしました。全てのコンポーネントが個々の内容、デザインとコードを管理します。これにより様々な顧客のプロジェクトや役割分担を管理するのが楽になっただけでなく、サーバーレスも可能になったのです。

このオープンソースのJavascriptフレームワークは優秀なデバッグのツール、とても優れた構成、そしてたくさんの時間を節約してくれるWebpackが備わっています。ルーターを置いて管理用のプラグインを使えばFacebookのエンジニアのように沢山のリアルタイムアプリを作ることができます。シングルぺージアプリケーションがこんなに素晴らしいなんて誰が思っていたでしょうか。

サーバーレスの観点から見て、Vueは全てのファイルをindex.html と bundle.jsのファイルにコンパイルします。主にS3にアップロードする為です。`npm run build`がコンパイルするコマンドになります。

考えてもみて下さい。一昔前まではアプリを作るのにElastic Beanstalk や必要な時にはAutoscalingを使い、かなりの量のインフラを管理してたでしょう。

シングルぺージアプリケーションの醍醐味は「デプロイ」する時になります。index.html、bundle.jsやその他依存ファイルをCloudFrontと連携させたS3にアップロードするだけです。テキストファイルを管理するだけで、安定したディストリビューションとローディング、異なるバージョン管理、そして好きなデプロイ方法が提供されます。

スケーリングは自由自在で、使用した分だけ払います。そのためアプリのインフラ管理は必要でなくなります。

![0_gf2GPPJ2GuB62Bft.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407975/4aec4d01-434e-3441-b1cf-716339969176.png)


Vueでは基本的にはブラウザ内でデスクトップアプリを作ることができますが、それはユーザーエクスペリエンスを格段に上げる事を意味します。全ての状態はHTTPリクエスト無しで管理でき、トランジションといったスタンダードなUIトリックで誤魔化すことによりアプリケーションが正しく動作しているように見せることが出来ます。

##レッスン４　DynamoDBを使いましょう

多くの点でサーバーレスにするのに一番厄介なのがDynamoDBを正しく理解することです。。皆最初の段階で必ず何らかのミスをするので、全てを投げ出し、良くわかっていて使い勝手の良いRDSに結局戻ってしまいます。

私自身も今までデータベースに過剰なビジネスロジックを置いていたことは否めませんが、RDBMSはレガシーで拡張性に乏しく、アジャイルシステムには合いません。

DynamoDBは全く別の生き物です。きちんと使いこなせば、NoSQLデータベースはとても速く拡張性があり、余計なコストはかかりません。ですがどのように動くのかを見極める為に特に初めの段階でたくさんの時間を費やさなければいけません。

<blockquote class="twitter-tweet" lang="ja">&mdash; Amazon Web Services (@awscloud) <a href="https://twitter.com/awscloud/status/989840843388411904?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E989840843388411904&ref_url=https%3A%2F%2Fread.acloud.guru%2Fmedia%2F2cc3fdd67b8f5f1ce8ec589fcf653061%3FpostId%3Df6da86a73526">Apr 27, 2018</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Dynamoのテーブルは空の文字列を挿入することはできません。そしてバックアップは自動ではありません。もしパーティションとソートキーを間違えたら、テーブルを一から作り直さなければいけません。SQLクエリに似せようとするとテーブルが少なすぎたり、時には多すぎたりしてしまいます。RDSに慣れていると、Dynamoはまるでエイリアンのように思えてしまいます。

沢山のチュートリアルや試行錯誤の後ついにDynamoDBを習得しました。以下が学んだことです。

- DynamoDBがどのような仕組みになっているかを理解しないといけません。インデックスをどのように扱うか、クエリをどのようにデータにするか。全部知ってるべき事を学ばずに始めることは簡単ですが、結局失敗してRDBMSに間違ったタイミングで戻っていく人達が沢山います。失敗してもやり通さなければいけません。

- DynamoDBを語る上であまり語られないことが、あたかもSQLのトリガーのようにストリームを使ってテーブルのイベントにコードを繋げる事ができる事です。これはとても頼もしいです。

- DynamoDBが他のストレージシステム(RDBMS、 Redshift 、もしくはただのテキストファイル)と繋げられる事、そして急激なトラフィックの増加や膨大なデータを含んだデータベースに対応できることを忘れてはいけません。DynamoDBはレコードの有効期限を決めるTTLの機能があります。これは一時的なデータを他の場所にプッシュする際に大変役立ちます。

![0_T_pYtoufH6Jbg_AH.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407975/8298fe7e-7bfb-9361-1acb-d30ef002f1b2.png)


##レッスン５　Serverless Frameworkを使いましょう

Lambdaを使い始めた頃はイライラしながらAWSのコンソールに直接コードを打ち込み、ちょっとした事をやるだけなのにかなりの労力を費やしエラーメッセージが出る事に腹が立ちました。IDEと生産する環境が整っていなかったのです。

[Serverless Framework](https://serverless.com/)を見つけた時はここ何年も味わった事のないような興奮を覚えました。

`sls deploy` はとてもパワフルで、私たちが書いたコードをローカルから直接Amazonにデプロイします。もし何か不具合がありログを確認したいなら、`sls logs -f functionname -t`をタイプしCloudWatchのログをローカルで確認することができます。

これにより全てが変わりました。Serverless FrameworkのCommitter達はAWSやGCPが最初から提供すべき事をやっているので賞賛されるに値します。Serverless Frameworkは素晴らしく、私たちに多くの恩恵をもたらします。

<blockquote class="twitter-tweet" lang="ja">&mdash; Simon Wardley #EEA (@swardley) <a href="https://twitter.com/swardley/status/799420770875277313?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E799420770875277313&ref_url=https%3A%2F%2Fread.acloud.guru%2Fmedia%2Fd828e9a512689a35e138911f7a6e8f8d%3FpostId%3Df6da86a73526">Nov 17, 2016</a></blockquote>

##レッスン６　JWTを使いましょう

従来のアプリではユーザーを一度承認したら、セッションIDによってそのユーザーを随時確認しています。この方法はとても便利で、１度認証を行えば、ユーザーのログイン状況やその期限についてはセッションIDが何とかしてくれます。

![0_WqG5t_wfMmWSIkWS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407975/87687c84-7129-fa29-1391-28b3ff62002c.png)


しかしこのやり方には落とし穴があります。サーバーがミドルレイヤーにある時でないと使えないのですが、私たちはそのサーバーを無くしてしまいました。さらにはクロスサイトリクエストフォージェリ (CSRF) といった外部からの攻撃にもさらされる可能性がある上に簡単には他のサービスにID をパスできません。つまりこのやり方はレガシーなやり方なのです。

レガシーな構成やCSRFの攻撃は避けたいものです。そこで登場するのが、[JWTトークン](https://jwt.io/)です。これがどのように動作するかを学んだ時はとても心が穏やかになりましたが、説明には図を要します。

ステップ１、JWTをダウンロードし、全てのサービスに繋げます。

![0_gQuLLljLfz_Sed9q.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407975/ab6200b3-c5ae-7703-950a-0d404c8ea11c.png)
<sup>よくある最初のステップ：認可プロセスがJWTトークンを受け取る</sup>

![0_4HmZSEr0tLdnZ86c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407975/9530274e-13d7-67ff-f04a-d39211015b45.png)
<sup>次のステップが魔法のよう：どんなLambda関数でも受け入れてバリデーションをしてくれます。</sup>

基本的にはリクエストが送られる度に認証が行われます。クライアントは複数のサーバーレスコードと繋げることができます。セキュリティに強い上にモノリシック対策やCSRFはJWTには必要ありません。サーバーレスコード上で必要なのは、オーソライザーをカスタムし、JWTのヘッダーが有効かを確認するだけです。（ボイラープレートを使って）

JWTのせいで他の承認システムは難しく見えてしまいます。[Auth0](https://auth0.com/)（たまにCognito）を使い始めてから他は見なくなりました。サーバーレス認証はとても簡単で効率的です。

<blockquote class="twitter-tweet" lang="ja">&mdash; James Beswick (@jbew) <a href="https://twitter.com/jbesw/status/990206289627242496?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E990206289627242496&ref_url=https%3A%2F%2Fread.acloud.guru%2Fmedia%2F6018e64764e18b73a47ce8a397b06d1c%3FpostId%3Df6da86a73526">Apr 28, 2018</a></blockquote>

##学んだこと

AWSを長年使ってきたにも関わらず、こんなに満足感を得たのは初めてです。EC2の分野に関しても沢山の人に助けて頂きました。Cloud Guruのサーバーレスコンフェレンスの後、未開拓の分野で希望の光を見つけた気分になりました。
<blockquote class="twitter-tweet" lang="ja">&mdash; Serverlessconf (@Serverlessconf) <a href="https://twitter.com/Serverlessconf/status/988430960256520192?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E988430960256520192&ref_url=https%3A%2F%2Fread.acloud.guru%2Fmedia%2Ff560aa1a4ac44289ed43d47a7d26c5a6%3FpostId%3Df6da86a73526">Apr 23, 2018</a></blockquote>

私たちの最初の試みでは今あるツールやテクニックを使おうとして失敗しました。軌道に乗り始めたその数ヶ月後、正式に100％サーバーレスでプロジェクトを作り始めました。コードの移行にあたり起こった様々な困難がいい勉強になったと心から信じています。

私たちはサーバーレスのインフラや自由自在なスケールを持ち、70 - 90%のコスト削減をしたスムーズなリアルタイムSPAアプリを作っています。その結果に私は嬉しさと驚きを隠せません。今まで以上にサーバーレステクノロジーが革命的なアプリをクラウドの世界にもたらす事を信じてなりません。


## 翻訳協力

Author: [James Beswick](https://read.acloud.guru/@jbesw)
Thank you so much for letting us share your knowledge! 
翻訳/記事作成: @azumana 
記事の翻訳から作成まで幅広くフォローアップ頂きましたm(_ _)m