AWS serverless web hosting + contact form

This project is all about an AWS cloudformation template that sets up all the necessary infrastructure for serverless web hosting on AWS, including a contact form. There is also a github action to setup continuous delivery. The stack deploys the following:

• S3 bucket
• Cloudfront distribution
• SSL/TLS certificate
• Route53 record
• AGI gateway, lambda, sns topic for contact form
• Edge lamda for better SEO
• IAM user with permissions to deploy from github actions

The website this stack will deploy is based on Start Bootstrap - Freelancer The cloudformation template uses the deploy-to-s3 app from the serverless application repository.

Prerequisites

• AWS account
• A hosted zone in Route53 - GitHub account
• Setup reCaptcha v2 here: https://www.google.com/recaptcha/admin. Note both the client and server side site keys. See the recaptcha documentation for more details.
• AWS sam cli
• Setup a named profile for sam cli. Let's assume your named profile is called sidney.
• Node.js
• Python 3.6

Deploying to AWS

There are 2 resources that need to be deployed in us-east-1 region; 1) SSL/TLS Certificate, and 2) edge lambda for SEO. Everything else can be deployed in your region of choice. Therefore, if you want to deploy to any AWS region other than us-east-1, you need to deploy 2 stacks; one stack for the resources that need to be in us-east-1 and another stack in your chosen region. If your region of choice is us-east-1 you need only deploy one stack, and that's a wee bit simpler.

us-east-1 region only (single stack)

1. run ./prepare.sh to pull in the vendor code for the website
2. run export AWS_PROFILE=sidney
3. run sam build
4. run sam deploy --guided --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND

Leave the EdgeLambdaArn and SSLCertificateArn blank.

If your region of choice is not us-east-1 (two stacks)

Deploy resouces to us-east-1

1. run export AWS_PROFILE=sidney
2. run sam build -t template-east.yaml
3. run sam deploy -t template-east.yaml --guided
4. Note the output values of SSLCertificateArn and EdgeLambdaArn
5. run sam build --use-container
6. run sam deploy --guided --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND, using the output values of the us-east-1 stack as parameters for this stack.

GitHub actions continuous delivery

Before you setup github actions, go grab the index.html from your S3 bucket and check it into git. During the deploy of the cloudformation template, the API gateway URL and google reCaptcha client key values were put into that file.

Look at the output of the cloudformation stack to find the IAMUser. Then setup AWS programatic credentials for that user. AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY, should be set as encrypted secrets on your github repo.

Look at the output of the cloudformation stack to find the CloudFrontDistributionId and S3Bucket. Edit .github/workflows/main.yml with those values. Region too.

Running the site locally

1. run cd web
2. run npm install
3. run gulp
4. run gulp dev

Gulp Tasks

• gulp the default task that builds everything
• gulp dev browserSync opens the project in your default browser and live reloads when changes are made
• gulp css compiles SCSS files into CSS and minifies the compiled CSS
• gulp js minifies the themes JS file
• gulp vendor copies dependencies from node_modules to the vendor directory

NOTE: Delete the web/node_modules directory or the deploy will fail due to too much crap.

Deleting the stack

When you delete the stack it will probably fail to delete. Don't worry. You need to do two things after the stack fails to delete:

1. Empty the S3 bucket
2. Wait for the edge lambda to undeploy now that your cloudfront distribution had been deleted. Maybe a couple of hours.

After that, try to delete the stack again. It should delete just fine.