blog @ Lambda [PL]

Prezentacja z wewnętrznego meetupu w formie Polidea.

Transcript

1. blog @ Lambda YOLO
2. http://dajsiepoznac.pl
3. http://timbercode.pl/blog/2017/03/28/dsp17-jeden-feature-ktory-zmienia-stos-technologiczny/
4. stos technologiczny API Gateway ( HTTP ) Lambda ( functions ) Express ( web framework ) Nuxt ( universal apps ) Vue ( MVVM ) Claudia ( Node → Lambda ) CloudFront ( CDN ) S3 ( storage )
5. • brak stanu • może nowy Node, może jakiś już uruchomiony • darmo co miesiąc: 1,000,000 requestów → 22 requesty na minutę 3,200,000 sekund obliczeń → 3.2 sekundy na request • Node.js 4.3 lub 6.10 (od niedawna) • max 50 MB na zip z funkcją (mój ma 17 MB)
6. • request HTTP → wywołanie funkcji Lambda • dane requestu jako kontekst funkcji • darmo przez rok: 1,000,000 requestów → 22 requesty na minutę
7. • request HTTP → wywołanie funkcji Lambda • dane requestu jako kontekst funkcji • darmo przez rok: 5 GB → wieeele obrazków 20,000 GET requests → 5 wejść na post blogowy na godzinę
8. • CDN dla plików z S3 • darmo przez rok: 50 GB data transfer → sky is the limit 2,000,000 requests → 44 requesty na minutę
9. • Universal App - prosty w konfiguracji Server-Side Rendering - SPA - brak problemów z SEO • zmniejsza boilerplate (Webpack…) • od wersji 0.10.0 prefetch assetów i skryptów w horyzoncie całkowity offline • SPA → potencjalnie zmniejsza liczbę requestów do Lambdy
10. • przyjemne coś pomiędzy Angularem 1.x a Reactem • Single File Components
11. • configure AWS npm install --production zip send to AWS run with test event
12. claudia generate-serverless-express-proxy \ --express-module app/lambda-express-app \ --proxy-module-name lambda env AWS_PROFILE=cli claudia create \ --region ${AWS_REGION} \ --name timbercode-website \ --handler lambda.handler \ --deploy-proxy-api \ --version initial \ --set-env NODE_ENV=production,BASE_PATH='/initial' env AWS_PROFILE=cli claudia update \ --version production \ --set-env NODE_ENV=production,BASE_PATH='/production'
13. know-how
14. #1 API Gateway stages vs Lambda versions env variables dla claudia set-version !?
15. #2 Reloading if (process.env.NODE_ENV !== 'production') { nuxt.build() .catch(error => { console.error(error) process.exit(1) }) } nodemon app/server.js
16. #3 Favicon api.get('/img', () => { return fs.readFilePromise(path.join(__dirname, 'img.png')); }, { success: { contentType: 'image/png', contentHandling: 'CONVERT_TO_BINARY' } }); https://claudiajs.com/tutorials/binary-content.html
17. #3 Favicon ale co, jeśli korzystamy z aws-serverless-express proxy? const awsServerlessExpress = require('aws-serverless-express') const app = require('./app/lambda-express-app') const server = awsServerlessExpress.createServer(app) exports.handler = (event, context) => awsServerlessExpress.proxy(server, event, context)
18. #3 Favicon CloudFront ( CDN ) S3 ( file system )
19. #4 Obrazki • problem podobny jak z faviconą • można skorzystać z file-loader, ale max 50 MB / 250 MB (regular / zip) per funkcja • TST/PRD → https://static.timbercode.pl/ (automatyzacja?) DEV → z dysku
20. #4 Obrazki  const shouldUseCdn = process.env.NODE_ENV === 'production' const IMAGES_BASE_URL = shouldUseCdn ? 'https://static.timbercode.pl' : '' meta.body.replace(/{{IMAGES_BASE_URL}}/g, IMAGES_BASE_URL)
21. #5 API Gateway Stage jako ścieżka URL-a https://abcdefghij.execute-api.eu-central-1.amazonaws.com/testing vs https://testing.timbercode.pl/
22. #6 Nuxt vs Markdown • Nuxt way: ./pages/blog/2017/04/19/migracja-bloga-na-aws-lambda.vue → <HOST>/blog/2017/04/19/migracja-bloga-na-aws-lambda • markdown-it loader / front-matter loader / json-loader Gatsby.js markdown-loader własny-loader…
23. #6 Nuxt vs Markdown
24. #7 Nuxt vs dynamiczne ładowanie wpisów GET /blog/:post_id → const post = require(`~pages/blog/${post_id}.md`)
25. #7 Nuxt vs dynamiczne ładowanie wpisów const requireFromDir = require.context('~pages/blog', true, /\.md$/) const posts = requireFromDir.keys().map(path => { const post = requireFromDir(path) return { title: post.title, tags: post.tags || [], uniqueId: `blog${post.permalink}`, route: `/blog${post.permalink}`, canonicalUrl: `https://timbercode.pl/blog${post.permalink}` } }) module.exports = posts
26. #8 Nuxt vs RSS • Nuxt generuje Single Page App • SPA = jeden HTML z podmienianą treścią • SPA =/= XML z feedem RSS/Atom • Express? i znów to nieszczęsne skanowanie katalogów w poszukiwaniu postów…
27. #8 Nuxt vs RSS app.get('/blog/tag/:tag/feed.xml', function (req, res) { // ... const loadPosts = require('./load-posts') let postsForTag = loadPosts().filter(post => _(post.tags).includes(tagToShow)) // ... res.send(feed.atom1()) }) app.use(nuxt.render)
28. #9 Nuxt vs permalinks • Nuxt way (jeszcze raz ;-) ): ./pages/blog/2017/04/19/migracja-bloga-na-aws-lambda.vue → <HOST>/blog/2017/04/19/migracja-bloga-na-aws-lambda • mój way: ./pages/blog/2017/04/19/migracja-bloga-na-aws-lambda.md → <HOST>/taki-fajny-wpis-ze-zasluguje-na-top-level-adres
29. #9 Nuxt vs permalinks https://nuxtjs.org/api/configuration-router#extendroutes
30. #9 Nuxt vs permalinks router: { extendRoutes (routes, resolve) { const loadPosts = require('./app/timbercode-website/load-posts') routes = adjustRoutes(routes, loadPosts()) printRoutes(routes) } },
31. #10 Nuxt ≥ 0.10.0 vs Claudia http://bluebirdjs.com/docs/error-explanations.html#error-cannot-promisify-an-api-that-has-normal-methods
32. #11 czas ładowania strony GitLab Pages / Jekyll • ~1 sekunda Lambda / Express / Nuxt • ~6 sekund za pierwszym razem po długiej przerwie • ~1 sekunda przy kolejnych wejściach
33. pytania?
34. moja najważniejsza lekcja…
35. https://firstdoit.com/why-first-do-it-because-you-should-get-started-right-now-910a9ccd4d4b