フロントエンドのサーバーレス 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

23. None