Pro Yearly is on sale from $80 to $50! »

AWSで始めるServerless React Server Side Rendering

AWSで始めるServerless React Server Side Rendering

グランフロント大阪2016 LT資料です。

75486cbfd37125f121cf4a6c5614601c?s=128

Hidetaka Okamoto

August 28, 2016
Tweet

Transcript

  1. 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
  2. H i d e t a k a O k

    a m o t o • Α͘Θ͔Βͳ͍΋ͷΛ࡞Δਓ • WP APIͰNo PHPαΠτ • JSͰಠࣗυϝΠϯߪೖ • PythonͰঝೝϝʔϧॲཧ
  3. Wo rd P re s s αΠ τ ΋ ϑϧ

    J a v a S c r i p t Ͱ ߏ ங Ͱ ͖ Δ
  4. Wo rd P re s s / P H P

    ֮͑ͳͯ͘ࡁΜͩ΍ͬͨʔʂ
  5. ৽ ͨ ͳ ໰ ୊ • metaλάग़ͤΜʂ • ExpressͬͯͳΜ΍ͶΜʂ •

    Nodeͷαʔόϝϯς͕ŋŋŋ
  6. ϑ ϩ ϯ τ Τ ϯ υ ͷ ͜ ͱ

    ͩ ͚ ߟ ͑ ͨ ͍
  7. ϑ ϩ ϯ τ ࡞ Δ ͷ ʹ ɺ α

    ʔό ͷ ͜ ͱ ߟ ͑ ͨ ͘ ͳ ͍
  8. α ʔόʔ ͳ Μͯ ͳ ͘ ͳ Ε ͹ ͍

    ͍
  9. S E R V E R L E S S

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

    Β ɺ ͦ ΋ ͦ ΋ ϝ ϯ ς ͠ ͳ ͚ Ε ͹ ͍ ͍
  11. None
  12. A M A Z O N L A M B

    D A • Node.js / Python / Java͕࢖͑Δ࣮ߦ؀ڥ • εέʔϧ΍ϝϯςφϯε͸AWSଆͰࣗಈతʹ • ϓϩηεΛಈ͔͚ͨ࣌ͩ͠՝ۚ
  13. ෺ཧ૚ 04 ϛυϧ΢ΣΞ "11 ෺ཧ૚ 04 ϛυϧ΢ΣΞ "11 ੹೚ڥք ੹೚ڥք

    Ϋϥ΢υαʔόʔͷ৔߹ AWS Lambdaͷ৔߹
  14. ࣮ ߦ ͢ Δ ί ʔ υ Ҏ ֎ ϝ

    ϯ ς ͠ ͳ ͘ ͯ ͍ ͍ ʂ
  15. A M A Z O N L A M B

    D A • Node.js / Python / Java͕࢖͑Δ࣮ߦ؀ڥ • εέʔϧ΍ϝϯςφϯε͸AWSଆͰࣗಈతʹ • ϓϩηεΛಈ͔͚ͨ࣌ͩ͠՝ۚ
  16. A W S L a m b d a ʹ

    R e a c t Λ ͭ ͬ ͜ Μͯ Έ ͨ
  17. ख ॱ • AWS-CLIͷηοτΞοϓ • LambdaͷσϓϩΠπʔϧͷηοτΞοϓ • npm install •

    Reactॻ͘ • σϓϩΠ
  18. ख ॱ 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
  19. import λ from 'apex.js';import 'babel-polyfill'; import React, { Component }

    from 'react'; import { renderToString } from 'react-dom/server'; ϥ Π ϒ ϥ Ϧ Λ Π ϯ ϙʔ τ
  20. class App extends Component { render() { return ( <div>

    <h1>hello React</h1> <p>This is a Example page </p> </div> ); }; } R e a c t Λ ॻ ͘
  21. function renderFullPage(renderedContent) { return `<!DOCTYPE html><html><head></head> <body> <div id=“container">${renderedContent}</div> </body></html>`;

    } export default λ( (e, ctx) => { const renderedContent = renderToString( <App /> ); const renderedPage = renderFullPage( renderedContent ); return (renderedPage); }); S S R ͯ͠ re t u r n ͢ Δ
  22. $ n p m r u n b u i

    l d
  23. L a m b d a Ͱ Ϩϯ μ Ϧ

    ϯ ά ͠ ͨ R e a c t ʹ ΞΫ η ε ͢ Δ
  24. None
  25. A M A Z O N A P I G

    AT E WAY • AWS͕Ϛωʔδυ͢ΔAPIαʔόʔ • εέʔϧ΍ηΩϡϦςΟରԠ͸͓೚ͤͰ͖Δ • ϦΫΤετ਺෼͚ͩͷ՝ۚ
  26. C o n t e n t - Ty p

    e : “ t e x t / h t m l ” Λ ฦ ͢ A P I Λ ࡞ Δ
  27. ৄ ࡉ h t t p : / / b

    i t . l y / 2 b q Z X r 0
  28. A P I G a t e w a y

    ͷ U R L ʹ ΞΫ η ε ͯ͠ Έ Δ ͱ
  29. R e a c t ͷ Ϩϯ μ Ϧ ϯ

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

    ά ݁ Ռ ͕ H T M L ͱ ͯ͠ ද ࣔ ͞ Ε Δ
  31. 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 ͱ ΋ ͭ ͳ ͛ Ε Δ
  32. None
  33. http://serverless.connpass.com/event/37749/

  34. http://tokyo.serverlessconf.io/

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

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

    υ ͷ ͜ ͱ ͩ ͚ ߟ ͑ ͞ ͤΖ ʂ ੍࡞ɾஶ࡞ Ί૊ ऴ