Serverless FrameworkとVue.jsのSSRでWebサイトを作った話

Transcript

1. Serverless Framework & Vue.jsͷSSRͰ
 WebαΠτΛ࡞ͬͨ࿩ גࣜձࣾΧϥμϝσΟΧ Yuichi Shundo ( @shundoroid )
2. ࣗݾ঺հ • גࣜձࣾΤϜςΟʔΞΠ • גࣜձࣾΧϥμϝσΟΧ (ΤϜςΟʔΞΠࢠձࣾ) ग़޲ Android ΞϓϦɺUnity(ήʔϜΤϯδϯ) ɺASP.Net MVC Microsoft Azure ɺAWS
3. serverlessͰ࡞ͬͨαΠτ CaraCoro https://caracoro.jp ݱ໾ҩࢣ͕Ϣʔβʔ͔Βͷ࣭໰ ʹճ౴͢Δ৘ใΛίϯςϯπͱ ͯ͠ఏڙ͢ΔϝσΟΞαΠτ
4. ։ൃ؀ڥ • Serverless Framework 1.4 • node.js 4.3 • TypeScript 2.1 • Vue.js 1.0 • Visual Studio Code (ΤσΟλ)
5. Vue.js JavaScriptϑϨʔϜϫʔΫ ܰྔ MVVM (Model-View-ViewModel)
 ࠓ೔ͷ͓࿩Ͱग़ͯ͜ͳ͍͜ͱ ɾSPA ɾModel-ViewόΠϯσΟϯά
6. ࠷ॳͷߏ੒ (Client-Side-Rendering) 
 RDS Lambda 
 S3 CloudFront API Gateway ੩తϑΝΠϧ܈ HTML, JS, CSS, Image ಈతίϯςϯπऔಘAPI (QA৘ใɺίϥϜ౳) ΫϥΠΞϯτ (Webϒϥ΢β) Route53 Vue.js
7. ͔͠͠… • SEOͷ໰୊ • GoogleʹVueͷςϯϓϨʔτܗࣜͰΠϯσοΫε͞Εͯ͠·ͬͨ
8. αʔόʔαΠυϨϯμϦϯά (SSR) • αʔόαΠυͰHTMLΛߏஙͯ͠ϨεϙϯεΛฦ͢ɻ • ΫϥΠΞϯτଆ͔Β͸੩తͳHTMLϖʔδʹݟ͑Δɻ SEOతͳ໰୊Λղফ
9. SSRʹม͑ͨߏ੒ 
 RDS Lambda 
 S3 CloudFront API Gateway ੩తϑΝΠϧ܈ JS, CSS, Image ΫϥΠΞϯτ Route53 HTML΍vueςϯϓϨʔτ͸ lambdaͷϩʔΧϧʹอ࣋ text/htmlܗࣜͷ ϨεϙϯεΛฦ͢
10. 1.X 2.X • ެࣜͰSSRʹରԠ • Third-Party ੡ϥΠϒϥϦ vue-server
11. ࠶౓Ϋϩʔϥʔʹొ࿥
12. CaraCoroͰݱࡏະରԠ • Catch-all • URLͰ೚ҙͷύεʹରͯ͠API GatewayΛݺͼग़ͤΔ • Proxy-integration • API GatewayͱlambdaͰςϯϓϨʔτϚοϐϯάΛॻ͘ඞཁ͕ͳ͍ •։ൃͨ͠౰ॳ͸͜ΕΒͷػೳ͕ແ͔ͬͨ •͍ۙ͏ͪʹରԠ͍ͨ͠!!
13. serverless.yml (catch-allະରԠ)
14. serverless.yml (catch-allରԠޙ)