React + Serverless - Amazon Simple Storage Service (S3)

inside the cloud of your choice. - Pay per execution pricing. - Never pay for idle ... DynamoDB noSQL for database. • Authorization via API Gateway Custom ...
9MB Sizes 0 Downloads 454 Views
I'm @DavidWells Software Developer

@ previously UX/UI


Refactor your React App into Angular 1 and then back to jQuery

lolz jk


React + Serverless: a match made in heaven

Life Goals

Scaling servers is... hard

Love you Wes ❤ Check out all Wes's courses

Load balancing

Security concerns



follower database instances



AWS Lambda

Code that runs on-demand inside the cloud of your choice

- Pay per execution pricing - Never pay for idle servers - Auto scales for you - Event driven workflows - Leverage third party services

Code that runs on-demand inside the cloud of your choice

and auth0 webtasks, oracle functions, kubernetes, & spotInst....

use cases

use cases • • • • • • • •

REST APIs, Graph APIs: lambda -> API Gateway endpoint

event-driven workflows, scheduled tasks, data transforms

real-time/streaming, batch processing: kinesis -> lambda

web, mobile & IoT backends

form processing


devops automation


• • • • • •

file manipulation

voice apps (Alexa)

ETL workloads

image resizing

video transcoding

security audits

• • • • •

dynamic websites

web hook listeners

CRON jobs

CI/CD pipelines

log analytics

Frontend •

Create React App

Hosted on Netlify

Using react router 4

State via Redux

Talks to API Gateway via axios

Auth via Auth0

Backend •

Node backend running in AWS Lambda Functions

DynamoDB noSQL for database

Authorization via API Gateway Custom Authorizer Function

serverless backend

watch Serverless Authentication and Authorization

Custom Authorizer Flow

1. Create a new auth0 client

2. Make it a SPA

3. Note the Domain & Client ID values

4. Install the auth0 Authorization extension

5. setup permissions/groups/roles

6. create a new auth0 Rule to add roles to JWT

6b. attach the users roles to the JWT on login via rule

7. plug in auth0 clientID & auth0 domain to frontend + backend frontend _config.js


8. Deploy Backend

Take your API endpoints and plug them into the UI

8b. Add API endpoints to frontend App

9. Deploy Frontend

- Builds on github repo events (CI/CD flow) - Automatic Branch previews ⚡ - static site redirects via `_redirects` file 👌 - Handles proxied URLs - this gives us escape hatches for

dynamic pages/content - Super cheap - amazing support - 💕 them

Custom Authorizer Implementation

see code:

serverless.yml config file

Where to run What to run When to run

handler.js file

named export saveUser function is referenced in serverless.yml

serverless deploy in cwd

framework packages & deploys code

returns live API end