Setting up static assets

Setting up an S3 bucket and CloudFront distribution to host static media isn't complicated and, in theory, we could add this to the Resources section of our serverless.yml file. The ability of Serverless to manage so many resources via CloudFormation is a slippery slope, since setting up systems can quickly become an exercise in learning and debugging CloudFormation. Another downside of a growing Resources section in the serverless.yml file is that deployments will take longer and longer. It's possible to only deploy application code during development, which results in single-digit second deployments; but when some system resource is updated, including environment variables, the entire CloudFormation stack needs to updated.

Rather than creating the S3 bucket and CloudFront distribution via serverless.yml, we can use a separate CloudFormation template designed just for this purpose. Another reason for splitting this out into a separate step is that this layer rarely changes. Once the CloudFront distribution is set up, there is a good chance you won't need to change anything for a very long time, if ever.

The following repository contains a CloudFormation template, a helper script, and documentation to set up a single - page web application on AWS:

https://github.com/verypossible/cloudfront-single-page-app

Again, you may read the details of this stack creation in the GitHub repository. After we choose one this stack with the necessary variables, we will end up with the following:

• An S3 bucket, which will host all of our static content
• A CloudFront distribution, which will pull and cache content from S3
• A free TLS certificate for *.cupperslog.com
• A Route53 record, which does the following:
  • Points https://cupperslog.com to the CloudFront distribution
  • Redirects any http:// traffic to https://
  • Caches static assets for 10 minutes:

brianz@gold(master=)$ AWS_DEFAULT_REGION=us-east-1 ./manage-stack.sh create --domain cupperslog.com --zone-id ZNGYF5FXIUL0Z --name cupperslog 
{ 
    "StackId": "arn:aws:cloudformation:us-east-1:875406499000:stack/cupperslog/e7f15a50-b03c-11e7-97b0-5001ff34b4a6" 
} 

CloudFront distributions can take from several minutes to a couple of hours to be created, which is another good reason that we're doing this separate from our application code and database. Once finished, all that is required is uploading static assets to the S3 bucket that CloudFormation created for you. Ensure that the access control policy is set to public-read since this is a publicly accessible website. Uploading is accomplished via many tools, the AWS CLI tool being one of them:

brianz@gold$ aws s3 cp \
   build/ \
   --acl public-read \
   --recurisve \
   s3://cupperslog-s3bucketforstaticcontent-nswgo5ega4r1

For our example application, the frontend will consist of a simple React application that allows users to do the following:

• List coffee cupping sessions
• View coffee cupping session details
• Create a new coffee cupping session
• Delete a coffee cupping session

It should be clear that there is no authentication and no notion of a user in these examples. This application was built to demonstrate a serverless pattern, and even critical details such as user authentication and authorization wouldn't fit in this single chapter.