Skip to content

This repo can be used to deploy a simple singular landing page from AWS that allows customers to enter their email and have promotional content emailed to them. This was built for testing and learning purposes and would need some updates and changes to be production-ready.

Notifications You must be signed in to change notification settings

searles9/Get_Promotional_Content_AWS_Web_App

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 

Repository files navigation

Purpose:

This repo can be used to deploy a singular simple landing page that allows customers to enter their email and have promotional content emailed to them. This was built for testing and learning purposes and would need some updates and changes to be production-ready.

EX: Enter your email to get a PDF guide with steps on how to complete xyz

image


App architecture

  • User goes to a website hosted in S3
  • User enters email into the text field and hits submit
  • The submit button contacts an AWS API
  • API triggers a lambda function
  • Lambda function sends the S3 object URL to the user's email via SES

Steps to deploy the site:

Step 1: Add your email to SES

The app processes the website requests with Lambda and uses SES to send the email. If you have a new AWS account your account is likely within the SES sandbox. Some of the main limitations of the SES sandbox are:

  • You can only send mail to verified email addresses and domains
  • You can only send mail from verified email addresses and domains

You can submit a request to move your account out of the SES sandbox however this documentation assumes you are still in the SES sandbox. To get started you will need to verify an address within SES:

  1. Navigate to SES in the AWS Console
  2. Click Email Addresses
  3. Click Verify a New Email Address
  4. Enter the email address you would like to use as the sending address
  5. Click Verify This Email Address
  6. Check your email for a verification email
  7. Click the link in the email to confirm your email address

Step 2: Deploy the infrastructure via CloudFormation

The "Resources.YAML" (cfn\Resources.yaml) file deploys the following resources:

  • An S3 bucket that is enabled for website hosting
  • An S3 bucket with public read access that you will put the promotional content file into
  • An HTTP API (including a route, stage, Lambda integration settings and deployment)
  • A Lambda function that processes the requests and sends the email
  • A Lambda execution role with SES and logging permissions
  1. Navigate to CloudFormation in the AWS console
  2. Click create stack and upload the "Resources.YAML" template image
  3. Enter a stack name and add the parameter values image
  • HttpApiName: This is the name that will be assigned to the HTTP API
  • PromotionalDocumentName: Enter the name of your promotional document here. If your file is "Tips_for_securing_your_IT_enviorment.pdf" enter that filename here.
  • ReplyEmail: This value is the sending email address. If you plan to send emails from "test@gmail.com" enter that here. If you completed step 1 you would enter that email here.
  1. Click next, acknowledge that CloudFormation will create IAM resources and hit deploy
  2. Wait till the stack deploys and then take note of the output values: image

Step 3: Upload the promotional content document to S3

  1. Get the "PromotionalContentBucketName" value from the CloudFormation output tab
  2. Upload the promotional document to the S3 bucket:
    AWS CLI example:
aws s3 cp C:\Users\User\Documents\projectfolder\FileName.txt s3://BUCKETNAME/FileName.txt

image

Step 4: Update the index.html file

When the user submits their email the website contacts the API that was created with the CloudFormation. Before you upload the index.html website file to S3 you need need to add the API gateway invoke URL to the code.

  1. Grab the "apiGatewayInvokeURL" value from the CloudFormation output tab image
  2. Add the URL to the javascript script in the index.html file: image

Step 5: Upload the index.html file to S3

The CloudFormation template created an S3 bucket enabled for website hosting. You need to upload the updated index.html file to that bucket.

  1. Get the "WebsiteBucketName" value from the CloudFormation output tab
  2. Upload the index.html document to the S3 bucket:
aws s3 cp C:\Users\User\Documents\projectfolder\index.html s3://BUCKETNAME/index.html

image

Step 6: Test the web app

With the infrastructure and files in place, you can now test the site.

  1. Click on the link for the "WebsiteURL" CloudFormation output image
  2. Enter an email and hit submit (If your account is still in the SES sandbox enter the email from step 1) image
  3. Verify that you received the email: image

Clean up:

  1. Empty the 2 S3 buckets:
aws s3 rm s3://BUCKETNAME --recursive
  1. Delete the CloudFormation stack image

Room for improovement:

  • The bucket that contains the promotional content is publicly available. To prevent people from sharing the link you could make the bucket private and have Lambda generate S3 pre-signed URL's
  • There is no record of what emails are entered. You could add logging or potentially send the submitted addresses to a database.

About

This repo can be used to deploy a simple singular landing page from AWS that allows customers to enter their email and have promotional content emailed to them. This was built for testing and learning purposes and would need some updates and changes to be production-ready.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages