Wild Rydes Serverless Web Application Workshop

Introduction

Wild Rydes needs your help! With fresh funding from its seed investors, Wild Rydes is seeking to build the world’s greatest mobile/VR/AR unicorn transportation system. The scrappy startup needs a first-class webpage to begin marketing to new users and to begin its plans for global domination. Join us to help Wild Rydes build a website using a serverless architecture.

Overview of Workshop Labs

The Wild Rydes Serverless Web Application Workshop introduces the basics of building serverless web applications using Amazon Simple Storage Service (S3), AWS Lambda, Amazon API Gateway, Amazon DynamoDB, Amazon Cognito, Amazon Simple Email Service (SES), Amazon CloudFront, and other AWS services. In this workshop, you are an early founding employee of Wild Rydes who is tasked with building out the company’s marketing website and other initiatives using a serverless architecture and AWS.

Requirements

You'll be configuring serverless solutions in your own AWS account. All of the services required for this lab are covered under the AWS Free Tier for accounts that were created within the past 12 months. Accounts that have been created within the last 24 hours might not yet have access to servers required for this workshop.

To complete this lab, you'll need:

Labs

Pre-lab: Static Website Hosting

In this module, you'll verify your local environment is setup, create an Amazon S3 bucket to host your assets, and configure it to serve a static website. Because Wild Rydes is a startup preparing for global scale you'll also configure an Amazon CloudFront distribution to accelerate delivery of your assets to your potential users across the world.

Lab 1: Beta Sign-up Mailing List

Visitors to your website who are interested in participating in your beta program can enroll by filling out a form to join your beta users mailing list. You'll create an Amazon DynamoDB table to store these email addresses and an Amazon Cognito identity pool and an AWS Identity and Access Management (IAM) policy to allow unauthenticated users to post it. Using DynamoDB Streams, AWS Lambda, and Amazon SES, beta users will receive a confirmation email thanking them for enrolling and providing further details.

Lab 2: Administrative Interface

Your marketing team needs an administrative interface to manage aspects of the site. In this module, you'll create an Amazon Cognito user pool for your administrator users and start building endpoints in Amazon API Gateway. You'll configure an authorizer to validate the identity of your administrators and wire up a page to view users who have signed up for the beta program.

Lab 3: Product Update Blog

To keep your visitors up to date on your progress building your product, your marketing team would like to publish a blog of product updates. Using your new administrative interface, you'll add an interface to publish posts to the product update blog using Amazon API Gateway and AWS Lambda which will appear on your landing page.

Tips

Open a blank text editor file for scratch notes. Whenever a step instructs you to note an item, copy and paste that item into your scratch notes for later reference.
Look for error messages in the Google Chrome Developer Console if you encounter an issue with any of the functionality loading on the site. You can access the console by pressing Control + Shift + J on Linux and Windows or Command + Option + J on macOS.
There are several components of the setup which are case sensitive (e.g. DynamoDB tables and keys). To avoid errors, prefer copying and pasting to re-typing.

Pre-lab: Static Website Hosting

In this module, you'll setup an Amazon S3 bucket to host your assets and configure it to serve a static website. Because Wild Rydes is a startup preparing for global scale you'll also configure an Amazon CloudFront distribution to accelerate delivery of your assets to your potential users across the world.

If you do not have a personal AWS account for testing, create one and login to your account.
Pick a single Region into which you'll deploy services. You'll need to ensure all required services (Amazon S3, AWS Lambda, Amazon API Gateway, Amazon Cognito, Amazon SES, Amazon DynamoDB, Amazon CloudFront, IAM) are available in the Region you choose. See the Region Table for details about what services are available in which Regions. US East (N. Virginia), US West (Oregon), and EU (Ireland) offer all of the services required for this workshop.

