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

Serverless Meetup Tokyo #7
https://serverless.connpass.com/event/76227/
用の資料です

SSR編
https://speakerdeck.com/boiyaa/hurontoendofalsesabaresu-ssrbian

English ver.
https://speakerdeck.com/boiyaa/serverless-for-front-end-spa

Transcript

1. ϑ ϩ ϯ τ Τ ϯ υ ͷ α ʔόʔ Ϩε S PA ฤ 2 0 1 8 . 2 . 2 2 S e r v e r l e s s M e e t u p To k y o # 7
2. YA M A M O T O ’s P ro f i l e ID: boiyaa ถ Facebook ΤϯδχΞ ͷఋ͕͍Δ͜ͱ͚͕ͩࣗຫͷ Persol P&T
 ϑϩϯτΤϯυΤϯδχΞ
3. Πϯϑϥʹૄ͍ϑϩϯτΤϯυΤϯδχΞͰ΋ ҆શʹϑϩϯτΤϯυΞϓϦέʔγϣϯΛӡ༻͍ͨ͠
4. બఆ৚݅ ϦΫΤετΛҰͭͷ html ϑΝΠϧʹϧʔςΟϯάͰ͖Δ ʴ ӡ༻ʢՄ༻ੑɾηΩϡϦςΟͳͲʣ͕Ϛωʔδυ S PA Π ϯ ϑ ϥ ʹ ৄ ͠ ͘ ͳ ͍
5. ݕ ౼ ͠ ͨ ΋ ͷ • Amazon CloudFront + Amazon S3 • Google App Engine • Firebase Hosting
6. ͷ৔߹
7. ߏ ங ख ॱ 1. S3 όέοτ࡞੒ 2. CloudFront ΦϦδϯΞΫηεΞΠσϯςΟςΟ࡞੒ 3. όέοτϙϦγʔઃఆ࡞੒ɾద༻ 4. CloudFront σΟετϦϏϡʔγϣϯઃఆ࡞੒ 5. σΟετϦϏϡʔγϣϯ࡞੒ ෳ ࡶ ෳ ࡶ
8. bucket-policy.json { "Statement": [ { "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity [OAI_ID]" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::[BUCKET_NAME]/*" }, { "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity [OAI_ID]" }, "Action": "s3:ListBucket", "Resource": "arn:aws:s3:::[BUCKET_NAME]" } ] } distribution.json { "Comment": "", "Origins": { "Items": [ { "S3OriginConfig": { "OriginAccessIdentity": "origin-access-identity/cloudfront/[OAI_ID]" }, "Id": "origin", "DomainName": "[BUCKET_NAME].s3.amazonaws.com" } ], "Quantity": 1 }, "DefaultRootObject": "index.html", "PriceClass": "PriceClass_All", "Enabled": true, "DefaultCacheBehavior": { "TrustedSigners": { "Enabled": false, "Quantity": 0 }, "TargetOriginId": "origin", "ViewerProtocolPolicy": "allow-all", "ForwardedValues": { "Cookies": { "Forward": "none" }, "QueryString": false }, "MinTTL": 0, "Compress": true }, "CallerReference": "distribution-[BUCKET_NAME]", "CustomErrorResponses": { "Items": [ { "ErrorCode": 404, "ResponsePagePath": "/index.html", "ResponseCode": "200" } ], "Quantity": 1 } }
9. σ ϓ ϩ Π $ aws s3 sync build s3://[BUCKET_NAME] upload: build/index.html to s3://BUCKET_NAME/index.html upload: build/184e3117cf2cd3fa28a1f654dc5d4785.js to s3:// BUCKET_NAME/184e3117cf2cd3fa28a1f654dc5d4785.js ։ൃத͸Ωϟογϡ͠ͳ͍Α͏ʹ --cache-control "no-store, no-cache” ΦϓγϣϯΛ෇͚Δɻ
10. Pros • ॊೈͳΩϟογϡઃఆ͕Ͱ͖Δ • AWS WAF ͱ૊Έ߹ΘͤͯॊೈͳΞΫηε੍ݶ͕Ͱ͖Δ Cons • ઃఆΛཧղ͢Δͷʹ͕͔͔࣌ؒΓɺ͔ͭखॱ΋ଟ͍ͷͰɺखͬऔΓૣ ͘ߏஙͰ͖ͳ͍ • CloudFront ͷઃఆ൓өʹ30෼ఔ౓͔͔ΔͷͰɺઃఆϛεΔͱμϧ͍ • ΧελϜυϝΠϯΛ࢖͏ͱͳΔͱ͞Βʹ࢖༻αʔϏε͕૿͑ɺઃఆख ॱ͕ΑΓෳࡶʹͳΔ
11. ͷ৔߹
12. ߏ ங ख ॱ 1. ϓϩδΣΫτ࡞੒ 2. ϓϩδΣΫτ੾ସ 3. App Engine ࡞੒ 4. App Engine ઃఆ࡞੒
13. runtime: php55 handlers: - url: /(.*\.(js|css|jpg|png|ico|svg))$ static_files: build/\1 upload: build/(.*\.(js|css|jpg|png|ico|svg))$ - url: /.* static_files: build/index.html upload: build/index.html skip_files: - ^(?!.*build).*$
14. σ ϓ ϩ Π $ gcloud app deploy Services to deploy: descriptor: […] source: […] target project: [PROJECT_NAME] target service: [default] target version: [20180222t003136] target url: [https://PROJECT_NAME.appspot.com] Do you want to continue (Y/n)? ϓ ϩ δΣ Ϋ τ ੾ ସ Λ ๨ Εͣ ʹ
15. Pros • ॊೈͳϧʔςΟϯάઃఆ͕Ͱ͖Δ • IP ΞυϨεͰͷΞΫηε੍ݶ͕Ͱ͖Δ • ΧελϜυϝΠϯͷઃఆ͕؆୯Ͱূ໌ॻ΋ϑϧϚωʔδυ • ւ֎ϦʔδϣϯͰ΋Ϩεϙϯε଎͍ Cons • Terraform Ͱ؅ཧͰ͖ͳ͍
16. ͷ৔߹
17. ߏ ங ख ॱ 1. Firebase ઃఆΛ΢ΟβʔυܗࣜͰੜ੒ 2. ϓϩδΣΫτ࡞੒ 3. ϓϩδΣΫτׂΓ౰ͯ
18. $ firebase init ? Which Firebase CLI features do you want to setup… ̋ Database: Deploy Firebase Realtime Database Rules ̋ Firestore: Deploy rules and create indexes for Firestore ̋ Functions: Configure and deploy Cloud Functions ›‒ Hosting: Configure and deploy Firebase Hosting sites ̋ Storage: Deploy Cloud Storage security rules ? Select a default Firebase project for this directory: [don't setup a default project] › [create a new project] ? What do you want to use as your public directory? public ? Configure as a single-page app (rewrite all urls to /index.html)? Yes S PA ༻ ʹ ࣗ ಈ ઃ ఆ ͯ͘͠Ε Δ
19. σ ϓ ϩ Π $ firebase deploy === Deploying to ‘PROJECT_NAME'... i deploying hosting i hosting: preparing build directory for upload... ✔ hosting: 2 files uploaded successfully ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/ PROJECT_NAME/overview Hosting URL: https://PROJECT_NAME.firebaseapp.com Θ ͔ Γ ΍ ͢ ͍
20. Pros • ઃఆ͕ࣗಈੜ੒ͰҰ൪؆୯ʹߏஙͰ͖Δ • ΧελϜυϝΠϯͷઃఆ͕؆୯Ͱূ໌ॻ΋ϑϧϚωʔδυ • ւ֎ϦʔδϣϯͰ΋Ϩεϙϯε଎͍ • CLI ΋ GUI ΋؆ܿͰΘ͔Γ΍͍͢ Cons • ߏஙϓϩηε͸ CLI ͷΈͰ׬݁Ͱ͖ͳ͍ • ΞΫηε੍ݶͰ͖ͳ͍ • Terraform Ͱ؅ཧͰ͖ͳ͍
21. · ͱ Ί • Terraform Ͱߏ੒؅ཧ͍ͨ͠ͳΒ CloudFront + S3 • όοΫΤϯυ͕ App Engine Standard Λ࠾༻͍ͯ͠Δ ͳΒಉډ͢Ε͹γϯϓϧ • ಛʹͩ͜ΘΓͳ͚Ε͹ Firebase Hosting ָ͕ • ࣍͸ SSR ΛαʔόʔϨεͰ΍Γ͍ͨ
22. https://github.com/boiyaa/frontend-serverless-patterns