React のSSR をAWS Lambda 上の Express でServerlessFramework 使っ て簡単に(?) 実装できた話 Web アプリ 勉強会(FE/BE) in Prototype-cafe Vol.1 (2019/03/19 ) 1

⾃⼰紹介 Twitter: @kam1nchu 職種: フロントエンドエンジニア ⾔語: JavaScript, Java 最近: AWS ばかり触ってます 2

みなさんSSR してますか？ 3

4

ではなくて 5

サーバーサイドレンダリング(SSR) とは 少なくとも私たちWeb デベロッパーのここ数年の⽂脈においては、 「( 元々ブラウザ上でしか動かなかった)JavaScript をサーバー内部で実 ⾏して、HTML を⽣成すること」を指します。 出典: ユーザー体験を向上させるサーバーサイドレンダリング JavaScript — 歴史と利点 6

サーバーサイドレンダリング(SSR) とは 今まで SPA などでは、bundle されたjs をロードし終わるまで、ブラウザに view が表⽰されなかった。 SSR 使うと 事前にある程度レンダリングしたHTML を返しておくことで、初期表 ⽰にかかる時間を短縮できる。 7

でもSSR って結構⼤変？ 8

結構簡単( サーバー) 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()); }); // ... 9

結構簡単( クライアント) サーバ側のレンダリングだけだと、React のsetState などのjs 使った処 理ができないので、クライアント側もロードさせる。 ※サーバ側でレンダリングされたDOM が再利⽤される import * as React from 'react'; import * as ReactDOM from 'react-dom'; import Component from "component"; ReactDOM.hydrate( , document.getElementById('root') ); // ... 10

え、Express を使うの 11

Express ダルい... js 動かすので、少なくともnodejs は必要 nodejs って管理が結構⼤変 12

AWS Lambda 13

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

Lambda 使うメリット フルマネージドなので管理いらず ~~( いらないとは⾔っていない)~~ Lambda はとてもスケールできる CloudFront やRoute53 など活⽤できる 15

AWS のデプロイって⼤変では？ 16

AWS のデプロイ ServerlessFramework 使えば、とても簡単にデプロイできる plugins: - serverless-webpack provider: name: aws runtime: nodejs8.10 functions: app: handler: app.handler events: - http: method: ANY path: "{proxy+}" 17

他いろいろ TypeScript 使うととても捗る(serverless のテンプレートあります) react-router 使うと、クライアントとサーバのルーティングが共通 化できて便利 その時はExpress で app.get("*", () => {}) するといい API-Gateway のステージには注意( パスを上⼿に書かないと詰む) Redis やmemcached でレンダリング結果をキャッシュすることもで きるらしい 18

時間があったらデモ 19

おわり 20