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.

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

3. © 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.
A case study

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

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

7. © 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.
DevOps challenges with modern Web apps
Lots of moving parts complicate the following:

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

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

11. © 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.
Part of the AWS Amplify family
Developer Tools
Amplify Framework
Cloud Services

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

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

15. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

16. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

17. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Use case – Serverless web app: ChatQL

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

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

20. © 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.
Part of the AWS Amplify family

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

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

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

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

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

28. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Get started!
https://amplify.aws

29. Thank you!
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Mohit Srivastava
Twitter: @mohit

30. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.