Note about the AWS tuto Amazon tuto - Build a Serverless Web Application that create a serverless web app
Code: aws-samples/aws-serverless-workshops/tree/master/WebApplication
N | Component | Function | Description |
---|---|---|---|
1 | Amazon S3 | Static Web Hosting | Amazon S3 hosts static web resources including HTML, CSS, JavaScript, and image files which are loaded in the user's browser |
2 | Amazon Cognito | User Management | Amazon Cognito provides user management and authentication functions to secure the backend API |
3 | Amazon DynamoDB | Serverless Backend | Amazon DynamoDB provides a persistence layer where data can be stored by the API's Lambda function. |
4 | AWS Lambda and Amazon API Gateway | RESTful API | JavaScript executed in the browser sends and receives data from a public backend API built using Lambda and API Gateway. |
Creates a user pool ID and an app client ID, see Cognito - Javascript Identity Sdk (amazon-cognito-identity-js) and use:
Implementation in the app:
window._config = {
cognito: {
userPoolId: 'eu-central-1_7l0D9CCvP', // PoolId e.g. us-east-2_uXboG5pAb
userPoolClientId: '4rv21psdl35dsj3d1hhb5pug3p', // App clients Id e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
region: 'eu-central-1' // e.g. us-east-2
},
api: {
invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
}
};
The backend are the functions that process a HTTP request.
The function is a Lambda Function with a IAM Role to give authorization to create data into the Database (Amazon DynamoDB) The Lambda function will be invoked each time an HTTP request is made.
The function will be invoked from the browser after having create an API with the Amazon API Gateway that links the Lambda function to an HTTP endpoint (URL + HTTP method).
The static website is turned into a dynamic web application by adding client-side JavaScript that makes AJAX calls to the exposed APIs.
The IAM role needs to grants to the Lambda function permission to:
Create Role:
Selecting a role type automatically creates a trust policy for your role that allows AWS services to assume this role on your behalf. If you were creating this role using the CLI, AWS CloudFormation or another mechanism, you would specify a trust policy directly.
Role Policy:
{
"path": "/ride",
"httpMethod": "POST",
"headers": {
"Accept": "*/*",
"Authorization": "eyJraWQiOiJLTzRVMWZs",
"content-type": "application/json; charset=UTF-8"
},
"queryStringParameters": null,
"pathParameters": null,
"requestContext": {
"authorizer": {
"claims": {
"cognito:username": "the_username"
}
}
},
"body": "{\"PickupLocation\":{\"Latitude\":47.6174755835663,\"Longitude\":-122.28837066650185}}"
}
{
"statusCode": 201,
"body": "{\"RideId\":\"j09lHYJSAPWwS6k81qEg1Q\",\"Unicorn\":{\"Name\":\"Rocinante\",\"Color\":\"Yellow\",\"Gender\":\"Female\"},\"UnicornName\":\"Rocinante\",\"Eta\":\"30 seconds\",\"Rider\":\"the_username\"}",
"headers": {
"Access-Control-Allow-Origin": "*"
}
}
AWS Lambda automatically creates a new log group per function in Amazon CloudWatch Logs and writes logs to it when your function is invoked.
To delete, go to CloudWatch > Logs > /aws/lambda/LAMBDA_NAME
Amazon API Gateway exposes the Lambda function and secure it using the Amazon Cognito user pool.
Request Browser code is in the ride.js file. It uses jQuery's ajax() method to make the remote http request.
Create API
Example:
window._config = {
cognito: {
userPoolId: 'eu-central-1_7l0D9CCvP', // PoolId e.g. us-east-2_uXboG5pAb
userPoolClientId: '4rv21psdl35dsj3d1hhb5pug3p', // App clients Id e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
region: 'eu-central-1' // e.g. us-east-2
},
api: {
invokeUrl: 'https://o2f6vh7cwf.execute-api.eu-central-1.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
}
};