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.

DevOps: Build, Deploy, & Operate Mobile Web Apps with Serverless Backends (MOB305) - AWS re:Invent 2018

303 views

Published on

Modern web apps are increasingly decoupled, with front-end assets deployed globally using a CDN and the backend powered by multiple microservices. Multiple moving parts across the front end and backend can make DevOps complicated. In this session, learn how to use a Git-centric workflow for building these apps in the cloud and subsequently deploying them using A/B testing, progressive rollouts, pushState routing (using Lambda@Edge), and more. Learn about the tools you need, and then follow along as we take a static web app (implemented using frameworks such as React.js, Ionic, Angular, and Vue.js), add backend features, and ultimately distribute it to your end users.

  • Be the first to comment

DevOps: Build, Deploy, & Operate Mobile Web Apps with Serverless Backends (MOB305) - AWS re:Invent 2018

  1. 1. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. DevOps: Build, Deploy, & Operate Mobile Web Apps with Serverless Backends Mohit Srivastava Sr Mgr, Product Management AWS Mobile M O B 3 0 5
  2. 2. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Related breakouts Tuesday, November 27 MOB202-L: Developing Mobile and Web Apps on AWS 2:30pm – 3:30pm | Venetian, Level 2, Venetian E Wednesday, November 28 MOB330: Developing Cross-Platform Mobile Apps with Ionic, GraphQL, and AWS 2:30pm – 3:30pm | Aria East, Level 1, Joshua 6 Wednesday, November 28 MOB310: Bridging the Gap Between Real Time/Offline and AI/ML Capabilities in Modern Serverless Apps 11:30am – 12:30pm | MGM, Level 1, Grand Ballroom 111
  3. 3. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. A case study
  4. 4. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Resolution – “Full stack” DevOps for Web apps • Strong isolation barrier between projects and stages => Dedicated AWS accounts for each project and stage (sandbox, staging, prod) • Source code (and history) for each stage readily available => Git branching used for the source code for each stage • Minimize version mismatches between frontend and backend => Frontend (e.g., code) and backend (e.g., AWS CloudFormation templates) developed and versioned together in same Git repository • Developers in control => Developers deploy frontend *and* backend
  5. 5. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Modern Web app architecture AWS Cloud Region Region Edge location Edge location Bucket with web assets Users 1) Frontend request 2) Backend request
  6. 6. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. DevOps requirements for modern Web apps - Recognize that their may be coupling between frontend and backend - Share backends between team members or clone for isolated development Web app per dev sandbox Test Web app Prod Web app
  7. 7. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. DevOps challenges with modern Web apps Lots of moving parts complicate the following:
  8. 8. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. NEW: Introducing the AWS Amplify Console Build, deploy, and host cloud-powered modern web apps Optional deployment of backend resources + fully managed frontend hosting
  9. 9. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Introducing the AWS Amplify Console Your app is served via Amazon's reliable content delivery network with 144 points of presence globally. Set up custom domains managed in Amazon Route 53 with a single click plus get a free HTTPS certificate. Connect your repository to 'git push' changes to your frontend and backend in a single workflow. Work on new features without impacting production. Create branch deployments linked to each feature branch. All deployments either rollout successfully or fail without requiring maintenance windows. Share yet-to-be released features with internal stakeholders by setting a username and password.
  10. 10. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Use cases Use static site generators like Hugo or Jekyll to publish a blog. SSGs perform faster than traditional websites. Deploy SSGs with free SSL on the AWS Amplify Console. Add dynamic functionality using GraphQL or REST APIs. Use AWS Amplify Console to deploy your frontend and backend in a single workflow. PWAs offer native app-like performance, work offline, support push notifications, and can be updated over-the-air. Use AWS Amplify to deploy PWAs to mobile devices.
  11. 11. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Part of the AWS Amplify family Developer Tools Amplify Framework Cloud Services
  12. 12. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Use case – Jekyll-based static website (frontend only) AWS Amplify Console features demonstrated • Globally available • Easy custom domain setup • Feature branch deployment • Atomic deployments • Feature branches
  13. 13. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Use case – Jekyll-based static website (frontend only) AWS Cloud Region Edge location Edge location Bucket with web assets (old) Users Frontend request Lambda@ Edge Bucket with web assets (new)
  14. 14. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  15. 15. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  16. 16. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Use case – Serverless web app: ChatQL
  17. 17. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Serverless web app – Architecture AWS Cloud Region Region Edge location Edge location Bucket with web assets Users 1) Frontend request 2) Backend request
  18. 18. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Deployment approaches Deploy frontend and backend as a “unit” => Single workflow • Benefit: Only one workflow to manage Deploy frontend and backend separately => Different workflows • Benefit: Ability to share the backend across multiple frontend versions • Risk: Version mismatches between frontend and backend
  19. 19. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. NEW: Multi-environments and team workflow (Beta) in the Amplify CLI - Git-style interaction & project switching - Share backends between team members or clone for isolated development User Users
  20. 20. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Part of the AWS Amplify family
  21. 21. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Isolated environments: Start in sandbox $ git clone <git-repo> $ cd <project-dir> $ git checkout -b mysandbox $ amplify init ? Do you want to use an existing environment? No ? Enter a name for the environment mysandbox // Rest of init steps – creates an entry in team-provider-info.json. // Add/update any backend configurations using amplify add/update <category> $ amplify push $ git push -u origin mysandbox
  22. 22. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Isolated environments: Move the changes to dev (or master) $ git checkout dev $ amplify checkout dev $ git merge mysandbox $ amplify push $ git push -u origin dev
  23. 23. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Shared backends: Each team checkouts dev branch $ git clone <git-repo> $ cd <project-dir> $ git checkout dev $ amplify init ? Do you want to use an existing environment? true ? Choose the environment you would like to use: ❯ dev // The rest of init steps // Add/update any backend configurations using amplify add/update <category> $ amplify push $ git push -u origin dev
  24. 24. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Shared backends: Periodically pull in latest changes $ cd <your-project> $ git checkout dev $ $ amplify init ? Do you want to use an existing environment? true ? Choose the environment you would like to use: ❯ dev master $ amplify env pull $ git pull origin dev
  25. 25. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  26. 26. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Summary • Serverless web apps contain multiple moving parts across the frontend + backend • Deploy existing frontends in a few steps using the Amplify Console • Build serverless backends using the Amplify CLI • Perform continuous delivery of frontend + backend by pairing the AWS Amplify Console + Amplify CLI
  27. 27. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Get started! https://amplify.aws
  28. 28. Thank you! © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Mohit Srivastava Twitter: @mohit
  29. 29. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

×