Riot 勉強会 #2

1. Riotでサーバーレス
にした話

2. @aggre
WWD JAPAN.com
INFAS PUBLICATIONS, INC.

3. Frontend
Backend
Git / CI
Collaboration
Technology stack

4. What
サーバーレスとは

5. インフラを任せる

6. スケーリングを任せる

7. スケーリングを任せる
彡

8. 実行時間だけで課金

9. 実行時間だけで課金
彡

10. Why
なぜサーバーレスなのか

11. パフォーマンス
可用性
コスト All OK!

12. パフォーマンス
可用性
コスト
整備不要
ベンダーロックイン

13. 開発者は
プログラミングに集中

14. How
どうやるのか

15. サーバーレスの
制約

16. プログラムと状態
は完全に切り離す
あるべき姿です

17. セッションもCookieも
使えない
これもHTTPのあるべき姿です

18. できれば
?

19. サーバサイドは
APIだけ書いていたい
ビューロジックがサーバに混ざる
とアレですしね

20. そこで...

21. フロントエンドは一切のコードを
サーバから排除して S3 に集約
バックエンドは一切のテンプレート
を排除して API を返すことに集中

22. 実際の話

23. WWD JAPAN.com

24. Before
サーバーレスにする前

26. SERVER
SERVER
SERVER
SERVER

27. MovableType から
謎の rsync

28. EC2 に全ファイル。
スケーリングできない
からよく停止する

29. After
サーバーレスにしたあと

31. SERVER
SERVERLESS
SERVERLESS
SERVERLESS
SERVERLESS
SERVER
※

32. Aurora で
フルマネージド化
Aurora はフルマネージドだがサーバーレ
スといえるほど高速なスケーリングはでき
ないのと、実行時間課金ではない

33. EC2 は管理画面だけ

34. Lambda の API から
RDS に接続

35. API Gateway で HTTP リクエス
トから Lambda を呼び出す

36. S3 に html, js, css

37. CloudFront の Error Page を
index.html にする

38. /dist/*
/*
...
/shop/123
S3
index.html
存在すればそのまま
存在しなければ
200
200
404

39. <app></app>
<script src="/dist/bundle.js"></script>
index.html

40. 404 / SSR

41. 404が返せない問題
Bot/非Bot不明問題
に対応する

43. API Gateway の
プロキシ統合で
Lambda をプロキシ
サーバにする
Lambda で SSR して、返ってきた HTML を
元に適宜ステータスコードを設定
プロキシ統合によって UA などのヘッダで
処理を自由に変えることが可能

44. いつか
CloudFrontのなかで
UAの振り分け
できないかなぁ

45. Riot
SPA

46. コンポーネント構成

47. Atomic Design
コンポーネントを分類する

48. Pages
Templates
Organisms
Molecules
Atoms

49. 名前と中身が
一致しない

50. Screens
Areas
Widgets
Compornents
Modules
Pages
Templates
Organisms
Molecules
Atoms

51. Screens

52. Areas

53. Widgets

54. Compornents

55. Modules

57. Lifecycle
アプリケーションの動かし方

58. <app>Mount
<screen-xxx>Mount
URLアクションFlux
コンテキストストアの更新Flux

59. <app>
<div ref=”screens”></div>
<script>
( … )
</script>
</app>
app.tag

60. import riot from ‘riot’
import route from ‘riot-route’
import urlListener from ‘./my/libs/urlListener’
route( urlListener )
riot.mount( ‘app’ )
init.js

61. Flux

62. riot-observable
riot-control
flux
obseriot by me

63. Action with Obseriot
action.context.replace = {
handler: {
name: ‘action_context_replace’,
action: ( screen, id, url ) => [ screen, id, url ]
} }

64. Store with Obseriot
store.context = {
state: {},
handler: {
name: ‘store_context’,
action: () => store.context.state
} }

65. Dispatch Action with Obseriot
obseriot.notify( action.context.replace,
screen,
id,
url
)

66. Reduce Store with Obseriot
obseriot.listen( action.context.replace, ( s, i, u) =>
{
store.cotext.state = { screen: s, id: i, url: u }
obseriot.notify( store.context )
} )

67. <screen-xxx>Mount
URLアクションFlux
コンテキストストアの更新Flux
URLが変更されるたびに繰り返し

68. context, history, browser, windowSize,
user, posts, modal, menu, ad, ...
なるべく多くの状態をストアで管理

69. キャッチされない例外が発生したら
ストアのデータを送信すれば、
バグの改善につながる
window.onerror = msg => {
mySendFn( msg, getAllState() )
}

70. How much
いくらするのか

71. CloudFront
API Gateway
Lambda
S3
RDS
EC2
$3,703
Before
$6,737
After
$3,490
Now
CloudFront + API Gateway +
Lambda + S3
$773
インスタンス変えるの
サボっているだけ

72. CloudFront 3,732 GB
API Gateway 360.12 GB
Lambda 9,910,208.48 s
12,710,517 Request
S3 ...
Cost