AWS Amplify Console è un servizio di hosting e continuous deployment per applicazioni web desktop e mobile. In questo webinar vedremo come sviluppare applicazioni con questo servizio, utilizzando le funzioni di rilascio automatico e rapido di nuove funzionalità, orchestrando la distribuzione di frontend e backend in modo intelligente e riducendo al minimi i tempo di fermo del vostro applicativo. Potrete applicare i concetti e i passaggi illustrati nel webinar alla realizzazione di applicazioni di blog, web app statiche, web app serverless, progressive web app.

1. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Online Tech Talks
La serie di webinar AWS in Italiano
Costruisci e distribuisci applicazioni web moderne con AWS Amplify Console
Speaker
Stefano Sandrini
Solutions Architect, AWS
Obiettivi
§ Fornire una panoramica del servizio AWS Amplify Console
§ Fornire linee guida sullo sviluppo e la distribuzione di applicativi web
moderni integrando AWS Amplify Console e Amplify Framework
§ Mostrare tecniche di continuous integration / continuous deployment
semplificato, gestito e orchestrato
§ Fornire esempi di hosting globale e altamente disponibile per use case
tipici

2. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What’s covered in this session
• An overview of the AWS Amplify Console service
• Guidelines on the development and distribution of modern mobile web
applications by integrating AWS Amplify Console and Amplify Framework
• Simplified, managed and orchestrated continuous integration / continuous
deployment techniques
• Examples of global and highly available hosting for typical use case

3. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Modern Web Applications
• Traditional client-server web architectures led to poor experiences
Every button click required a roundtrip to the server, re-rendering the entire
application every time
• Modern Web Applications are created as Single Page Applications (SPA)
Package all application’s components into static files
• Native app-like experience
Frontend served efficiently as prebuilt HTML and Javascript files , can invoke
backend functionalities asynchronously without reloading the page.
• Functionality spread across multiple places and resources
Static frontend and assets, backend business logic, database, authentication
services

4. © 2019, 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

5. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
“Full stack” DevOps approach for Web apps
• Strong isolation barrier between projects and stages
Dedicated AWS stack 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. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
DevOps requirements for modern Web apps
- Recognize that there 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
Isolated
backends
Shared backend

7. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
DevOps challenges with modern Web apps
Lots of moving parts complicate the following:

8. © 2019, 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. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify Console
Globally available
Your app is served via AWS’s reliable
content delivery network with 144 points of
presence globally.
Easy custom domain setup
Set up custom domains managed in
Amazon Route 53 with a single click plus
get a free HTTPS certificate.

10. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify Console
Simplified continuous
workflows
Connect your repository to 'git push'
changes to your frontend and backend in a
single workflow.
Feature branch deployments
Work on new features without impacting
production. Create branch deployments linked to
each feature branch.

11. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify Console
Atomic deployments
All deployments either rollout successfully
or fail without requiring maintenance
windows.
Password protection
Share yet-to-be released features with internal
stakeholders by setting a username and
password.

12. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify Console: Use cases
Blogs or static web apps
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.
Serverless web apps
Add dynamic functionality using GraphQL or
REST APIs. Use AWS Amplify Console to deploy
your frontend and backend in a single workflow.

13. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify Console: Use cases
Progressive web apps
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.

14. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Part of the AWS Amplify family
Developer Tools
Amplify Framework
Cloud Services

15. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Use case: Gatsby-based static website
AWS Amplify Console
• Globally available website frontend
• Easy custom domain setup
• Feature branch deployment
• Atomic deployments

16. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Use case: Gatsby-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.

19. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Use case – Serverless web app

20. © 2019, 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

21. © 2019, 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

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

23. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Part of the AWS Amplify family

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

26. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Summary
• Serverless web apps contain multiple moving parts across the frontend
and the 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. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Get started!
https://amplify.aws

28. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
12 Marzo 2019 | MiCo - Centro Congressi

29. Thank you!
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Stefano Sandrini, Solutions Architect @ Amazon Web Services
Mail: stefano@amazon.com
Twitter: @electricste