Deliver Your App’s Dynamic Content Using Amazon CloudFront – Getting Started Template

Many websites and web applications serve a combination of static content—HTML, CSS, JPG, or other files that all end viewers can see—and dynamic content, which is personalized for each end viewer. Fortunately, Amazon CloudFront can serve both types of content, to reduce latency, protect your architecture, and optimize costs. In this post, we demonstrate how to use CloudFront to deliver both static and dynamic content using a single distribution, for dynamic and static websites and web applications. You’ll learn how to implement this with an CloudFront distribution connected to a custom origin for dynamic content (in this case, an Amazon EC2 web server instance) and an Amazon S3 bucket for static content.

To set up an origin that delivers dynamic content, you first create an Amazon S3 bucket, and then assign a policy that allows CloudFront to access the data from Amazon S3. Next, you create a webserver on an Amazon EC2 instance that includes your dynamic content, and create an Amazon IAM Role that the Amazon EC2 instance will assume. Finally, you create a CloudFront web distribution with two origins, to securely deliver the dynamic and static content to the users from the two origins.

In this AWS CloudFormation deployment template, we’ve simplified this setup process so you only need to specify two things: an S3 bucket name and an Amazon EC2KeyPair name to be associated with Amazon EC2 instance that is created as a part of the template. And then you’re done!

Using this template as a starting point, you can also easily build your own customized workflow.

1.      Choose your parameters – Choose Next, and then choose options on the Parameters page. When you deploy the template, specify the following parameters:

a) Stack Name – Enter a name for the deployment stack (try to give some randomness). All of the resources (including the S3 bucket) that are created will have this name as a prefix. Note: don’t use any uppercase letters in your stack name as S3 doesn’t allow uppercase letters under its naming conventions.

b) EC2KeyName – Select an existing EC2KeyPair name to associate with the Amazon EC2 instance that will be created using the template. If you don’t have existing key pair, follow the steps in the Amazon Elastic Compute Cloud User Guide to create a new EC2Key pair.

c) Ec2vpcid – Select the VPC where you want to create an instance to serve the sample dynamic website.

2.      Step through the setup – Choose Next, then Next again. When you’re prompted to acknowledge that you’re creating IAM resources with custom names, choose Yes. At the bottom of the page, click Create Change Set then Create Change Set Again. Finally, to launch the CloudFormation stack, choose Execute. It can take several minutes to finish running.

The stack creates the following:

• An Amazon S3 bucket to store and serve static content only through CloudFront
• An Amazon EC2 instance with sample dynamic content
• An AWS IAM Role that will be assumed by an EC2 instance created earlier
• An Amazon CloudFront distribution with two origins, to serve static and dynamic content from S3 and EC2 respectively

3.      Test the website – To test the dynamic content delivery, do the following:

a)      Open the newly created S3 bucket under the Resources tab and create a new folder named static. Then upload an example *.png file image to the folder and name it mypic.png.

b)      Find the website URL by going to the CloudFormation Stack that you just created. Go to the Outputs tab within the stack page. There you can see the website URLs for static and dynamic content displayed, as shown in the following screenshot:

c)      Under Key, you can see the value MainWebPage. This row shows the URL for the web server that includes dynamic content. You can use this website as a starting point to implement your own web page. The row for DynamicContentCacheTest shows how CloudFront caches dynamic content. Finally, the row for StaticContent shows the URL to the CloudFront distribution with the static content on the S3 origin.

That’s it!  And now, by following a similar process, you can create your own customized solution to deliver static and dynamic content through CloudFront.

		Blog: Using AWS Client VPN to securely access AWS and on-premises resources
		Learn about AWS VPN services
		Watch re:Invent 2019: Connectivity to AWS and hybrid AWS network architectures