I've hosted a small PHP environment on AWS ElasticBeanstalk. The static content (
.jpg files etc) is inaccessible directly from ElasticBeanstalk, and must come from another source. I've elected S3 to be that source, but I have a few issues.
- My website on EB is
- My S3 bucket is
s3.<location>.amazonaws.com/elasticbeanstalk-<location>-<id>. The bucket and all its subfolders are public.
- Inside this bucket, I have the folders
/WebsiteData/js/etc, which store the relevant files.
Now, I'm having trouble loading the static files when I visit
I don't want to hard-code the link to my S3 bucket for every static file I reference (because I may move it to another CDN later).
For example, I prefer to have my link to an image file as
/WebsiteData/images/img1.jpg, rather than
Things I have tried:
I initially tried
mod_rewritein my .htaccess; this does not load the images/static content when I visit
<website_name>.<location>.elasticbeanstalk.com/homepage.php, it only redirects to the S3 bucket when I click on the link
<website_name>.<location>.elasticbeanstalk.com/WebsiteData/images/img1.jpg. I guess this makes sense since it is a redirect on the server.
Next, I tried a PHP solution:
<img src="<?php echo $aws_s3_folder; ?>/WebsiteData/images/img1.jpg" alt="My image"/>. This works, obviously.
s3.<location>.amazonaws.com/elasticbeanstalk-<location>-<id>/WebsiteData/. This works as well, but I get some warnings.
The last two methods do work (I can see the JS/CSS/images when I visit
homepage.php), but it feels like an ugly hack to me. What's the correct way to fetch static content in this situation? Would AJAX or CloudFlare be the right way to go?