Can I use DigitalOcean Spaces CDN as MediaServer in Prestashop?

Question

My prestashop is hosted on a DigitalOcean droplet. I want to use DigitalOcean Spaces as a MediaServer in my shop. But if I set up the spaces origin (https://xxxxxxxx.fra1.cdn.digitaloceanspaces.com) as MediaServer in Prestashop, then my images are missing. In the product page source, the img src seems to be right, it points to the CDN address. The main problem is, that prestashop dont sync my images to the CDN.

I have tried Bunny CDN before, and it was ok. The images were uploaded automatically.

How should I set up DigitalOcean Spaces to work like Bunny CDN?

Answer 1

There are 2 sides to it.

1. Prestashop Images storeage
2. Pointing to a CDN from Prestashop.

Prestashop only knows about the prestashop/img directory, where it stores all of the images.

From a DigitalOcean Droplet, you can mount a DigitalOcean Spaces just like a file system.

Please check here: https://www.digitalocean.com/community/questions/how-to-mount-digitalocean-spaces-on-droplets-with-s3fs

Once you have mounted your DO Spaces say as /storage/DO_Spaces. You can simply rename your prestaship/img directory to prestashop/img_backup and can use a soft link to point img to DO spaces mounted on your droplet.

Assuming /var/www/prestashop is the directory where prestashop is installed.

1. go to prestashop directory and create a soft link. ln -s /storage/DO_Spaces /var/www/prestashop/img

now copy entire prestaship/img_backup to prestashop/img directory cp -rf /var/www/prestashop/img_backup /var/www/prestashopprestashop/img/

WIthin seconds, you will see your images on your DO Spaces.

2nd step is to be able to view your images from a browser from the DO Spaces and its CDN. For this create a CNAME pointer to your CDN as mentioned above.

On your prestashop computer copy an image to /var/www/prestashop/img directory and check that you can view this file from http://static.mywebsite.com/image.png. You have to make sure that the root of your DO Spaces serves as the img directory.

Now every time prestashop will create an image in the /var/www/prestashop/img directory, it will be automatically copied to the DO Spaces and will be visible from your static URL. You will need to set correct permissions on DO Spaces that all new files become visible to the world.

More on this how to make your files visible or readable is well documented as part of DO Spaces.

https://www.digitalocean.com/community/questions/mount-point-with-spaces

There are some issues with making new files public readable. Here is a discussion. Once you have made your files public these are visible to the world via your static site. So the issue with DO Spaces that you may need to make them public manually so that these are visible to the world is out of the scope of mounting it locally and copying files.

Once these image files are copied to the DO spaces, then these are served just fine. You can configure Prestashop to use a CDN under Advanced Settings. Point to static.mywebsite.com in prestashop configuration. Prestashop will server images from the CDN.

Answer 2

Prestashop has no function to sync/copy images to a remote destination, the images will always be uploaded to the filesystem where it is installed.

"Media server" function in the back office only tells Prestashop the web path from which the images have to be retrieved, so it is your CDN service that have to handle the image "pickup and copy" from the backend server, so first make sure your CDN service can work like that and it is not a different object storage service where you have to manually upload resources.

Then, you have to make sure that CDN is correctly configured to point correctly to your backend so that the first web query reads the image from the server and the subsequent ones from the CDN.

Being aware of that, a typical approach is to create a subdomain like "static.mywebsite.com" with a CNAME to your CDN "https://xxxxxxxx.fra1.cdn.digitaloceanspaces.com" , then you can enter "static.mywebsite.com" in the media server space of Prestashop backoffice.