Angular 2 + AWS Lambda

2016. 11. 28. dots. AKIRA-MIYAKE

• AKIRA-MIYAKE• Blog: http://dream-of-electric-cat.hatenablog.com/• Twitter: @DreamOfEleCat• GitHub: https://github.com/AKIRA-MIYAKE

• +

• UI JavaScript/HTML/CSS

• Docker CI AWS

• iOS

Agenda1. 2. Angular2

3.

1. (SSR)

• = HTML JS DOM

: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

Single-Page Application(SPA)

• JS

• JS DOM

• JS: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

• 3 → 40%

• → 79%

• → 52%

• → 44%

• 1 16%

: https://blog.kissmetrics.com/loading-time/?wide=1

SEO• Googlebot

• • Promise, Service Worker, Fetch API, Local Storage,

ES6/ES2015

• onLoad

• SPA

: https://www.youtube.com/watch?v=JlP5rBynK3E&feature=youtu.be

Googlebot•

• raw HTML

• SPA URL raw HTML •

: https://www.youtube.com/watch?v=JlP5rBynK3E&feature=youtu.be

SSR• Google Search Console Googlebot

•

• Pre-Rendering = SSR Googlebot

2. Angular2 SSR

SSR•

• • JS

• PhantomJS, CasperJS

• prerender.io

• Virtual DOM• Virtual DOM JS

• DOM HTML

• Angular2, React, Vue 2.0

2. Angular2 SSR

Angular Universal• https://github.com/angular/universal

• Universal Angular

• Node.js ASP.NET

Angular UniversalServicesComponents …

AppModule forBrowser

AppModule forNode

platformBrowserDynamic().bootstrapModule()

platformUniversalDynamic().serializeModule()

DOM HTML

UniversalModulefor Browser

UniversalModulefor Node

Inject Modules Inject Modules

Browser Server

AngularApplication

3. SSR

• AWS Lambda Azure Functions Google Cloud

Functions

• Function-as-a-Service(FaaS)

• FaaS

: https://www.youtube.com/watch?v=JlP5rBynK3E&feature=youtu.be

• • •

AWS

•

• Googlebot

• Lambda •

•

Angular SPA Lambda

• • HTTP

• HTML S3

• • Cache

React• SSR

• Isomorphic Node

• Flux

• Lambda

• URL

Lambda

• SPASEO

• Angular2 Angular Universal

•

• SSRSPA

angular2-universal-render• https://github.com/AKIRA-MIYAKE/angular2-universal-

render

• Lambda npm

• express-engine

• Cache