フロントエンドのサーバーレス SSR編

MANABIYA LT大会 (3/24) 用のスライドです。
https://teratail.connpass.com/event/77317/

SPA編
https://speakerdeck.com/boiyaa/hurontoendofalsesabaresu-spabian

English ver.
https://speakerdeck.com/boiyaa/serverless-server-side-rendering-1

Transcript

1. ϑ ϩ ϯ τ Τ ϯ υ ͷ α ʔόʔ Ϩε S S R ฤ 2 0 1 8 . 3 . 2 4 M A N A B I YA
2. P ro f i l e • ϑϩϯτΤϯυΤϯδχΞ at PERSOL • GitHub: boiyaa
 Twitter: boiyaaaaaa
3. ͖ ͬ ͔ ͚ SEOରࡦ͠ͳ͍ͱ͍͚ͳ͘ͳͬͨ ࣗ෼Έ͍ͨͳ௿εΩϧΤϯδχΞͰ΋Ͱ͖ΔSSRͱϗε ςΟϯάͷํ๏͕஌Γ͍ͨ
4. S S R ͷ Π ϯ ϑ ϥ ཁ ݅ ୺తʹݴ͏ͱ Express ͕ಈ͘ͱ͜ͳΒͰ͖Δ Մ༻ੑͷ͜ͱͱ͔Α͘Θ͔Βͳ͍ͷͰɺαʔόϨεͰ΍ Γ͍ͨ
5. ࢼ ͯ͠ Έ ͨ ΋ ͷ • AWS ελοΫ: Lambda + API Gateway + Cloudfront • Firebase ελοΫ: Functions + Hosting
6. Ճ ͑ͯ React ͷ SSR ༻ϑϨʔϜϫʔΫ σʔλऔಘͷ͋Δ React ίϯϙʔωϯτΛ αʔόʔαΠ υϨϯμϦϯά͢Δͷ͸ΊΜͲ͍͘͞ ͜ͷϑϨʔϜϫʔΫΛ࢖͏ͱ؆୯ʹͳΔ
8. ؀ ڥ ߏ ங ख ॱ 1. S3 όέοτΛ࡞Δ 2. Lambda ༻ͷ IAM Role Λ࡞Δ 3. Lambda ؔ਺Λ࡞Δ 4. WebαΠτΤϯυϙΠϯτͱͯ͠ API Gateway Λ࡞Δ 5. ϧʔτϦιʔεʹϓϩΩγϦιʔεΛ௥Ճ͢Δ 6. Ϧιʔεʹ ANY ϝιουΛ௥Ճ͢Δ 7. APIΛσϓϩΠ͢Δ 8. Lambda ؔ਺ʹݖݶΛ௥Ճ͢Δ 9. CloudFront σΟετϦϏϡʔγϣϯΛ࡞੒͢Δ 10. Next.js ΞϓϦέʔγϣϯ༻ͷؔ਺Λॻ͘
9. L a m b d a ͱ E x p re s s ͷ ౷ ߹ E x p re s s ͱ N e x t ͷ ౷ ߹
10. σ ϓ ϩ Π ख ॱ 1. Next.js ͷΞϓϦέʔγϣϯΛϏϧυ͢Δ 2. ੒Ռ෺Λ zip ͢Δ 3. S3 ʹΞοϓϩʔυ͢Δ 4. S3 ͔Β Lambda ؔ਺Λߋ৽͢Δ
11. Pros • ॊೈͳ CDN Ωϟογϡͷίϯτϩʔϧ • AWS WAF ʹΑΔॊೈͳΞΫηείϯτϩʔϧ Cons • FaaS ͳͷͰίʔϧυελʔτͷ౓ʹ਺ඵ͔͔Δ • खॱ͕ෳࡶ • ઃఆΛཧղ͢Δͷʹ͕͔͔࣌ؒΔ • SAM ͱ͔ Terraform ͱ͔Λ࢖ͬͨํ͕͍͍
13. ؀ ڥ ߏ ங ख ॱ 1. Firebase ίϯϑΟάϑΝΠϧΛ࡞੒͢Δ 2. ϓϩδΣΫτΛ࡞੒͢Δ 3. ϓϩδΣΫτΛׂΓ౰ͯΔ 4. Next.js ΞϓϦέʔγϣϯ༻ͷؔ਺Λॻ͘
14. F u n c t i o n ͱ N e x t ͷ ౷ ߹ F i re b a s e F u n c t i o n s ͷ H T T P τ Ϧ Ψ ʔ ͸ ඪ ४ Ͱ E x p re s s ʹ ର Ԡ ͯ͠ ͍ Δ
15. σ ϓ ϩ Π ख ॱ 1. Next.js ͷΞϓϦέʔγϣϯΛϏϧυ͢Δ 2. Firebase ʹσϓϩΠ͢Δ
16. Pros • ͔ͳΓ؆୯ • ؆୯ͳ GUI ͱ CLI • ؆୯ͳ CDN Ωϟογϡίϯτϩʔϧͱૉૣ͍ద༻ • ΧελϜυϝΠϯઃఆ΋·ͨ؆୯Ͱূ໌ॻ͸ϑϧϚωʔδυ Cons • FaaS ͳͷͰίʔϧυελʔτͷ౓ʹ਺ඵ͔͔Δ • ߏங࣌ʹ Web ίϯιʔϧʹΞΫηε͢Δඞཁ͕͋Δ
17. · ͱ Ί • Firebase Α͔ͬͨ • AWS Λݕ౼͢Δέʔε: • AWS ্ͷόοΫΤϯυ͔Βσʔλऔಘ͕͋Δ • CloudFormation ͱ͔ Terraform ͱ͔Ͱ؅ཧ͠ͳ͍ͱ͍͚ͳ͍ • ϓϥοτϑΥʔϜଆͰ ACL ͕΄͍͠ • Google App Engine Node.js Standard ؀ڥ͕ Early Access Program Λ ΍͍ͬͯΔͷͰɺίʔϧυελʔτ͕࣌ؒࠔΔ৔߹͸͜Ε͕͍͍͔΋
18. α ϯ ϓϧί ʔ υ h t t p s : / / g i t h u b . c o m / b o i y a a / f ro n t e n d - s e r v e r l e s s - p a t t e r n s
19. T h a n k y o u