How to setup AWS Cloudfront for Magento 2

Question

I have been looking everywhere for a solution, and I was following the following documents to achieve this task.

https://absolutecommerce.co.uk/magento2-aws-cloudfront-cdn

Here they mention something about, Access-Control-Allow-Origin: http://your.magento.website.com. I am assuming my issue is something to do with this.

Since I am new to this configuration stuff, its has become a trial and error war so far. This is what I have so far,

1. Have a Magento installation, on AWS ec2 with a ELB with a SSL certificate associated with it (example.com, *.example.com),

2. Have cloud formation set up with the same certificate used for the ELB. This is only HTTPS. DNS set up to cdn.example.com.

My Apache configuration is as below,

VirtualHost *:80>
 # The ServerName directive sets the request scheme, hostname and port that
 # the server uses to identify itself. This is used when creating
 # redirection URLs. In the context of virtual hosts, the ServerName
 # specifies what hostname must appear in the request's Host: header to
 # match this virtual host. For the default virtual host (this file) this
 # value is not decisive as it is used as a last resort host regardless.
 # However, you must set it for any further virtual host explicitly.
 ServerName example.com
 ServerAdmin [email protected]
 DocumentRoot /var/www/html
 Header set Access-Control-Allow-Origin "https://www.example.com"
 # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
 # error, crit, alert, emerg.
 # It is also possible to configure the loglevel for particular
 # modules, e.g.
 #LogLevel info ssl:warn
 ErrorLog /var/log/apache2/error.log
 CustomLog /var/log/apache2/access.log combined
 <Directory /var/www/html/>
 RewriteEngine on
 RewriteCond %{HTTP:X-Forwarded-Proto} !https [NC]
 RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
 </Directory>
 # For most configuration files from conf-available/, which are
 # enabled or disabled at a global level, it is possible to
 # include a line for only one particular virtual host. For example the
 # following line enables the CGI configuration for this host only
 # after it has been globally disabled with "a2disconf".
 #Include conf-available/serve-cgi-bin.conf
</VirtualHost>

when I request a object,

https://cdn.example.com/static/version1485641847/frontend/Venustheme/superstore/en_US/owl.carousel/assets/owl.carousel.css

it gives a 404. I am not sure where I am making a mistake.

• Brett: Have you set up the cloud front origin properly? The way cloudfront works is that if it doesn't have a local cache it requests it from your defined origin and caches that. If your origin is returning a 404 then Cloudfront will return a 404 or error. Did you deploy your static resources on your web server first before testing?
• diyoda_: @Brett after some times, I noticed that there is part missing in the url. which is /pub/media, and /pub/static/ so now the origin images and js can be accessed, but now with the new cdn sub domain, I get, net::ERR_SSL_VERSION_OR_CIPHER_MISMATCH

Answer 1

I figured out the issue, it was the URLs base_static_url and base_media_url

I was following a tutorial and assumed that magento is very opinionated in terms of url and stuff, But the case is different, it is different.

I specified urls as https://cdn.example.com/media/, https://cdn.example.com/static/. But what should have been was, https://cdn.example.com/pub/media/ and https://cdn.example.com/pub/static/

There is also some configuration pitfalls in both cloud front and apache configurations