All of the resources created in the below labs must be created within a single Region.
Ensure you have the following installed:
Clone the lab contents locally.
```
git clone https://github.com/awslabs/aws-serverless-website-workshop.git
```
This repository contains files required for all four labs and a work directory for you to copy files into as you progress through the workshop.
Ensure your installation of the AWS CLI is properly configured with credentials that have administrator access to your account.
Select S3 from the AWS Management Console.
Click the Create Bucket button.
Enter a name for the bucket in Bucket Name. Bucket names must be globally unique within AWS so prefix the name of the bucket with your last name to prevent collisions. For example, in our examples we'll follow the convention of LAST_NAME-wildrydes so we'll use smith-wildrydes.
Select the Region in which you'll use for this lab in the Region drop down. See the note in the requirements section about which Region to choose. US East (N. Virginia) is called US Standard in Amazon S3 for legacy reasons.
Click the Create button.
Expand the Permissions section.
Click the Add bucket policy link.

Create a bucket policy to allow anonymous read access to your bucket. This will make the bucket content publicly readable and allow Amazon S3 to serve it to web users. Ensure that you change the INSERT_BUCKET_NAME_HERE placeholder to the name you chose in Step 3.

 {
   "Version": "2012-10-17",
   "Statement": [
     {
       "Effect": "Allow",
       "Principal": "*",
       "Action": "s3:GetObject",
       "Resource": "arn:aws:s3:::INSERT_BUCKET_NAME_HERE/*"
     }
   ]
 }

Click the Save button.
Expand the Static Website Hosting section.
Select Enable website hosting.
Enter index.html as the website's Index Document. This will redirect requests to the root of your website to the object index.html.
Note the hostname in Endpoint.
Click the Save button.
Copy the Wild Rydes static website files from prelab/ to your work directory. The work directory will act as a staging area for our static site while we build it. We'll be incrementally copying files from each lab-specific directory into it and editing them as we progress through the workshop.

On Linux and macOS:

