Slide 1

Slide 1 text

ϑ ϩ ϯ τ Τ ϯ υ ͷ α ʔόʔ Ϩε 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

Slide 2

Slide 2 text

YA M A M O T O ’s P ro f i l e ID: boiyaa ถ Facebook ΤϯδχΞ ͷఋ͕͍Δ͜ͱ͚͕ͩࣗຫͷ Persol P&T
 ϑϩϯτΤϯυΤϯδχΞ

Slide 3

Slide 3 text

Πϯϑϥʹૄ͍ϑϩϯτΤϯυΤϯδχΞͰ΋ ҆શʹϑϩϯτΤϯυΞϓϦέʔγϣϯΛӡ༻͍ͨ͠

Slide 4

Slide 4 text

બఆ৚݅ ϦΫΤετΛҰͭͷ html ϑΝΠϧʹϧʔςΟϯάͰ͖Δ ʴ ӡ༻ʢՄ༻ੑɾηΩϡϦςΟͳͲʣ͕Ϛωʔδυ S PA Π ϯ ϑ ϥ ʹ ৄ ͠ ͘ ͳ ͍

Slide 5

Slide 5 text

ݕ ౼ ͠ ͨ ΋ ͷ • Amazon CloudFront + Amazon S3 • Google App Engine • Firebase Hosting

Slide 6

Slide 6 text

ͷ৔߹

Slide 7

Slide 7 text

ߏ ங ख ॱ 1. S3 όέοτ࡞੒ 2. CloudFront ΦϦδϯΞΫηεΞΠσϯςΟςΟ࡞੒ 3. όέοτϙϦγʔઃఆ࡞੒ɾద༻ 4. CloudFront σΟετϦϏϡʔγϣϯઃఆ࡞੒ 5. σΟετϦϏϡʔγϣϯ࡞੒ ෳ ࡶ ෳ ࡶ

Slide 8

Slide 8 text

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 } }

Slide 9

Slide 9 text

σ ϓ ϩ Π $ 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” ΦϓγϣϯΛ෇͚Δɻ

Slide 10

Slide 10 text

Pros • ॊೈͳΩϟογϡઃఆ͕Ͱ͖Δ • AWS WAF ͱ૊Έ߹ΘͤͯॊೈͳΞΫηε੍ݶ͕Ͱ͖Δ Cons • ઃఆΛཧղ͢Δͷʹ͕͔͔࣌ؒΓɺ͔ͭखॱ΋ଟ͍ͷͰɺखͬऔΓૣ ͘ߏஙͰ͖ͳ͍ • CloudFront ͷઃఆ൓өʹ30෼ఔ౓͔͔ΔͷͰɺઃఆϛεΔͱμϧ͍ • ΧελϜυϝΠϯΛ࢖͏ͱͳΔͱ͞Βʹ࢖༻αʔϏε͕૿͑ɺઃఆख ॱ͕ΑΓෳࡶʹͳΔ

Slide 11

Slide 11 text

ͷ৔߹

Slide 12

Slide 12 text

ߏ ங ख ॱ 1. ϓϩδΣΫτ࡞੒ 2. ϓϩδΣΫτ੾ସ 3. App Engine ࡞੒ 4. App Engine ઃఆ࡞੒

Slide 13

Slide 13 text

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).*$

Slide 14

Slide 14 text

σ ϓ ϩ Π $ 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)? ϓ ϩ δΣ Ϋ τ ੾ ସ Λ ๨ Εͣ ʹ

Slide 15

Slide 15 text

Pros • ॊೈͳϧʔςΟϯάઃఆ͕Ͱ͖Δ • IP ΞυϨεͰͷΞΫηε੍ݶ͕Ͱ͖Δ • ΧελϜυϝΠϯͷઃఆ͕؆୯Ͱূ໌ॻ΋ϑϧϚωʔδυ • ւ֎ϦʔδϣϯͰ΋Ϩεϙϯε଎͍ Cons • Terraform Ͱ؅ཧͰ͖ͳ͍

Slide 16

Slide 16 text

ͷ৔߹

Slide 17

Slide 17 text

ߏ ங ख ॱ 1. Firebase ઃఆΛ΢ΟβʔυܗࣜͰੜ੒ 2. ϓϩδΣΫτ࡞੒ 3. ϓϩδΣΫτׂΓ౰ͯ

Slide 18

Slide 18 text

$ 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 ༻ ʹ ࣗ ಈ ઃ ఆ ͯ͘͠Ε Δ

Slide 19

Slide 19 text

σ ϓ ϩ Π $ 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 Θ ͔ Γ ΍ ͢ ͍

Slide 20

Slide 20 text

Pros • ઃఆ͕ࣗಈੜ੒ͰҰ൪؆୯ʹߏஙͰ͖Δ • ΧελϜυϝΠϯͷઃఆ͕؆୯Ͱূ໌ॻ΋ϑϧϚωʔδυ • ւ֎ϦʔδϣϯͰ΋Ϩεϙϯε଎͍ • CLI ΋ GUI ΋؆ܿͰΘ͔Γ΍͍͢ Cons • ߏஙϓϩηε͸ CLI ͷΈͰ׬݁Ͱ͖ͳ͍ • ΞΫηε੍ݶͰ͖ͳ͍ • Terraform Ͱ؅ཧͰ͖ͳ͍

Slide 21

Slide 21 text

· ͱ Ί • Terraform Ͱߏ੒؅ཧ͍ͨ͠ͳΒ CloudFront + S3 • όοΫΤϯυ͕ App Engine Standard Λ࠾༻͍ͯ͠Δ ͳΒಉډ͢Ε͹γϯϓϧ • ಛʹͩ͜ΘΓͳ͚Ε͹ Firebase Hosting ָ͕ • ࣍͸ SSR ΛαʔόʔϨεͰ΍Γ͍ͨ

Slide 22

Slide 22 text

https://github.com/boiyaa/frontend-serverless-patterns

Slide 23

Slide 23 text

No content