Forum

Thread tagged as: Problem, Configuration, Runway

Moving resources to Amazon S3 / Cloudfront CDN

I'm trying to move an existing Runway site's resources folder to Amazon S3 / Cloudfront CDN in order to serve the images from there and have followed but the documentation here: https://docs.grabaperch.com/runway/cloud-storage/amazon/

I seem to be struggling through similar problems to Sawan here: https://forum.grabaperch.com/forum/02-27-2016-moving-resources-folder-to-s3

I copied the contents of the existing resources folder up to the S3 bucket and they're accessible from there as expected - https://d11q7g6vqo5ah4.cloudfront.net/bursitis-knee-crop-w1920.jpg - but Runway is still serving up the local versions (existing and newly uploaded images).

Any idea how to fix this?

Do I need to change the Path configuration (PERCH_RESPATH / PERCH_RESFILEPATH) in config.php? Are files stored locally and then mirrored across to S3 when uploaded? (Didn't seem to happen) How is this meant to work?

Do I need to change the resourceBucket column in the perch2resources table?

Any help much appreciated!

SUMMARY INFORMATION

Perch Runway: 2.8.34, PHP: 5.4.45, MySQL: mysqlnd 5.0.10 - 20111026 - $Id: c85105d7c6f7d70d609bb4c000257868a40840ab $, with PDO
Server OS: Linux, cgi-fcgi
Installed apps: content (2.8.34), assets (2.8.34), categories (2.8.34), collection_3 (2.8.34), perch_forms (1.8.3)
App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_forms', );
PERCH_LOGINPATH: /perch
PERCH_PATH: /home/managebackpain/public_html/dev/perch
PERCH_CORE: /home/managebackpain/public_html/dev/perch/core
PERCH_RESFILEPATH: /home/managebackpain/public_html/dev/perch/resources
Image manipulation: GD
PHP limits: Max upload 32M, Max POST 32M, Memory: 512M, Total max file upload: 32M
F1: 6a33f95eca3667f9e0c39bf5ca2980fe
Resource folder writeable: Yes
DOCUMENT_ROOT: /home/managebackpain/public_html/dev
HTTP_HOST: dev.managebackpain.com
REQUEST_URI: /perch/core/settings/diagnostics/
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
Adam Green

Adam Green 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Moving existing resources from one bucket to another isn't something the product has support for at the moment, but it's planned for a future revision.

What steps have you followed to update Runway to point to the new resources so far?

All images are currently in the default bucket. I have configured the perch_s3 app by adding the access key and secret id to runway.php and also added a resource bucket to buckets.php as per the instructions:

<?php
    return [
'images' => [
      'type'      => 'amazon_s3',
      'web_path'  => 'https://d11q7g6vqo5ah4.cloudfront.net',
      'file_path' => 'managebackpain-assets',
]
];

Is there no way to update the image paths to point to the cloudfront urls? I.e. Path to the resources folder in config.php

Maybe some htaccess rewrite rules would do the trick?

Although, where would newly uploaded images end up?

Do I need to update my templates and specify the new resource bucket in the image template tags? And then resave every page? 200+ articles are in a collection, so no republish feature :(

Could a little more detail be added to the docs on this?

I need to move the images to a CDN to improve performance and reduce bandwidth on the server. Is there another CDN service that will work better for an existing Runway site?

We built the site on Runway so that it could scale, and in 1 year it has grown massively in terms of traffic (and ad revenue), which is fantastic... but now requires further optimisation...

Many thanks again!

Drew McLellan

Drew McLellan 2638 points
Perch Support

You should be able to point PERCH_RESPATH to your CloudFront URL to use the assets you've manually moved.

At the same time you should make sure that new assets are going to the new bucket by actually using the bucket in your templates. Adding a definition of the bucket in your buckets file does nothing if you don't actually use the bucket.

Thanks Drew, that worked! Existing images are now being served from the cloudfront cdn.

I had no idea AWS would be such a pain to set up; I finally got images to upload to S3 from Perch but they wouldn't display in the browser, until I figured out that I needed to attach a bucket policy under permissions.

Here's my buckets.php:

<?    return [
        'cdn-images' => [
                 'type'      => 'amazon_s3',
                 'web_path'  => 'https://d11q7g6vqo5ah4.cloudfront.net',
                 'file_path' => 'managebackpain-assets',
         ],
    ];

and I'm uploading images using the following template tag:

<img src="<perch:content type="image" id="cdnimage" bucket="cdn-images" width="960" label="Add image" />" alt="test image">

I can't however insert any existing images from the assets panel (default bucket) into the template using the new cdn-images bucket, only way is to reupload the originals which have to be dug out of my local resources folder. Is there a better way to make this work?

How might I direct files uploaded to the cdn-images bucket to a subdirectory of the S3 resource bucket? Currently they're just uploading into the root folder.

Also there are no expiration headers set for any images served from the cloudfront cdn, and I understand this means browsers won't cache these files, which kinda sucks! Seems I can't bulk modify these headers in the aws console either, though I might be able to using aws command line interface... if I could figure out how to install it.

Anyway, after a lot of work, I'm really struggling to see the benefit! Is there an easier route to setting up a CDN to with Perch Runway? Any alternatives to S3 / Cloudfront?

Thanks again for your help.

Drew McLellan

Drew McLellan 2638 points
Perch Support

I'm not sure S3 supports subfolders, does it? If it does, you should be able to add them to the file path.

I'm not the best person to give advice on configuring S3 or CloudFront, they're not my products so I don't have the best info.