s u m m i t - amazon web services... · 2019-04-04 · simplifier vos frontends à l’aidede...

S U MM I TP a r i s

© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.SUMM IT

Simplifier vos frontends à l’aide de backends serverless dans le cloud

M A P 3 0 2

Sébastien Stormacq

Technical Evangelist, AWS EMEA

@ sebsto

Aurélien Capdecomme

CTO, 20 Minutes

@ menthefraiche

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

Une nouvelle journée dans la vie d’un développeur


Nous avons besoin d’une app pour que nos clients puissent mettre à

jour leurs préférences. Notre concurrent vient de lancer la sienne.

Nous en avons besoin rapidement. Je n’ai pas de budget, surtout

qu’on ne sait pas si on aura du succès ou pas. Je ne veux pas payer si

ca ne marche pas. Elle doit pouvoir s’accomoder de millions

d’utilisateurs, être facile à maintenir et gérer au quotidien. Et tu es

tout seul sur ce projet, désolé.




Nous avons besoin d’une app pour que nos clients puissent mettre à

jour leurs preferences. Notre concurrent vient de lancer la sienne.

Nous en avons besoin rapidement. Je n’ai pas de budget, surtout

qu’on ne sait pas si on aura du succès ou pas. Je ne veux pas payer si

ca ne marche pas. Elle doit pouvoir s’accomoder de millions

d’utilisateurs, être facile à maintenir et gérer au quotidien. Et tu es

tout seul sur ce projet, désolé.

Pas de souçis. Je vais

utiliser un backend

serverless dans le cloud.


Vous avez dit sans serveur ?


Serverless, une définition

Pas de serveur à installer ou gérer Grandit avec vos besoins

Haute-disponibilité par design Payer pour la valeur ajoutée


Serverless, pas uniquement votre code

Base de données

APICode

Outils de développement


2002 2006

Lancement du

quotidien à Paris

1er quotidien de

France pour la 1ère fois

et de façon continue

jusqu’à aujourd’hui

Premier site

web

2007

Présent sur iOS dès les

débuts de l’iPhone

2010

11 rédactions locales

dans les principales

agglomérations

françaises

Un bureau

aux USA

2013

Un bureau

en Asie

Fusion des rédactions

print et numérique

2014 2015

Le numérique :

50% de l’audience

Twitter : 1 million

de followers

Le trafic mobile

dépasse le desktop

2016

Facebook : 2 millions

de fans

2017

1er média français à

développer une skill

pour Alexa, l’Assistant

vocal d’Amazon

Membre de

l’International Fact

Checking Network

2018

Utilisation de l’IA par la

rédaction

20Bot : 1er robot

conversationnel d’un

média d’info

Etre là où sont les gens


Mass media sur tous les supports

22,1 millions de lecteurs par mois

5,2 millions par jour*

10,6 M. 5 M.10,7 M. 2,6 M.

Source : ACPM One Global V3 2018 – Audiences Print, Internet fixe, Internet mobile et Internet tablette One Global 30 J - * Couverture jour cross media


De l’importance du each

2013 2018


De l’importance du each


Frontend


Amazon Aurora

Table TableTableAPIFrontend


Amazon Aurora

AWS Simple Queue Storage

Message



Amazon Aurora

AWS Step Functions


Message

Amazon ElastiCache

ElastiCache for

Redis

Amazon Elasticsearch Service

Search documents


SaaS

CRM


Amazon Aurora

AWS Step Functions


Message

Amazon ElastiCache

ElastiCache for

Redis

Amazon Elasticsearch Service

Search documents

Table TableTableAPI

Amazon Simple Email

Service (SES)

Frontend

SaaS

CRM


Le reach n’est rien sans l’engagement

# participatif+13% d’inscrits par jour

+87% de commentaires par jour

+432% d’interactions entre les membres

par jour


20 Minutes en Serverless

# scalable 40+ Lambdas

10+ Step Functions

84.6 millions d’invocations par mois

56.6 ms de temps de réponse


20 Minutes en Serverless

# flexible

pensé microservices, ajustable au niveau de la fonction

# économique

facturé à l’utilisation, moins de tâches ops

# innovant

nouveau paradigme de développement


165+ services

TECHNICAL & BUSINESS SUPPORT

