Given an existing server on Elastic Beanstalk, this tutorial describes how to
connect it to Cloudfront, including using Route53 and managing CORS.
This post assumes that you already have an environment in Elastic Beanstalk.
Step 1: Application Load Balancer
Follow the [Application Load Balancer] documentation to check if a load balancer
exists; if not, then add one. If this is a server receiving requests from a web
frontend, then you should have listeners at 443 HTTPS and 80 HTTP, wit han SSL
certificate connected to the HTTPS port.
Step 2: Create a CloudFront distribution
Create a new CloudFront distribution. The most important step here is to select
the appropriate origin under – Elastic Load Balancers – for Origin Domain
Name.
- If you have multiple environments, such as staging and production, I’m
actually not sure how to distinguish the two (I used the creation date of
the load balancer by searching for “load balancers” and going to EC2 in the
search box above). Find some means to select the appropriate one as the
Origin Domain Name.
- Give a meaningful Origin ID. You should be able to use any string here,
pick one that you can remember.
- Select Redirect HTTP to HTTPS.
- Pick Allowed HTTP Methods based on what your app is doing; if you want to
be safe or aren’t sure, select the longest list here. This option is simply
what’s allowed, what’s actually cached ony includes GET, HEAD, and
optionally OPTIONS (see Cached HTTP Methods section).
- For Cache Policy, this is totally application dependent; you can pick a
default for now and change it later, but this is application-specific. If
you simply want to test things first, I suggest making a custom cache policy
with all cache durations set to 0.
- For Origin Request Policy, to get CORS to work (at least in the case of my
application), create a new policy with Whitelist:
Origin
,
Access-Control-Request-Method
, Access-Control-Request-Headers
. Without
this, you may see CORS errors from a web frontend. These will allow
preflight CORS requests to properly propagate to your server through
Cloudfront.
Anything can be changed later; you can save here or read the next step for
setting up a custom domain.
Step 3 (optional): Repoint your domain to CloudFront
If you have a custom domain name like api.foo.com
, then you’ll want to set it
in Alternate Domain Names as well as setting up the SSL certificate. If this
is already in Route 53, clicking Request or Import a Certificate with ACM
should be enough.
If you already aliased api.foo.com
to your Elastic Beanstalk endpoint,
then, after the distribution is created, you’ll need to create a new alias
record
pointing to the CloudFront endpoint and removing the old api.foo.com
record in
Route53 (presumably this is a CNAME or A record).
Conclusion
At this point, you should have a CloudFront distribution pointing to the load
balancer on top of your Elastic Beanstalk environment. If you followed step 3,
api.foo.com
will point to your CloudFront distribution, otherwise you can use
the *.cloudfront.net
domain shown under “CloudFront” (also connectable via
Route53). Happy caching!
Read more