Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web_アプリ_勉強会_FE_BE_.pdf

 Web_アプリ_勉強会_FE_BE_.pdf

Avatar for kaminchu

kaminchu

March 19, 2019
Tweet

More Decks by kaminchu

Other Decks in Programming

Transcript

  1. React のSSR をAWS Lambda 上の Express でServerlessFramework 使っ て簡単に(?) 実装できた話

    Web アプリ 勉強会(FE/BE) in Prototype-cafe Vol.1 (2019/03/19 ) 1
  2. 4

  3. サーバーサイドレンダリング(SSR) とは 今まで SPA などでは、bundle されたjs をロードし終わるまで、ブラウザに view が表⽰されなかった。 SSR

    使うと 事前にある程度レンダリングしたHTML を返しておくことで、初期表 ⽰にかかる時間を短縮できる。 7
  4. 結構簡単( サーバー) 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
  5. 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
  6. AWS のデプロイ ServerlessFramework 使えば、とても簡単にデプロイできる plugins: - serverless-webpack provider: name: aws

    runtime: nodejs8.10 functions: app: handler: app.handler events: - http: method: ANY path: "{proxy+}" 17
  7. 他いろいろ TypeScript 使うととても捗る(serverless のテンプレートあります) react-router 使うと、クライアントとサーバのルーティングが共通 化できて便利 その時はExpress で app.get("*",

    () => {}) するといい API-Gateway のステージには注意( パスを上⼿に書かないと詰む) Redis やmemcached でレンダリング結果をキャッシュすることもで きるらしい 18