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

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. © 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

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. © 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. © 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

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. © 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. © 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.

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. © 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)

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. © 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. © 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

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. © 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. © 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. © 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

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