AWSで始めるServerless React Server Side Rendering

A W S Ͱ ࢝ Ί Δ S e r
v e r l e s s R e a c t S e r v e r S i d e R e n d e r i n g ά ϥ ϯ ϑ ϩ ϯ τ Τ ϯ υ େ ࡕ 2 0 1 6 LT

H i d e t a k a O k
a m o t o • Α͘Θ͔Βͳ͍΋ͷΛ࡞Δਓ • WP APIͰNo PHPαΠτ • JSͰಠࣗυϝΠϯߪೖ • PythonͰঝೝϝʔϧॲཧ

Wo rd P re s s αΠ τ ΋ ϑϧ
J a v a S c r i p t Ͱ ߏ ங Ͱ ͖ Δ

Wo rd P re s s / P H P
֮͑ͳͯ͘ࡁΜͩ΍ͬͨʔʂ

৽ ͨ ͳ ໰ ୊ • metaλάग़ͤΜʂ • ExpressͬͯͳΜ΍ͶΜʂ •
Nodeͷαʔόϝϯς͕ŋŋŋ

ϑ ϩ ϯ τ Τ ϯ υ ͷ ͜ ͱ
ͩ ͚ ߟ ͑ ͨ ͍

ϑ ϩ ϯ τ ࡞ Δ ͷ ʹ ɺ α
ʔό ͷ ͜ ͱ ߟ ͑ ͨ ͘ ͳ ͍

α ʔόʔ ͳ Μͯ ͳ ͘ ͳ Ε ͹ ͍
͍

S E R V E R L E S S

α ʔόʔ ͷ ϝ ϯ ς ͕ ख ؒ ͳ
Β ɺ ͦ ΋ ͦ ΋ ϝ ϯ ς ͠ ͳ ͚ Ε ͹ ͍ ͍

A M A Z O N L A M B
D A • Node.js / Python / Java͕࢖͑Δ࣮ߦ؀ڥ • εέʔϧ΍ϝϯςφϯε͸AWSଆͰࣗಈతʹ • ϓϩηεΛಈ͔͚ͨ࣌ͩ͠՝ۚ

෺ཧ૚ 04 ϛυϧ΢ΣΞ "11 ෺ཧ૚ 04 ϛυϧ΢ΣΞ "11 ੹೚ڥք ੹೚ڥք
Ϋϥ΢υαʔόʔͷ৔߹ AWS Lambdaͷ৔߹

࣮ ߦ ͢ Δ ί ʔ υ Ҏ ֎ ϝ
ϯ ς ͠ ͳ ͘ ͯ ͍ ͍ ʂ

A M A Z O N L A M B
D A • Node.js / Python / Java͕࢖͑Δ࣮ߦ؀ڥ • εέʔϧ΍ϝϯςφϯε͸AWSଆͰࣗಈతʹ • ϓϩηεΛಈ͔͚ͨ࣌ͩ͠՝ۚ

A W S L a m b d a ʹ
R e a c t Λ ͭ ͬ ͜ Μͯ Έ ͨ

ख ॱ • AWS-CLIͷηοτΞοϓ • LambdaͷσϓϩΠπʔϧͷηοτΞοϓ • npm install •
Reactॻ͘ • σϓϩΠ

ख ॱ h t t p : / / b
i t . l y / 2 b Q r F 4 t h t t p : / / b i t . l y / 2 b q Z X r 0

import λ from 'apex.js';import 'babel-polyfill'; import React, { Component }
from 'react'; import { renderToString } from 'react-dom/server'; ϥ Π ϒ ϥ Ϧ Λ Π ϯ ϙʔ τ

class App extends Component { render() { return ( <div>
<h1>hello React</h1> <p>This is a Example page </p> </div> ); }; } R e a c t Λ ॻ ͘

$ n p m r u n b u i
l d

L a m b d a Ͱ Ϩϯ μ Ϧ
ϯ ά ͠ ͨ R e a c t ʹ ΞΫ η ε ͢ Δ

A M A Z O N A P I G
AT E WAY • AWS͕Ϛωʔδυ͢ΔAPIαʔόʔ • εέʔϧ΍ηΩϡϦςΟରԠ͸͓೚ͤͰ͖Δ • ϦΫΤετ਺෼͚ͩͷ՝ۚ

