/clientscripts over to Amazon S3/Cloudfront?

[RedWingFan]

Originally Posted by imported_silkroad

OK, I see, you are 301'ing your entire image directory :-)

That explains how you get the customavatars in the CDN. I searched the templates and the phases and could never find how to set a CDN URL for avatars (and a few other hard coded image paths).

At first I was editing the templates, but then when I wanted to try getting /clientscript over to the CDN, I discovered replacement variables. From that point on, I went in and changed my templates back to their original directories, then redirected the entire /images directory to CDN using the replacement variables. That also solved the issue with avatars. (My "recipe" is in that thread linked above, but I could repost it here. It was just a handful of entries in replacement variables.)

I have not attempted attachments, though, as we don't have a direct URL that we access them with. (They are stored in the filesystem, however.) I'm sure there's something in vB's code I could modify to retrieve images from the CDN, but since we're just doing this on a trial basis, I'm not that motivated yet.

Originally Posted by imported_silkroad

I don't understand why Jelsoft hard coded the customavatar domain as the forum domain and made it necessary to 301 those over to a CDN

I think I asked that very question on vb.com when I was looking for a way to change the avatar directory, and came up empty. And I think someone from vB's staff pointed me to the replacement variables which, at that point, I had no clue as to what they did, or how they worked. Had I known...

[imported_silkroad]

Default setup for custom avatars is in /customavatars ..... (if you don't change it in the CP) so you would have to either (1) move the user avatars over to the image directory and 301 everything in images or (2) 301 custom avatars, or (3) use RR and replace $post[avatarurl] with http://yourcdn.net/$post[avatarurl]

Anway, I'll read your post where you outlined how you did it....

We used RR for /clientscript when we moved to AWS Cloudfront, then we changed the StyleVars in the templates for the style images. I hand coded a new phrase $vbphase['cdn_image_bucket'] and put that in a few places.....

Guess I'll RR or 301 the custom avatars over to SimpleCDN and give it a go :-)

--------------- Added [DATE]1251153995[/DATE] at [TIME]1251153995[/TIME] ---------------

Note, for customavatars in postbit you can either use an RR or edit the template to change:

<img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" />

To

<img src="$vbphrase[image_bucket_url]/$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" />

Assuming you have your CDN URL in $vbphrase[image_bucket_url] .....

Cheers.

[tpearl5]

FYI, I managed to trim a couple more seconds off page loads by modifying this:
http://www.vbulletin.com/forum/showthread.php?t=306573

If you wanted to you could add a line in there to make the css file read off of a dynamic bucket simplecdn. This way you wouldn't have to upload a new css file every time you want to change something:

// HACK : START : CSS AS LINK
if ($vbulletin->options['storecssasfile']) {
		$cssfilename = 'http://cdnlink.com/clientscript/vbulletin_css/style-' . $adblock_is_evil . '-' . str_pad($styleid, 5, '0', STR_PAD_LEFT) . '.css';
        	$fullcsstext = '<link rel="stylesheet" type="text/css" href="'.$cssfilename.'" /><link rel="stylesheet" type="text/css" href="http://cdnlink.com/clientscript/vbulletin_important.css?v='.$vbulletin->options['simpleversion'].'">';
}
// HACK : END : CSS AS LINK

but then, like mentioned the WYSIWYG editer doesn't work correctly - I can't figure that one out.

[imported_silkroad]

Originally Posted by tpearl5

If you wanted to you could add a line in there to make the css file read off of a dynamic bucket simplecdn. This way you wouldn't have to upload a new css file every time you want to change something then, like mentioned the WYSIWYG editer doesn't work correctly - I can't figure that one out.

We pull the CSS files from SimpleCDN without any issues at all. The reason is that SimpleCDN has the concept of "Mirror Buckets" so if a file is requested from the CDN and does not exist in the CDN cache, it will get the missing file from the origin-server.

Because of the excellent ways to use SimpleCDN Mirror Bucket, we have moved completely off Amazon CloudFront/S3. You might find this post interesting (more details about Mirror Bucket):

On Demand Files for "Cache Hit" Misses for CF/S3 - Feature Request

[tpearl5]

Right - are you sure your WYSIWYG editors are working properly?

If you don't use $style[css] at all in headerinclude, css for the editors and vbulletin_important.css do not load. The code above partially corrects this, but for some reason my (and I believe other's) editors don't load a block of css when the main css is hosted on a CDN. I've tried serveral different things with no solution to getting the editor to load properly.

