Web_アプリ_勉強会_FE_BE_.pdf

 Web_アプリ_勉強会_FE_BE_.pdf

3801449bcb3341af467284e9f370cad5?s=128

kaminchu

March 19, 2019
Tweet

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