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

@

davidwells.io

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

lolz jk

Serverless

React + Serverless: a match made in heaven

Life Goals

Scaling servers is... hard

Love you Wes ❤ Check out all Wes's courses wesbos.com/courses



Load balancing



Security concerns



Monitoring



Logging



follower database instances



costs...



.......

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

authentication

devops automation

chatbots

github.com/serverless/examples

• • • • • •

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

github.com/serverless/forms-service

Frontend •

Create React App



Hosted on Netlify



Using react router 4



State via Redux



Talks to API Gateway via axios



Auth via Auth0 github.com/serverless/forms-service

Backend •

Node backend running in AWS Lambda Functions



DynamoDB noSQL for database



Authorization via API Gateway Custom Authorizer Function

github.com/serverless/forms-service

serverless backend

watch Serverless Authentication and Authorization

http://bit.ly/aws-auth

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

backend config.prod.json

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: bit.ly/auth-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