[imported_silkroad]

Yes, all everything is fine. We have been running in this configuration for nearly a week, no problems at all.

I did have to manually edit some of the Javascript and CSS files.

The way I did it was to simply look at the Apache2 log files and look for any "oddities" or 404 errors from the CDN and then track down the problem and fix it.

One of the "beauties" of Mirror Bucket is that you can see the 404 errors on your Apache server when it tries to grab a file that is missing from the CDN.

When I was debugging, I ran a tail -f on the Apache log file and used grep (egrep with regular expressions, actually) to fine tune the JavaScript paths in the templates and CSS files.

It works, absolutely, but it take a bit of analysis to track down all the hard coded paths in the vB templates, JS and CSS file includes.

Having said that, I think we might have to edit the CSS files manually if we make a change to a vB style, but this is not an issue for us, since we don't change the style CSS often.

--------------- Added [DATE]1251831991[/DATE] at [TIME]1251831991[/TIME] ---------------

As I recall, I used phpMyAdmin to edit the css field in the style table.

PS: I forgot to mention, I don't think we use a WYSIWYG editor, we just use the standard (Advanced and Quick Reply editors - the same editors here in this forum).

Maybe that explains it?

--------------- Added [DATE]1251832273[/DATE] at [TIME]1251832273[/TIME] ---------------

Ah! Sorry, We are not pulling this file from the CDN:

[01/Sep/2009:20:10:10 +0100] "GET /clientscript/vbulletin_important.css?v=374 HTTP/1.1" 200

Maybe that's the reason.... I think that is one of the few files I have not moved to the CDN

[tpearl5]

Originally Posted by imported_silkroad

PS: I forgot to mention, I don't think we use a WYSIWYG editor, we just use the standard (Advanced and Quick Reply editors - the same editors here in this forum).

Maybe that explains it?

Yeh, that would explain it - to be more specific the class "wysiwyg" doesn't load when the main css is not on the same server. Really strange. I can't track down where this class is coming from.

Originally Posted by imported_silkroad

Ah! Sorry, We are not pulling this file from the CDN:

[01/Sep/2009:20:10:10 +0100] "GET /clientscript/vbulletin_important.css?v=374 HTTP/1.1" 200

Maybe that's the reason.... I think that is one of the few files I have not moved to the CDN

that file doesn't contain the wysiwyg class, but it does have a couple others.

[imported_silkroad]

OK, I checked the logs again for you....

The only CSS file that is not pulled from the CDN (currently) is ... (interestingly enough!)


/clientscript/vbulletin_important.css

--------------- Added [DATE]1251832733[/DATE] at [TIME]1251832733[/TIME] ---------------

Originally Posted by tpearl5

Yeh, that would explain it - to be more specific the class "wysiwyg" doesn't load when the main css is not on the same server. Really strange. I can't track down where this class is coming from.

It can be found in the css field of the style table in the dB.

What we did was use the search function in phpMyAdmin to track down these guys.

Accidentally, this is the only file we did not manually edit or change a stylevar or use a RR, etc.

[imported_silkroad]

See attached.... screen shot ....

[tpearl5]

Right - the code above actually points the hard coded location of vbulletin_important.css to a different location as well.

However, "wysiwyg" class is not contained in that file. This is what it looks like:

.wysiwyg {
-moz-background-clip:border !important;
-moz-background-inline-policy:continuous !important;
-moz-background-origin:padding !important;
background:#F5F5FF none repeat scroll 0 0 !important;
color:#000000 !important;
font-family:arial,helvetica,verdana,sans-serif !important;
font-size:10pt !important;
font-size-adjust:none !important;
font-stretch:normal !important;
font-style:normal !important;
font-variant:normal !important;
font-weight:normal !important;
line-height:normal !important;
margin:5px 10px 10px !important;
padding:0 !important;
}

btw, it's not in vbulletin_editor.css either (path of this can be changed in editor_css template)

Edit: it looks like it's coming out of the database - but that doesn't explain why it won't load when the main css is on a different server.

--------------- Added [DATE]1251835311[/DATE] at [TIME]1251835311[/TIME] ---------------

I think I figured it out - The editor is loaded within an iframe (vB_Editor_001_iframe). It won't load .wysiwyg because it's calling from that iframe and is expecting the class css to be on the root domain.