Support ProfessionalServices

Optimization Guidance

PartnerEcosystem

Training & Certification Solutions Management

Account Management

Security & Billing Reports

Personalized Dashboard

MARKETPLACE

Business AppsBusiness Intelligence

DevOps Tools Security Networking StorageDatabases

IoT

Rules Engine

Device Shadows

Device SDKs

Device Gateway

Registry

Local Compute

MIGRATIONSchema Conversion

Exabyte-ScaleData Migration

Application Migration

Database Migration

Server Migration

HYBRID

Integrated Networking

Data Integration

Integrated Identity & Access

Integrated Resource & Deployment Management

Integrated Devices& Edge Systems

ML / IACustom Model Training & Hosting

Conversational Chatbots

Image & Scene Recognition

Facial Recognition & Analysis

Deep Learning (Apache MXNet,

TensorFlow, & others)

Text to Speech

Facial Search

ENTERPRISEVirtual Desktops

App Streaming

Sharing & Collaboration

Corporate Email

Communications

Contact Center

MOBILEAPI Gateway

Single Integrated Console

Identity

Sync

Mobile Analytics

Mobile App Testing

Targeted Push Notifications

DEV/OPSOne-click App Deployment

DevOps Resource Management

Application Lifecycle Management

Containers

Triggers

Resource Templates

Build and Test

Analyze and Debug

Patching

ANALYTICS

Data Warehousing

Business Intelligence

Elasticsearch

Hadoop/Spark

Data Pipelines

Streaming Data Collection

ETLStreaming Data Analysis

Interactive SQL Queries

APP SERVICES

Queuing & Notifications

Workflow

Email

Transcoding

Search

INFRA

Regions

Availability Zones

Points of Presence

CORE SERVICESComputeVMs, Auto-scaling, Load Balancing, Containers, Virtual Private Servers, Batch Computing, Cloud Functions, Elastic GPUs, Edge Computing

StorageObject, Blocks, File, Archivals, Import/Export, Exabyte-scale data transfer

CDN

DatabasesRelational, NoSQL, Caching, Migration, PostgreSQL compatible

NetworkingVPC, DX, DNS

SECURITY & COMPLIANCE

Identity Management

Key Management & Storage

Monitoring & Logs

Configuration Compliance

Web Application Firewall

Assessment& Reporting

Resource & Usage Auditing

Access Control

Account Grouping

DDOS Protection

MANAGEMENT TOOLS

Monitoring

Manage Resources

Resource Templates

Configuration Tracking

Server Management

Service Catalogue


Beaucoup de plomberie


Je vous présente AWS Amplify


Amplify – une CLI pour créer vos services

$ amplify add auth

$ amplify add storage

$ amplify add api

$ amplify push

Ajouter un Amazon Cognito User Pool

Créer un bucket Amazon S3 sécurisé

Ajouter une API REST ou GraphQL

Deployer le tout via AWS CloudFormation


Amplify – une ensemble de librairies open-source


Construisons une App avec React


Démarrer avec Amplify

$ amplify init

$ amplify push


Créer le service

$ amplify add auth

$ amplify push


Modifier notre app

import Amplify from 'aws-amplify’;import { withAuthenticator } from 'aws-amplify-react’;// 'aws-amplify-react-native';

import awsmobile from './aws-exports’; Amplify.configure(awsmobile);

…

export default withAuthenticator(App);


$ amplify add auth && amplify push

AWS Cloud

Clients

AWS Cognito User Pool

Accounts

Multi Factor

Authentication

Signup & Signin


https://2018.stateofjs.com/data-layer/overview


query GetNote {

getNote(id: ”1”) {

id

value

}

}

mutation CreateNote {

createNote(value: “My first note”) {

id

value

}

}

subscription OnCreateNote {

onCreateNote {

id

value

}

}

GraphQL, un language pour les APIs

type Note {

id: ID!

value: String!

}


AppSync, un moteur d’exécution des requêtes

query GetPost {

getPosts(id: ”1”) {

id

title

comments {

content

}

author {

name

}

}

}

query GetPost {

getPosts(id: ”1”) {

id

title

comments {

content

}

author {

name

}

}

}

Amazon

EC2

