Web_アプリ_勉強会_FE_BE_.pdf

Transcript

1. React のSSR をAWS Lambda 上の Express でServerlessFramework 使っ て簡単に(?) 実装できた話 Web アプリ 勉強会(FE/BE) in Prototype-cafe Vol.1 (2019/03/19 ) 1
2. ⾃⼰紹介 Twitter: @kam1nchu 職種: フロントエンドエンジニア ⾔語: JavaScript, Java 最近: AWS ばかり触ってます 2
3. みなさんSSR してますか？ 3
4. 4
5. ではなくて 5
6. サーバーサイドレンダリング(SSR) とは 少なくとも私たちWeb デベロッパーのここ数年の⽂脈においては、 「( 元々ブラウザ上でしか動かなかった)JavaScript をサーバー内部で実 ⾏して、HTML を⽣成すること」を指します。 出典: ユーザー体験を向上させるサーバーサイドレンダリング JavaScript — 歴史と利点 6
7. サーバーサイドレンダリング(SSR) とは 今まで SPA などでは、bundle されたjs をロードし終わるまで、ブラウザに view が表⽰されなかった。 SSR 使うと 事前にある程度レンダリングしたHTML を返しておくことで、初期表 ⽰にかかる時間を短縮できる。 7
8. でもSSR って結構⼤変？ 8
9. 結構簡単( サーバー) react-dom/server の renderToString などが、component から⽂字列を くので、それをExpress でresponse.send すればサーバ側はおしまい。 import * as Express from "express"; import * as React from 'react'; import { renderToString } from 'react-dom/server'; import Component from "component"; const app = Express(); app.get("/", function (req, res) { res.send(renderToString(<Component/>)); }); // ... 9
10. 結構簡単( クライアント) サーバ側のレンダリングだけだと、React のsetState などのjs 使った処 理ができないので、クライアント側もロードさせる。 ※サーバ側でレンダリングされたDOM が再利⽤される import * as React from 'react'; import * as ReactDOM from 'react-dom'; import Component from "component"; ReactDOM.hydrate( <Component/>, document.getElementById('root') ); // ... 10
11. え、Express を使うの 11
12. Express ダルい... js 動かすので、少なくともnodejs は必要 nodejs って管理が結構⼤変 12
13. AWS Lambda 13
14. Express on Lambda aws-serverless-express や serverless-http を使うと割と難なく⾏ける import serverless from "serverless-http"; import * as Express from "express"; const app = Express(); app.get("/", function (req, res) { res.send("hello"); }); exports.handler =serverless(app); 14
15. Lambda 使うメリット フルマネージドなので管理いらず ~~( いらないとは⾔っていない)~~ Lambda はとてもスケールできる CloudFront やRoute53 など活⽤できる 15
16. AWS のデプロイって⼤変では？ 16
17. AWS のデプロイ ServerlessFramework 使えば、とても簡単にデプロイできる plugins: - serverless-webpack provider: name: aws runtime: nodejs8.10 functions: app: handler: app.handler events: - http: method: ANY path: "{proxy+}" 17
18. 他いろいろ TypeScript 使うととても捗る(serverless のテンプレートあります) react-router 使うと、クライアントとサーバのルーティングが共通 化できて便利 その時はExpress で app.get("*", () => {}) するといい API-Gateway のステージには注意( パスを上⼿に書かないと詰む) Redis やmemcached でレンダリング結果をキャッシュすることもで きるらしい 18
19. 時間があったらデモ 19
20. おわり 20