Edge Caching With Play 2, Heroku, and CloudFront

  3. Confirm the app name and select `3` for an empty project: ```
jamesw@T420s:~/Desktop$ play new play2-cloudfront
       _            _ 
 _ __ | | __ _ _  _| |
| '_ \| |/ _' | || |_|
|  __/|_|\____|\__ (_)
|_|            |__/ 


play! 2.0.3, http://www.playframework.org


The new application will be created in /home/jamesw/Desktop/play2-cloudfront


What is the application name? 
> play2-cloudfront


Which template do you want to use for this new application? 


  1 - Create a simple Scala application
  2 - Create a simple Java application
  3 - Create an empty project


> 3


OK, application play2-cloudfront is created.


Have fun!

import sbt._
import Keys._
import PlayProject._

object ApplicationBuild extends Build {

    val appName         = "play2-cloudfront"
    val appVersion      = "1.0-SNAPSHOT"

    val appDependencies = Seq(
      "com.jquery" % "jquery" % "1.7.2-1"
    )

    val main = PlayProject(appName, appVersion, appDependencies, mainLang = JAVA).settings(
      resolvers += "webjars" at "http://webjars.github.com/m2"
    )

}

play idea

play eclipsify

play ~run

package controllers

import play.api.mvc._
import play.api.Play
import play.api.Play.current
import org.joda.time.format.{DateTimeFormat, DateTimeFormatter}
import org.joda.time.DateTimeZone
import scala.Some


object RemoteAssets extends Controller {

  private val timeZoneCode = "GMT"

  private val df: DateTimeFormatter =
    DateTimeFormat.forPattern("EEE, dd MMM yyyy HH:mm:ss '"+timeZoneCode+"'").withLocale(java.util.Locale.ENGLISH).withZone(DateTimeZone.forID(timeZoneCode))

  type ResultWithHeaders = Result { def withHeaders(headers: (String, String)*): Result }

  def getAsset(path: String, file: String): Action[AnyContent] = Action { request =>
    val action = Assets.at(path, file)
    val result = action.apply(request)
    val resultWithHeaders = result.asInstanceOf[ResultWithHeaders]
    resultWithHeaders.withHeaders(DATE -> df.print({new java.util.Date}.getTime))
  }

  def getUrl(file: String) = {
    Play.configuration.getString("contenturl") match {
      case Some(contentUrl) => contentUrl + controllers.routes.RemoteAssets.getAsset(file).url
      case None => controllers.routes.RemoteAssets.getAsset(file)
    }
  }

}

contenturl=${?CONTENT_URL}

$ ->
  $("img").fadeIn()

body {
    background-color: #ddddff;
}

    <img src='@RemoteAssets.getUrl("images/favicon.png")' style="display: none;" />

package controllers;

import play.mvc.Controller;
import play.mvc.Result;

import views.html.index;

public class Application extends Controller {

  public static Result index() {
    return ok(index.render());
  }

}

# Home page
GET     /                           controllers.Application.index()

# Map static resources from the /public folder to the /assets URL path
GET     /assets/*file               controllers.RemoteAssets.getAsset(path="/public", file)

    
    If this is your first time using the Heroku Toolbelt then you will be led through the steps to associate an SSH key with your Heroku account. This SSH key will be used to authenticate your uploads via Git.</li> 
    
      * From the command line in your `play2-cloudfront` directory, create a new Git repository, add your files to it, and commit them: ```bash
git init
git add app conf project public
git commit -m init

        
        This will create a new application with corresponding HTTP and Git endpoints, like:
        
        ```bash
Creating peaceful-retreat-3158... done, stack is cedar
http://peaceful-retreat-3158.herokuapp.com/ | git@heroku.com:peaceful-retreat-3158.git
Git remote heroku added

        
        This will push the `master` branch of your Git repository to the Git remote named `heroku` which in my case points to the `git@heroku.com:peaceful-retreat-3158.git` URL. When Heroku receives the files it will run the project build (SBT for Play 2 projects), then deploy and run the application. When the application is running you can access it in your browser:
        
        ```bash
heroku open
```</ol> 
    
    This time all five requests go to Heroku:
    
    ![Local HTTP Requests][13]
    
    The requests take quite a bit longer than locally, in-part because the bits have a much larger distance to travel. All of the requests except the index page (because it's dynamic) can be served from a CDN. Now lets setup CloudFront to serve the static assets.
    
    ## Serve Static Assets with CloudFront
    
    CloudFront has a very simple way to load static assets into it's CDN. When a request comes into CloudFront, if the asset is not on the CDN or has expired, then CloudFront can get the asset from an "origin server". The application you just deployed on Heroku will now be the origin server for the static assets. To setup a new CloudFront "Distribution":
    
      1. [Signup for a AWS Account][14]
  
        Note: CloudFront does not have a free tier. So following these instructions will [cost you a tiny bit][15].
      2. Open the [CloudFront Management Console][16]
      3. Select `Create Distribution`
      4. Leave `Download` selected as the `delivery method` and select `Continue`
      5. In the `Origin Domain Name` field enter the domain name for your application on Heroku. In my case it is: `peaceful-retreat-3158.herokuapp.com`
      6. Keep the other default values as-is and select `Continue` 
        ![CloudFront Setup][17]</li> 
        
          * Do the same for the next two steps (keep the defaults)
          * Select `Create Distribution`</ol> 
        
        It will now take about ten minutes for AWS to create the CloudFront distribution. You can monitor the status in the AWS Console. While you wait, take note of the domain name provided for your distribution. Mine is: `d7471vfo50fqt.cloudfront.net`
        
        You can test the status of distribution by making a request for the `favicon.png` file. In my case the full URL is: <http://d7471vfo50fqt.cloudfront.net/assets/images/favicon.png>
        
        The first time that request goes through, CloudFront will make a request back to the app on Heroku and then load the asset into the CDN. If you examine the HTTP response headers on that request you will see:
        
        ```bash
X-Cache: Miss from cloudfront

        
        That indicates that the resource was served from the CDN and there was no need to go back to the origin server.
        
        Now that the static assets are loadable via CloudFront lets tell the app on Heroku and the `RemoteAssets` controller to point to them. Just set the `CONTENT_URL` environment variable on your application by running the following from the command line (make sure you replace the URL value with the one for the distribution you just created):
        
        ```bash
heroku config:add CONTENT_URL="http://d7471vfo50fqt.cloudfront.net"

        
        You should now see all four static asset requests going to CloudFront:
        
        ![Heroku and CloudFront - Miss][18]
        
        But as you can see they assets didn't load very quickly because the first request is a `Miss from cloudfront`. Reload the page (clear your cache to avoid 304s) and you should see much faster responses:
        
        ![Heroku and CloudFront - Hit][19]
        
        And now your static assets are being edge cached!
        
        ## Learn More
        
        Using a CDN is step one of significantly speeding up your web applications but there is certainly more that you can do. By default Play sets the expiration time of static assets to 1 hour (via the `Cache-Control` response header):
        
        ```bash
Cache-Control: max-age=3600