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