Slide 1
Slide 1 text
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
Slide 2
Slide 2 text
H i d e t a k a
O k a m o t o
• Α͘Θ͔Βͳ͍ͷΛ࡞Δਓ
• WP APIͰNo PHPαΠτ
• JSͰಠࣗυϝΠϯߪೖ
• PythonͰঝೝϝʔϧॲཧ
Slide 3
Slide 3 text
Wo rd P re s s αΠ τ
ϑϧ J a v a S c r i p t Ͱ ߏ ங Ͱ ͖ Δ
Slide 4
Slide 4 text
Wo rd P re s s / P H P
֮͑ͳͯ͘ࡁΜͩͬͨʔʂ
Slide 5
Slide 5 text
৽ ͨ ͳ
• metaλάग़ͤΜʂ
• ExpressͬͯͳΜͶΜʂ
• Nodeͷαʔόϝϯς͕ŋŋŋ
Slide 6
Slide 6 text
ϑ ϩ ϯ τ Τ ϯ υ ͷ ͜ ͱ ͩ ͚
ߟ ͑ ͨ ͍
Slide 7
Slide 7 text
ϑ ϩ ϯ τ ࡞ Δ ͷ ʹ ɺ
α ʔό ͷ ͜ ͱ ߟ ͑ ͨ ͘ ͳ ͍
Slide 8
Slide 8 text
α ʔόʔ ͳ Μͯ
ͳ ͘ ͳ Ε ͍ ͍
Slide 9
Slide 9 text
S E R V E R L E S S
Slide 10
Slide 10 text
α ʔόʔ ͷ ϝ ϯ ς ͕ ख ؒ ͳ Β ɺ
ͦ ͦ ϝ ϯ ς ͠ ͳ ͚ Ε ͍ ͍
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
A M A Z O N L A M B D A
• Node.js / Python / Java͕͑Δ࣮ߦڥ
• εέʔϧϝϯςφϯεAWSଆͰࣗಈతʹ
• ϓϩηεΛಈ͔͚ͨ࣌ͩ͠՝ۚ
Slide 13
Slide 13 text
ཧ
04
ϛυϧΣΞ
"11
ཧ
04
ϛυϧΣΞ
"11
ڥք
ڥք
Ϋϥυαʔόʔͷ߹ AWS Lambdaͷ߹
Slide 14
Slide 14 text
࣮ ߦ ͢ Δ ί ʔ υ Ҏ ֎
ϝ ϯ ς ͠ ͳ ͘ ͯ ͍ ͍ ʂ
Slide 15
Slide 15 text
A M A Z O N L A M B D A
• Node.js / Python / Java͕͑Δ࣮ߦڥ
• εέʔϧϝϯςφϯεAWSଆͰࣗಈతʹ
• ϓϩηεΛಈ͔͚ͨ࣌ͩ͠՝ۚ
Slide 16
Slide 16 text
A W S L a m b d a ʹ
R e a c t Λ ͭ ͬ ͜ Μͯ Έ ͨ
Slide 17
Slide 17 text
ख ॱ
• AWS-CLIͷηοτΞοϓ
• LambdaͷσϓϩΠπʔϧͷηοτΞοϓ
• npm install
• Reactॻ͘
• σϓϩΠ
Slide 18
Slide 18 text
ख ॱ
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
Slide 19
Slide 19 text
import λ from 'apex.js';import 'babel-polyfill';
import React, { Component } from 'react';
import { renderToString } from 'react-dom/server';
ϥ Π ϒ ϥ Ϧ Λ Π ϯ ϙʔ τ
Slide 20
Slide 20 text
class App extends Component {
render() {
return (
);
};
}
R e a c t Λ ॻ ͘
hello React
This is a Example page
Slide 21
Slide 21 text
function renderFullPage(renderedContent) {
return `
${renderedContent}
`;
}
export default λ( (e, ctx) => {
const renderedContent = renderToString( );
const renderedPage = renderFullPage( renderedContent );
return (renderedPage);
});
S S R ͯ͠ re t u r n ͢ Δ
Slide 22
Slide 22 text
$ n p m r u n b u i l d
Slide 23
Slide 23 text
L a m b d a Ͱ Ϩϯ μ Ϧ ϯ ά ͠ ͨ
R e a c t ʹ ΞΫ η ε ͢ Δ
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
A M A Z O N A P I G AT E WAY
• AWS͕Ϛωʔδυ͢ΔAPIαʔόʔ
• εέʔϧηΩϡϦςΟରԠ͓ͤͰ͖Δ
• ϦΫΤετ͚ͩͷ՝ۚ
Slide 26
Slide 26 text
C o n t e n t - Ty p e : “ t e x t / h t m l ”
Λ ฦ ͢ A P I Λ ࡞ Δ
Slide 27
Slide 27 text
ৄ ࡉ
h t t p : / / b i t . l y / 2 b q Z X r 0
Slide 28
Slide 28 text
A P I G a t e w a y ͷ U R L ʹ
ΞΫ η ε ͯ͠ Έ Δ ͱ
Slide 29
Slide 29 text
R e a c t ͷ Ϩϯ μ Ϧ ϯ ά ݁ Ռ ͕
H T M L ͱ ͯ͠ ද ࣔ ͞ Ε Δ
Slide 30
Slide 30 text
R e a c t ͷ Ϩϯ μ Ϧ ϯ ά ݁ Ռ ͕
H T M L ͱ ͯ͠ ද ࣔ ͞ Ε Δ
Slide 31
Slide 31 text
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( );
const renderedPage = renderFullPage( renderedContent );
return renderedPage;
});
});
f e t c h ͠ ͨ Β ֎ ෦ A P I ͱ ͭ ͳ ͛ Ε Δ
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
http://serverless.connpass.com/event/37749/
Slide 34
Slide 34 text
http://tokyo.serverlessconf.io/
Slide 35
Slide 35 text
α ʔόʔ Ϩε Ͱɺ
ϑ ϩ ϯ τ Τ ϯ υ ͷ ͜ ͱ ͩ ͚
ߟ ͑ ͞ ͤΖ ʂ
Slide 36
Slide 36 text
α ʔόʔ Ϩε Ͱɺ
ϑ ϩ ϯ τ Τ ϯ υ ͷ ͜ ͱ ͩ ͚
ߟ ͑ ͞ ͤΖ ʂ
੍࡞ɾஶ࡞
Ί
ऴ