Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Application Server-less Web Applications - Serverless Toronto Meetup

57 views

Published on

We touched a taboo subject – questioned the usefulness of Application Servers in the Cloud Native Era (besides introducing latency & increasing your cloud bill ;) and Toronto’s own Serverless gurus Frank & Jay showed how to build a secure Application Server-less Web App in the AWS cloud.

More info at https://www.meetup.com/Serverless-Toronto/events/253011233/

Published in: Science
  • Be the first to comment

Application Server-less Web Applications - Serverless Toronto Meetup

  1. 1. Application Server-less Web Apps www.seed.run
  2. 2. SEED is a fully-managed CI/CD for Serverless. Frank Jay 💎 @fanjiewang @jayair www.seed.run
  3. 3. serverless-stack.com Serverless Stack is an open source guide for building full-stack production ready Serverless applications on AWS. ★ 1.2K 30K 👤 7K ✉
  4. 4. 🧐 3-Tier Architecture
  5. 5. 🖥 CLIENT APP SERVER DB SERVER
  6. 6. Provides an API Handles requests Handles file uploads Authenticates users Secures the application Runs scheduled jobs & tasks APP SERVER
  7. 7. The App Server does everything…
  8. 8. Everything except storing data 😮
  9. 9. 🖥 CLIENT APP SERVER DB SERVER S3 UPLOADS SEARCH
  10. 10. App Server is the “gatekeeper”
  11. 11. ⚡ Serverless Architecture
  12. 12. 🖥 SPA COGNITO DYNAMO S3 UPLOADS ELASTIC 🔑 IAM 🔐 LAMBDA
  13. 13. SERVERLESS ⚡ Client coordinates services Fully-managed architecture Glued together with Lambda Use a separate auth provider Secure all services with IAM Services auto-scale to traffic
  14. 14. SERVERLESS ⚡ 1. User authenticates client side 2. Make signed requests to a service 3. Service checks if user has access 4. Service responds over HTTPS
  15. 15. 🔥 Code
  16. 16. Project files handler.js serverless.yml package.json
  17. 17. serverless.yml
  18. 18. service: posts provider: name: aws runtime: nodejs8.10 iamRoleStatements: - Effect: Allow Action: - dynamodb:PutItem Resource: “arn:aws:dynamodb:us-east-1:*:*" functions: create: handler: handler.create - http: path: posts/create method: post cors: true authorizer: aws_iam
  19. 19. handler.js
  20. 20. module.create = function(evt, context, callback) { // Federated user id const userId = evt.requestContext.identity.cognitoIdentityId; . . . await dynamoDbLib.call("put", params); callback(null, success(params.Item)); };
  21. 21. S3 Uploads
  22. 22. <CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>
  23. 23. COGNITO 🔑 1. Create a User Pool 2. Configure user attributes 3. Create an app client 4. Done!
  24. 24. 🔐 AWS IAM
  25. 25. { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:*" ], "Resource": [ "arn:aws:s3:::S3_BUCKET/${cognito-identity.amazonaws.com:sub}/*" ] }, { "Effect": "Allow", "Action": [ "execute-api:Invoke" ], "Resource": [ "arn:aws:execute-api:us-east-1:*:API_GATEWAY_ID/*" ] } ] }
  26. 26. AWS Amplify h"ps://aws-amplify.github.io/amplify-js/
  27. 27. Amplify.configure({ Auth: { region: COGNITO_REGION, userPoolId: COGNITO_USER_POOL, identityPoolId: COGNITO_IDENTITY_POOL, userPoolWebClientId: COGNITO_APP_CLIENT }, Storage: { region: S3_REGION, bucket: S3_BUCKET }, API: { endpoints: [{ name: "posts", endpoint: API_GATEWAY_URL, region: API_GATEWAY_REGION }] } });
  28. 28. Sign in a User
  29. 29. import { Auth } from “aws-amplify”; . . . // Sign up await Auth.signUp({ username, password }); await Auth.confirmSignUp(username, confirmationCode); . . . // Login await Auth.signIn(username, password);
  30. 30. Upload a File
  31. 31. import { Storage } from “aws-amplify"; . . . await Storage.vault.put( filename, file, { contentType } );
  32. 32. Call an API
  33. 33. import { API } from "aws-amplify"; . . . await API.post("posts", "/posts", { body: post });
  34. 34. Static Hosting
  35. 35. HOSTING 1. Create a public S3 bucket 2. Link to a CloudFront distribution 3. Attach a domain on Route 53 4. Add SSL with Certificate Manager
  36. 36. $ npm run build $ aws s3 sync build/ s3://S3_HOSTING_BUCKET
  37. 37. 🎉 Recap
  38. 38. PARTY Massively scalable web app Fully-managed architecture Extremely low-cost to run And no application servers! 🎉
  39. 39. 🙌 Closing
  40. 40. Learn to build Serverless apps Serverless-Stack.com
  41. 41. Fully-managed Serverless CI/CD SEED.run
  42. 42. Frank Jay 💎 @fanjiewang @jayair Questions?

×