{"data" : {"posts" : [{"id" : 1,"title" : "Introduction to GraphQL","comments" : [{"content" : "I want GraphQL for my next App!"

}],"author" : {"name" : "Sébastien Stormacq"

}}

]}

}

Amazon

DynamoDB

AWS

Lambda


Créer votre API

$ amplify add api

$ amplify push


$ amplify add api

$ amplify add api? Please select from one of the below mentioned services GraphQL? Provide API name: amplifynotes? Choose an authorization type for the API Amazon Cognito User PoolUsing service: Cognito, provided by: awscloudformationThe current configured provider is Amazon Cognito.? Do you want to use the default authentication and security configuration?Yes, use the default configuration.Successfully added auth resource? Do you have an annotated GraphQL schema? No? Do you want a guided schema creation? true? What best describes your project: Objects with fine-grained access control (e.g., a project management app with owner-based authorization)? Do you want to edit the schema now? YesPlease edit the file in your editor: /<path>/amplify/backend/api/amplifynotes/schema.graphql? Press enter to continue


Un schéma de base

type Note {id: ID!note: String!

}


Transformers (aka Annotations)

type Note@model @auth(rules: [{allow: owner}]){id: ID!note: String!

}


$ amplify add api & @model

AWS Cloud

Clients

AWS AppSync Amazon DynamoDB

Table

Schemas Resolvers Data Sourcestype Query {

getNote(...): NotelistNotes(...): Note

}

type Mutation {createNote(...): NoteupdateNote(...): NotedeleteNote(...): Note

}

type Subscription {onCreateNote (...): NoteonUpdateNote (...): NoteonDeleteNotet(...): Note

}

type Note {id: ID!value: String

}

queries

mutations

getNote

listNotes

updateNote

deleteNote

createNote

Note Table

Datasource

IAM RoleARN

Note RoleARN


Changer votre modèle GraphQL

type Note@model @auth(rules: [{allow: owner}])@searchable {id: ID!note: String!

}


Créer le service

$ amplify push


@searchable

AWS Cloud

Clients

AWS AppSync Amazon DynamoDB

Table

Schemas Resolvers Data Sources

queries

mutations

getNote

listNotes

updateNote

deleteNote

createNote

Note Table

Datasource

IAM RoleARN

Note RoleARN

type Query {getNote(...): NotelistNotes(...): Note

}


}


}


}


@searchable

AWS Cloud

Clients

AWS AppSync

Document Index

Amazon ElasticSearch

Schemas Resolvers Data Sourcestype Query {

getNote(...): NotelistNotes(...): NotesearchNotes(...): [Note]

}


}


}


}

queries

mutations

getNote

listNotes

updateNote

deleteNote

createNote

ElasticSearch

Datasource

IAM RoleARN

ESDomain

ARN

Streaming

Lambda

Note Table

Datasource

IAM RoleARN

Note RoleARN

searchNotes

Amazon DynamoDB

Table


Créer le service

$ amplify add hosting

$ amplify publish


amplify add hosting

$ amplify add hosting? Select the environment setup: DEV (S3 only with HTTP)? hosting bucket name my_hosting_bucket? index doc for the website index.html? error doc for the website index.html


amplify publish (dev)

AWS Cloud

Clients

Amazon Cloudfront Amazon S3

Bucket serving

static web content

Edge Locations


amplify publish (prod)

AWS Cloud

Clients

Amazon Cloudfront Amazon S3

Bucket serving

static web content

Edge Locations


Amplify – Ceinture noire

🥋$ amplify checkout ENV

$ amplify add ENV


Amplify – Ceinture noire

🥋


Récapitulons

Une web app et des services cloud serverless

• Avec authentification et enregistrement (Amazon Cognito)

• API GraphQL (AWS AppSync + Amazon DynamoDB)

• API de recherche full-text (Amazon ElasticSearch)

• Déploiement et hébergement (Amazon S3, Amazon CloudFront)

https://github.com/sebsto/amplify-react-workshop


Mot d’ordre

Merci !


Sébastien Stormacq

Technical Evangelist, AWS EMEA

@ sebsto

Aurélien Capdecomme

CTO, 20 Minutes

@ menthefraiche

s u m m i t - amazon web services... · 2019-04-04 · simplifier vos frontends à l’aidede...

Documents