C o n t e n t - Ty p
e : “ t e x t / h t m l ” Λ ฦ ͢ A P I Λ ࡞ Δ

ৄ ࡉ h t t p : / / b
i t . l y / 2 b q Z X r 0

A P I G a t e w a y
ͷ U R L ʹ ΞΫ η ε ͯ͠ Έ Δ ͱ

R e a c t ͷ Ϩϯ μ Ϧ ϯ
ά ݁ Ռ ͕ H T M L ͱ ͯ͠ ද ࣔ ͞ Ε Δ

export default λ( (e, ctx ) => { return fetch(
‘http://api.wp-app.org/wp-json/' ) .then( res => { if ( res.status >= 400 ) { throw new Error('Bad request'); } return res.json(); }).then( data => { const renderedContent = renderToString( <App data={data}/>); const renderedPage = renderFullPage( renderedContent ); return renderedPage; }); }); f e t c h ͠ ͨ Β ֎ ෦ A P I ͱ ΋ ͭ ͳ ͛ Ε Δ

http://serverless.connpass.com/event/37749/

http://tokyo.serverlessconf.io/

α ʔόʔ Ϩε Ͱɺ ϑ ϩ ϯ τ Τ ϯ
υ ͷ ͜ ͱ ͩ ͚ ߟ ͑ ͞ ͤΖ ʂ

α ʔόʔ Ϩε Ͱɺ ϑ ϩ ϯ τ Τ ϯ
υ ͷ ͜ ͱ ͩ ͚ ߟ ͑ ͞ ͤΖ ʂ ੍࡞ɾஶ࡞ Ί૊ ऴ

AWSで始めるServerless React Server Side Rendering

AWSで始めるServerless React Server Side Rendering

Hidetaka Okamoto

More Decks by Hidetaka Okamoto

Other Decks in Technology

Featured

Transcript

A W S Ͱ ࢝ Ί Δ S e r

H i d e t a k a O k

Wo rd P re s s αΠ τ ΋ ϑϧ

Wo rd P re s s / P H P

৽ ͨ ͳ ໰ ୊ • metaλάग़ͤΜʂ • ExpressͬͯͳΜ΍ͶΜʂ •

ϑ ϩ ϯ τ Τ ϯ υ ͷ ͜ ͱ

ϑ ϩ ϯ τ ࡞ Δ ͷ ʹ ɺ α

α ʔόʔ ͳ Μͯ ͳ ͘ ͳ Ε ͹ ͍

S E R V E R L E S S

α ʔόʔ ͷ ϝ ϯ ς ͕ ख ؒ ͳ

A M A Z O N L A M B

෺ཧ૚ 04 ϛυϧ΢ΣΞ "11 ෺ཧ૚ 04 ϛυϧ΢ΣΞ "11 ੹೚ڥք ੹೚ڥք

࣮ ߦ ͢ Δ ί ʔ υ Ҏ ֎ ϝ

A M A Z O N L A M B

A W S L a m b d a ʹ

ख ॱ • AWS-CLIͷηοτΞοϓ • LambdaͷσϓϩΠπʔϧͷηοτΞοϓ • npm install •

ख ॱ h t t p : / / b

import λ from 'apex.js';import 'babel-polyfill'; import React, { Component }

class App extends Component { render() { return ( <div>

function renderFullPage(renderedContent) { return `<!DOCTYPE html><html><head></head> <body> <div id=“container">${renderedContent}</div> </body></html>`;

$ n p m r u n b u i

L a m b d a Ͱ Ϩϯ μ Ϧ

A M A Z O N A P I G

C o n t e n t - Ty p

ৄ ࡉ h t t p : / / b

A P I G a t e w a y

R e a c t ͷ Ϩϯ μ Ϧ ϯ

R e a c t ͷ Ϩϯ μ Ϧ ϯ

export default λ( (e, ctx ) => { return fetch(

http://serverless.connpass.com/event/37749/

http://tokyo.serverlessconf.io/

α ʔόʔ Ϩε Ͱɺ ϑ ϩ ϯ τ Τ ϯ

α ʔόʔ Ϩε Ͱɺ ϑ ϩ ϯ τ Τ ϯ