UI Performance Plugin

Content Delivery Network support for ui-performance plugin

Details

  • Type: Improvement Improvement
  • Status: Open Open
  • Priority: Major Major
  • Resolution: Unresolved
  • Affects Version/s: Grails-UI-Performance 1.1.1
  • Fix Version/s: None
  • Component/s: None
  • Labels:
    None
  • Patch Submitted:
    Yes
  • Testcase included:
    yes

Description

The following patch enables ui-Performance to upload assets to a content delivery network and provides integration with Amazon s3 and cloudFront. It is provided courtesy of DMC Digital ( http://www.dmcdigital.co.uk/ )

Enabling Content Delivery Network

Add the following lines to your configuration:

uiperformance.cdn.enabled = true
uiperformance.cdn.location = 'http:////static.mywebsite.com'

This will rewrite all content links to the form ${ uiperformance.cdn.location }/myimage_v123.gif.
Note: grails 1.3.3 seems to render http://blah.net as http:/blah.net, so in our config, we use http:////

Deploying to Amazon s3

Amazon Simple Storage Service ( s3 ) provides a simple web services interface that can be used to store and retrieve any amount of data, at any time, from anywhere on the web.

You can sign up for s3 on http://aws.amazon.com/s3/

The following patch includes a script to deploy versioned content to Amazon s3. To use, simply call:

grails deploy-to-cdn

This will create a bucket on Amazon s3 and upload the relevant files generated by ui-Performance under bucketname/version/[js/images/css]/myjsfile.js. Under the hood, it uses the excellent jets3t library ( http://jets3t.s3.amazonaws.com/downloads.html ) to manage communication between your computer and Amazon. This dependency is specified in the plugin's build config file.

You can then use a tool like s3 organizer ( http://www.s3fox.net/ ) to browse and manage your bucket deployments and information.

To enable, add the following lines to your configuration. You can use the s3Domain property to change your 

uiperformance.cdn.s3Enabled = true
uiperformance.cdn.s3Domain = "s3.amazonaws.com"
uiperformance.cdn.s3AccessKey = "01234567890ABCDEFGHI"
uiperformance.cdn.s3SecretKey = "YOUR_KEY/GOES/HERE/ABCDEFGHIJ_1234567890"
uiperformance.cdn.s3BucketName = "static.bucketname.mywebsite.com"

If a s3 configuration is specified, it will be used over cdn configuration.

Integration with Amazon CloudFront

Amazon CloudFront is a web service for content delivery. It deploys the contents of your s3 buckets to edge locations around the world, providing much better performance for the delivery of static resources.

You can sign up for cloudfront on http://aws.amazon.com/cloudfront/

To use, you need to first map a cname record in your DNS service for your domain. You can then use this alias to retrieve the assets you have uploaded.

The deploy-to-cdn script will create a distribution for the cname value set in your application configuration file. If a record already exists, it will just display the domain name you need to access the files.

The domain name will be of the form j4kwm3msjdd.cloudfront.net - map this to the cname record you wish to use in your DNS. For local testing, you might want to change your hosts file.

Your static resources will be mapped to http://${ uiperformance.cdn.cloudFrontCName }/${ version } . It will use the s3 bucket and credentials specified under s3AccessKey and s3BucketName

To enable, add the following lines to your configuration:

uiperformance.cdn.cloudFrontEnabled = true
uiperformance.cdn.cloudFrontCName = "static.mywebsite.com"

If a Cloudfront configuration is specified, it will be used over s3 configuration.

Activity

Ascending order - Click to sort in descending order
Hide
Permalink
Jon Chase added a comment -

This is fantastic! Integrating S3/CF into the UI plugin has been something I've been pondering doing for a while. Thanks for rewarding my laziness.

Show
Jon Chase added a comment - This is fantastic! Integrating S3/CF into the UI plugin has been something I've been pondering doing for a while. Thanks for rewarding my laziness.
Hide
Permalink
Ryan Bales added a comment -

Great patch but it doesn't appear to add "Expires" or "Cache-Control" to the resources...

Show
Ryan Bales added a comment - Great patch but it doesn't appear to add "Expires" or "Cache-Control" to the resources...
Hide
Permalink
Burt Beckwith added a comment -

I'm seeing the bucket name as the context, and not the first part of the domain name as the code expects, e.g.

http://s3.amazonaws.com/<bucketname>/<version>/css/foo__v<version>.css

instead of

http://<bucketname>.s3.amazonaws.com/<version>/<appname>/css/foo__v<version>.css

Is this something that's changed since the issue was submitting, or is it configurable at S3?

Show
Burt Beckwith added a comment - I'm seeing the bucket name as the context, and not the first part of the domain name as the code expects, e.g. http://s3.amazonaws.com/<bucketname>/<version>/css/foo__v<version>.css instead of http://<bucketname>.s3.amazonaws.com/<version>/<appname>/css/foo__v<version>.css Is this something that's changed since the issue was submitting, or is it configurable at S3?
Hide
Permalink
Tomas Lin added a comment -

Hi Burt,

Both formats seem to be equivalent. The first one /bucketname/ is what they call a path-style access format, while the second one is called virtual-host style access format.

http://docs.amazonwebservices.com/AmazonS3/latest/dev/index.html?VirtualHosting.html

However, the documentation mentions that the path style format will lead to a 301 redirect if you have your buckets placed in Europe or Asia.

I think we used the bucketname.s3.amazonws.com format because this is what you get when you copy the url from the s3fox plugin. https://addons.mozilla.org/en-US/firefox/addon/3247/

Hope this makes sense.

Show
Tomas Lin added a comment - Hi Burt, Both formats seem to be equivalent. The first one /bucketname/ is what they call a path-style access format, while the second one is called virtual-host style access format. http://docs.amazonwebservices.com/AmazonS3/latest/dev/index.html?VirtualHosting.html However, the documentation mentions that the path style format will lead to a 301 redirect if you have your buckets placed in Europe or Asia. I think we used the bucketname.s3.amazonws.com format because this is what you get when you copy the url from the s3fox plugin. https://addons.mozilla.org/en-US/firefox/addon/3247/ Hope this makes sense.
Hide
Permalink
Ankur Chauhan added a comment - - edited

Attempting to use this patch but i think i am doing something wrong.

my config.groovy looks like

cdn {
        enabled = true
        location = 'http:////static.example.com'
        s3Enabled = true

        s3Domain = "s3.amazonaws.com"
        s3AccessKey = 'abcdef'
        s3SecretKey = 'pppp23234234234'
        s3BucketName = "prod-static-assets"

        cloudFrontEnabled = true
        cloudFrontCName = "static.example.com"
    }

now when i execute grails deploy-to-cdn the files are correctly uploaded, but upon doing
grails prod war and deploying this to the server all the urls to these assets have the wrong versions.

what am i doing wrong? more specifically what are the steps to use the patched plugin?

Show
Ankur Chauhan added a comment - - edited Attempting to use this patch but i think i am doing something wrong. my config.groovy looks like 
cdn {
        enabled = true
        location = 'http:////static.example.com'
        s3Enabled = true

        s3Domain = "s3.amazonaws.com"
        s3AccessKey = 'abcdef'
        s3SecretKey = 'pppp23234234234'
        s3BucketName = "prod-static-assets"

        cloudFrontEnabled = true
        cloudFrontCName = "static.example.com"
    }
now when i execute grails deploy-to-cdn the files are correctly uploaded, but upon doing grails prod war and deploying this to the server all the urls to these assets have the wrong versions. what am i doing wrong? more specifically what are the steps to use the patched plugin?

People

Vote (7)
Watch (8)

Dates

  • Created:
    Updated:
Atlassian JIRA (v4.4.1#660-r161644) | Report a problem
Powered by a free Atlassian JIRA open source license for Grails project. Try JIRA - bug tracking software for your team.