cp -R prelab/* work

On Windows:

xcopy /E /Y prelab work

Copy the Wild Rydes static website files into your bucket. Replace the INSERT_BUCKET_NAME_HERE placeholder with the bucket you created earlier.
```
aws s3 sync work/ s3://INSERT_BUCKET_NAME_HERE
```
Browse to the hostname that you noted above in Step 13 and ensure that the website loads. Verify that the links work.
In the AWS Management Console, click Services in the navigation bar and select CloudFront.
Click the Create Distribution button.
To create a web distribution, click the Get Started button under the Web header.
Enter the static hosting endpoint from the Amazon S3 bucket that you noted above in Step 13 and browsed to in Step 17 in Origin Domain Name. Ensure that you enter in the static website hosting endpoint and do not use the autocompleter as that option will configure traffic to use bucket rather than its website endpoint which cannot serve web pages correctly.
Select Customize from Object Caching.
Enter 5 as the Default TTL. This will cache objects for 5 seconds before checking for file updates with the origin. In production, this value would be set much higher but we're lowering it to 5 for demonstration purposes during the workshop.
Click the Create Distribution button.
Wait for the Status field to change from In Progress to Deployed. This may take upwards of 30 minutes.
Once deployed, test your CloudFront distribution by putting the Domain Name of your distribution into a web browser. Click around and verify that the site works as it did in Step 17.

PRE-LAB COMPLETE

In this lab you've:

Configured your local environment for the rest of the labs
Created an Amazon S3 bucket
Configured it for static web site hosting
Created a Amazon CloudFront distribution to deliver your content around the world

Lab 1: Beta Sign-up Mailing List

Select SES from the AWS Management Console.
Click Email Addresses in the left hand navigation menu.
Click the Verify a New Email Address button.
Enter an email address where you can receive email in Email Address. By default, Amazon SES operates in sandbox mode which means that you must verify all email addresses used to send and receive email. This is useful for development and demonstration purposes. The email address you enter here must be able to receive emails and we'll also use it as the sender in our workshop.
Click the Verify this Email Address button.
Click the Close button.
Wait for the verification email from Amazon SES to arrive in the inbox of the email address you provided in Step 4.
Open the email and click the verification link.

You should see a page with a header Congratulations! indicating that you can now send email from this address.

Click Services in the navigation bar and select IAM.
Click Roles in the left-hand navigation.
Click the Create New Role button.
Enter LambdaSESRole for Role Name.
Click the Next Step button.
Click the Select button next to AWS Lambda.

Attach the AmazonSESFullAccess and AWSLambdaBasicExecutionRole managed policies to the role by searching for them in the Filter text box and clicking the checkbox. These policies contain the permissions that your AWS Lambda function will have within your account and will allow your function to send email via Amazon SES and to send logs to Amazon CloudWatch Logs. Take a moment to look at the AmazonSESFullAccess and AWSLambdaBasicExecutionRole policies to see what permissions you're granting your Lambda function.
Click Next Step.
Verify the Trusted Entities and Policies section against the screenshot and click Create Role.

Click Services in the navigation bar and select DynamoDB.
Click the Create table button.
Enter Wildrydes_Emails in Table name. Ensure you type this exactly as displayed as DynamoDB is case sensitive.
Enter Email and select String in Primary key. Ensure you type this exactly as displayed as DynamoDB is case sensitive.
Leave Use default settings checked.

Click the Create button.
Scroll down to the bottom of the Table Details section and note the Amazon Resource Name (ARN).

Click Services in the navigation bar and select Cognito.
Click the Manage Federated Identities button.
Click the Create new identity pool button.
Enter wildrydes in Identity pool name.
Check Enable access to unauthenticated identities.

Click the Create Pool button.
This page will allow you to define authenticated and unauthenticated roles associated with your identity pool and the appropriate permissions for each. Expand the View Details section. Next, expand the View Policy Document section for the Cognito_wildrydesUnauth_Role role.
Click Edit next to the policy document. You'll be asked to ensure you've read the documentation prior to editing. Click Ok.
Replace the INSERT_DYNAMODB_ARN_HERE placeholder below with the value you noted in Step 24 and copy and paste the result into the policy document text area. When finished, the text area should only contain the below policy.
```
 {
   "Version": "2012-10-17",
   "Statement": [
     {
       "Effect": "Allow",
       "Action": "dynamodb:PutItem",
       "Resource": "INSERT_DYNAMODB_ARN_HERE"
     }
   ]
 }
```
When the policy has been entered correctly, your screen should resemble the below:
Click the Allow button.
Click Edit identity pool in the upper right and note the Identity pool ID.

Copy the Wild Rydes static website files from lab1/ to your work directory.

On Linux and macOS:

cp -R lab1/* work

On Windows:

xcopy /E /Y lab1 work

In your work directory, open scripts/config.js in your text editor.
Enter the Region in which you've created the Cognito Identity Pool in Step 30 into the region attribute. This value will be the first half of the Identity Pool ID up to the colon you noted in Step 35.

For example:
```
var Wildrydes = {
  config: {
    region: 'us-east-1',
    identityPoolId: '',
    userPoolId: '',
    userPoolClientId: '',
    apiUrl: '',
  }
}
```

Enter the Identity Pool ID you noted in Step 35 into the identityPoolId attribute.

For example:

var Wildrydes = {
  config: {
    region: 'us-east-1',
    identityPoolId: 'us-east-1:ffffffff-ffff-ffff-ffff-ffffffffffff',
    userPoolId: '',
    userPoolClientId: '',
    apiUrl: '',
  }
}

Save the file.
Update the contents of the Amazon S3 bucket created the pre-lab with the new files:
```
aws s3 sync work/ s3://INSERT_BUCKET_NAME_HERE
```
Navigate to the URL of the Amazon CloudFront distribution created in Lab 1.
Scroll down to the Sign Up form and enter the email address you verified in Step 4 into the form and click Submit. The form will be replaced with a confirmation message.

If something went wrong you will receive an error as a JavaScript alert. Open your developer console (see Tips section for insturctions) for more information.

Common errors are:

ResourceNotFoundException: Missing credentials in config

Your _config.js_ does not map to a valid Cognito identity pool. Ensure that you've entered the **identityPoolId** correctly by checking your work in steps 37 through 40.

ResourceNotFoundException: Requested resource not found

The DynamoDB could not be found. Check your DynamoDB table name and confirm it is named **Wildrydes_Emails** as directed in step 20. If not, recreate the table.

ValidationException: One or more parameter values were invalid: Missing the key [column] in the item

The DynamoDB table was found but the primary key wasn't correctly entered. Check your DynamoDB table settings and confirm the primary key is named **Email** as directed in step 21. If not, recreate the table.

AccessDeniedException: User: arn:aws:sts::123456789012:assumed-role/Cognito_wildrydesUnauth_Role/CognitoIdentityCredentials is not authorized to perform: dynamodb:PutItem on resource: arn:aws:dynamodb:us-west-2:123456789012:table/Wildrydes_Emails

The policy associated with your unauthenticated Cognito role has not been created correctly. Go to **IAM**, click on **Roles**, find and click on **Cognito_wildrydesUnauth_Role**, and click on **Edit Policy**. Ensure the policy you have matches the policy outlined in step 33 exactly.

Click Services in the navigation bar of the AWS Management Console and select DynamoDB.
Click Tables in the left-hand navigation.
Click Wildrydes_Emails.
Select the Items tab and ensure that the email address you submitted has been written to the table.

Select the Triggers tab.
Click the Create trigger button and select New function.
Select Wildrydes_Emails from DynamoDB table.
Enter 1 for Batch Size.
Select Latest from Starting position. This will instruct AWS Lambda to start processing records from the end of the stream.
Check the Enable trigger checkbox.

Click the Next button.
Enter ConfirmationEmail in Name.
Select Node.js 4.3 from Runtime.

Use the code below for the Lambda function code.

var AWS = require('aws-sdk');
var ses = new AWS.SES({apiVersion: '2010-12-01'});

exports.handler = (event, context, callback) => {
  event.Records.forEach((record) => {
    var params = {
      Source: process.env.EMAIL_ADDRESS,
      Destination: {
        ToAddresses: [record.dynamodb.NewImage.Email.S]
      },
      Message: {
        Body: {
          Html: {
            Data: '<html><h1>Thank you!</h1><p>Wild Rydes is coming soon! Stay tuned for more info about unicorns near you!</p></html>'
          },
          Text: {
            Data: 'Wild Rydes is coming soon! Stay tuned for more info about unicorns near you!'
          }
        },
        Subject: {
          Data: 'Wild Rydes Limited Private Beta Confirmation'
        }
      }
    };

    ses.sendEmail(params, (err, data) => {
      if (err) context.fail(err);
      else     context.succeed(null);
    });
  });
};

Add an environment variable for the email address from which to send the confirmation email. Enter EMAIL_ADDRESS as the Key and the email address you defined in Amazon SES in Step 4 as the Value.

Select Choose an existing role from Role.
Select LambdaSESRole from Existing role.
Click the Next button.
Click the Create Function button.
Open your web browser and open the landing page of the Wild Rydes marketing site using the CloudFront URL you created in Lab 1.
Submit a sub-address of the email address you verified in Step 4. For example, if you're using gmail, you can append a plus sign with a random label to your email to write new records to the table that will be delivered to your address. For example, [email protected] will be delivered to [email protected].
Wait for the function to begin processing records which could take a few moments. Check the triggers tab in your Lambda function and wait for Last result to change to OK. You can also check the function's logs and metrics in the monitoring tab.

Open your email inbox and verify you receive confirmation messages when you fill out and submit the form.

LAB 1 COMPLETE

In this lab you've:

Validated an email address within Amazon SES from which marketing emails are delivered.
Created an Amazon DynamoDB table to capture the email address of visitors to your site.
Configured an Amazon Cognito identity pool that allows anonymous users to post to an Amazon DynamoDB table.
Added a trigger to the Amazon DynamoDB table to email users who sign up for your beta program.

Lab 2: Administrative Interface

Select Cognito from the AWS Management Console.
Click the Manage your User Pools button.
Click the Create a User Pool button.
Enter Wildrydes_Admin in Pool name.
Click the Review Defaults link.
Click the pen icon in the box that contains the Required attributes attribute.
Deselect email.
Click the Save changes button.
Click the pen icon in the box that contains the User sign ups allowed? attribute.
Select Only allow administrators to create users from Do you want to allow users to sign themselves up?
Click the Save changes button.
Click the pen icon in the box that contains the Verifications attribute.
Deselect Email from Do you want to require verification of emails or phone numbers?
Click the Save changes button.
Click the Add client... link in the box that contains Apps.
Click the Add an app link.
Enter web as the App name.
Deselect Generate client secret.
Click the Create app button.
Click the Save changes button.
Click the Create pool button.
Note the Pool Id in the Pool details section.

Click Apps on the left hand navigation menu.
Note the App client id.

Click Users on the left-hand navigation.
Click the Create user button.
Enter your email address in Username (required).
Enter a password into Temporary password. Create and note a password that meets the default password policy requirements of at least eight characters containing at least one upper case letter, number, and symbol.
Deselect Send an invitation to this new user?, Mark phone number as verified?, Mark email as verified?.

Click the Create user button.
Click the AWS logo in the navigation bar and click on IAM.
Click Roles in the left-hand navigation.
Click the Create New Role button.
Enter LambdaDynamoDBRole for Role Name.
Click the Next Step button.
Click the Select button next to AWS Lambda.
Attach the AmazonDynamoDBFullAccess and AWSLambdaBasicExecutionRole managed policies to the role by searching for them in the Filter text box and clicking the checkbox.
Click Next Step.
Click Create Role.
Click Services in the navigation bar and select Lambda.
Click the Create a Lambda function button.
Click Blank Function to start with an empty blueprint.
Skip configuring triggers by clicking on the Next button.
Enter GetAllEmails as the Name of the Lambda function.
Select Node.js 4.3 as Runtime.

Use the code below for the Lambda function code.

var aws = require('aws-sdk');
var dynamodb = new aws.DynamoDB({});

exports.handler = (event, context, callback) => {
  var params = {
    TableName: "Wildrydes_Emails"
  };

  dynamodb.scan(params, function(err, data) {
    if (!err) {
      var emails = [];
      data.Items.forEach((item) => emails.push(item.Email.S));

      context.succeed({
        statusCode: '200',
        headers: { 'Access-Control-Allow-Origin': '*'},
        body: JSON.stringify({ Emails: emails })
      });
    } else {
      context.fail(err);
    }
  });  
};

Select Choose an existing role from Role.
Select LambdaDynamoDBRole from Existing role.

Click the Next button.
Click the Create Function button.
Click Services in the navigation bar and select API Gateway.
Click the Get Started button to create a new API.
Select New API.
Enter Wildrydes as the API name.
Click the Create API button. This will default to an example API. Click on the OK button to dismiss the modal.
Click the Authorizers link in the left hand navigation menu.
Click the Create button with the drop-down list and click Cognito User Pool Authorizer.
Select the Region you're using from Cognito Region.
Select Wildrydes_Admin from the Cognito user pool drop-down list.
Leave Wildrydes_Admin in Authorizer name.
Leave method.request.header.Authorization in Identity token source.

Click the Create button.
Click the Resources link in the left-hand navigation.
Click on the Actions button.
Click on the Create Resource link.
Enter emails as Resource Name.
Select Enable API Gateway CORS.
Click the Create Resource button.
Click the Actions button.
Click the Create Method link.
Select GET from the drop down and click the check mark.
Check Use Lambda Proxy integration.
Select the Region you're using from Lambda Region.
Enter GetAllEmails as Lambda Function.

Click the Save button. You will be prompted to give permission to API Gateway to invoke your Lambda function. Click the OK button.
Click Method Request.
Click the pen icon in Authorization.
Select Wildrydes_Admin under Cognito user pool authorizers and click the check mark.
Click the Actions button.
Click Deploy API link.
Select [New Stage] from Deployment stage.
Enter prod as the Stage name.
Click on the Deploy button.
Note the Invoke URL of your new API.

Copy the Wild Rydes static website files from lab2/ into your work directory.

On Linux and macOS:

cp -R lab2/* work

On Windows:

xcopy /E /Y lab2 work

In your work directory, open scripts/config.js in your text editor.

Enter the User Pool ID from the user pool you noted in Step 22 as the userPoolId attribute.

For example:

var Wildrydes = {
  config: {
    region: 'us-east-1',
    identityPoolId: 'us-east-1:ffffffff-ffff-ffff-ffff-ffffffffffff',
    userPoolId: 'us-east-1_0Vt8rntSI',
    userPoolClientId: '',
    apiUrl: '',
  }
}

Enter the Client ID from the web app you added to the user pool you noted in Step 24 as the userPoolClientId attribute.

For example:

var Wildrydes = {
  config: {
    region: 'us-east-1',
    identityPoolId: 'us-east-1:ffffffff-ffff-ffff-ffff-ffffffffffff',
    userPoolId: 'us-east-1_0Vt8rntSI',
    userPoolClientId: 'jc2f4p2ft4r7mmbeg9s3c8vtq',
    apiUrl: '',
  }
}

Enter the Invoke URL from the API you noted in Step 84 as the apiUrl attribute.

For example:

var Wildrydes = {
  config: {
    region: 'us-east-1',
    identityPoolId: 'us-east-1:ffffffff-ffff-ffff-ffff-ffffffffffff',
    userPoolId: 'us-east-1_0Vt8rntSI',
    userPoolClientId: 'jc2f4p2ft4r7mmbeg9s3c8vtq',
    apiUrl: 'https://aaaaaaaaaaaa.execute-api.us-east-1.amazonaws.com/prod',
  }
}

Update the contents of the Amazon S3 bucket created in the pre-lab with the new files:
```
aws s3 sync work/ s3://INSERT_BUCKET_NAME_HERE
```
Open your web browser and open the admin page of the Wild Rydes marketing site using the CloudFront URL you created in Lab 1 and append /admin to it.
Log into the admin site using the credentials you created in Step 30.
Click on the View Emails link.
Verify that you see a full list of emails that have been submitted to the site. Submit other email addresses and reload this page to ensure they are also returned.

LAB 2 COMPLETE

In this lab you've:

Created an Amazon Cognito user pool to manage identities for your administrator users.
Created an Amazon DynamoDB function to return email addresses through a Amazon API Gateway proxy to an AWS Lambda method.
Added an API for our site and added an emails resource with a GET method only accessible to authenticated administrator users.

Lab 3: Product Update Blog

To keep your visitors up to date on your progress building your product, your marketing team would like to publish a blog of product updates. Using your new administrative interface, you'll add an interface to publish posts to the product update blog using API Gateway and Lambda which will appear on your landing page.

Select DynamoDB from the AWS Management Console.
Click the Create table button.
Enter Wildrydes_Posts in Table name. Ensure that you type this exactly as displayed because Amazon DynamoDB is case sensitive.
Enter Blog and select String in Primary key. Ensure that you type this exactly as displayed because Amazon DynamoDB is case sensitive.
Check Add sort key.
Enter Timestamp and select Number in the Sort key field that appears under the check box. Ensure that you type this exactly as displayed because Amazon DynamoDB is case sensitive.
Leave Use default settings checked.
Click the Create button.
Click Services in the navigation bar and select Lambda.
Click the Create a Lambda function button.
Select the Blank Function blueprint.
Skip configuring triggers by clicking the Next button.
Enter CreatePost as the Name of the Lambda function.
Select Node.js 4.3 as Runtime.

Use the code below for the Lambda function code.

var aws = require('aws-sdk');
var dynamodb = new aws.DynamoDB({});

exports.handler = (event, context, callback) => {
  var body = JSON.parse(event.body);
  var params = {
    TableName: 'Wildrydes_Posts',
    Item: {
 	 Blog: { S: 'product-updates' },
 	 Timestamp: { N: body.Timestamp },
 	 Title: { S: body.Title },
      Body: { S: body.Body }
    }
  };

  dynamodb.putItem(params, (err, data) => {
    if (!err) {
 	  context.succeed({
        statusCode: '200',
        headers: { 'Access-Control-Allow-Origin': '*'},
        body: JSON.stringify({})
 	  });
    } else {
 	  context.fail(err);
    }
  });
};

Select Choose an existing role from Role.
Select LambdaDynamoDBRole from Existing role.
Click the Next button.
Click the Create Function button.
Click Dashboard in the left-hand navigation and click the Create a Lambda Function button.
Select the Blank Function blueprint.
Skip configuring triggers by clicking on the Next button.
Enter GetAllPosts as the Name of the Lambda function.
Select Node.js 4.3 as Runtime.

Use the code below for the Lambda function code.

var aws = require('aws-sdk');
var dynamodb = new aws.DynamoDB({});

exports.handler = (event, context, callback) => {
  var params = {
    TableName: 'Wildrydes_Posts',
    ScanIndexForward: false,
    KeyConditions: {
 		Blog: {
 			ComparisonOperator: 'EQ',
 			AttributeValueList: [ { S: 'product-updates' } ],
 		}
    }
  };

  dynamodb.query(params,(err, data) => {
    if (!err) {
      var posts = [];
      
      data.Items.forEach((item) => {
        posts.push({
          Timestamp: item.Timestamp.N,
          Title: item.Title.S,
          Body: item.Body.S
        })             
      });
      
      context.succeed({
        statusCode: '200',
        headers: { 'Access-Control-Allow-Origin': '*'},
        body: JSON.stringify({ Posts: posts })
      });
    } else {
      context.fail(err);
    }
  });  
};

Select Choose an existing role from Role.
Select LambdaDynamoDBRole from Existing role.
Click the Next button.
Click the Create Function button.
Click Services in the navigation bar and select API Gateway.
Click the Wildrydes API.
Click the Actions button.
Click the Create Resource link.
Enter posts as Resource Name.
Select Enable API Gateway CORS.
Click the Create Resource button.
Click the Actions button.
Click the Create Method link.
Select POST from the drop-down list and click the check mark.
Check Use Lambda Proxy integration.
Select the Region you're using from Lambda Region.
Enter CreatePost as Lambda Function.

Click the Save button. You will be prompted to give permission to API Gateway to invoke your Lambda function. Click the OK button.
Click Method Request.
Click the pen icon in Authorization.
Select Wildrydes_Admin under Cognito user pool authorizers and click the check mark.

Click the Actions button.
Click the Create Method link.
Select GET from the drop-down list and click the check mark.
Check Use Lambda Proxy integration.
Select the Region you're using from Lambda Region.
Enter GetAllPosts as Lambda Function.
Click the Save button. You will be prompted to give permission to API Gateway to invoke your Lambda function. Click the OK button.
Click the Actions button.
Click Deploy API link.
Select prod from the Deployment stage drop-down list.
Click the Deploy button.
Copy the Wild Rydes static website files from lab3/ into your work directory.

On Linux and macOS:

cp -R lab3/* work

On Windows:

xcopy /E /Y lab3 work

Update the contents of the Amazon S3 bucket created in the pre-lab with the new files:
```
aws s3 sync work/ s3://INSERT_BUCKET_NAME_HERE
```
Go to the admin section of the web site, log in if prompted, and click New Post.
Add a new post by filling out Title and Body and click Post.

Verify that you're redirected to the blog page and that you see the post you just created.

LAB 3 COMPLETE

In this lab you've:

Created an Amazon DynamoDB table for blog posts.
Added pages and endpoints in Amazon API Gateway to show blog posts to visitors and to allow administrator users to create blog posts.

ckarande / aws-serverless-website-workshop Goto Github PK

aws-serverless-website-workshop's Introduction

Wild Rydes Serverless Web Application Workshop

Introduction

Overview of Workshop Labs

Requirements

Labs

Pre-lab: Static Website Hosting

Lab 1: Beta Sign-up Mailing List

Lab 2: Administrative Interface

Lab 3: Product Update Blog

Tips

Pre-lab: Static Website Hosting

Lab 1: Beta Sign-up Mailing List

Lab 2: Administrative Interface

Lab 3: Product Update Blog

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent