Apache virtualhost root, www and sub-domain setup including http to https - apache

Question

I'm pretty stuck. Would appreciate some help.
Two websites (wordpress and another php tool) on an AWS EC2 Ubuntu
18.04 instance running LAMP stack.
My intention is to achieve:
http://www.example.com
http://example.com
https://www.example.com
to: https://example.com.
AND
http://app.example.com
to: https://app.example.com.
I had virtualhost configured and working as I intended, I then created the https cert through letsencrypt which setup the HTTP to HTTPS redirects...however...something's gone wrong:
HTTP all redirect to HTTPS.
https://app.example.com resolves to the intended website - website1.
https://example.com doesn't resolve to website2 - it resolves to website1 - note it's not redirecting to app. but showing website1 on https://example.com.
I've two virtualhost conf files, one for each site. Both contain each sites 80 and 443 config, they're below.
The SSL cert has the common name of example.com and lists alternative names for app.example.com, www.example.com and example.com.
DNS has example.com A to server IP, www. and app. are CNAME to example.com.
app.example.com.conf - Website 1
<VirtualHost *:80>
ServerAdmin jimmy#example.com
DocumentRoot /var/www/website1/
ServerName example.com
ServerAlias app.example.com
<Directory /var/www/website1/>
Options FollowSymlinks
AllowOverride All
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
RewriteEngine on
RewriteCond %{SERVER_NAME} =app.example.com [OR]
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>
<IfModule mod_ssl.c>
<VirtualHost *:443>
ServerAdmin jimmy#example.com
DocumentRoot /var/www/website1
ServerName example.com
ServerAlias app.example.com
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
<Directory /var/www/website1/>
Options FollowSymlinks
AllowOverride All
Require all granted
</Directory>
Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
</VirtualHost>
</IfModule>
example.com.conf - Website 2
<VirtualHost *:80>
ServerAdmin jim#example.com
ServerName example.com
ServerAlias example.com
DocumentRoot /var/www/website2
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
<Directory /var/www/website2/>
AllowOverride All
</Directory>
RewriteEngine on
RewriteCond %{SERVER_NAME} =example.com
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>
<VirtualHost *:80>
ServerAdmin jim#example.com
ServerName example.com
ServerAlias www.example.com
DocumentRoot /var/www/website2
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
<Directory /var/www/website2/>
AllowOverride All
</Directory>
RewriteEngine on
RewriteCond %{SERVER_NAME} =www.example.com [OR]
RewriteCond %{SERVER_NAME} =example.com
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>
<IfModule mod_ssl.c>
<VirtualHost *:443>
ServerAdmin jim#example.com
ServerName example.com
ServerAlias example.com
DocumentRoot /var/www/website2
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
<Directory /var/www/website2/>
AllowOverride All
</Directory>
Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
</VirtualHost>
</IfModule>
<IfModule mod_ssl.c>
<VirtualHost *:443>
ServerAdmin jim#example.com
ServerName example.com
ServerAlias www.example.com
DocumentRoot /var/www/website2
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
<Directory /var/www/website2/>
AllowOverride All
</Directory>
Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
</VirtualHost>
</IfModule>
I'd really appreciate any help, suggestions and any other ideas!

Answer 1

https://example.com doesn't resolve to website2 - it resolves to website1 - note it's not redirecting to app. but showing website1 on https://example.com
Yes, because all your vHosts define example.com as the ServerName and I expect website1 appears first in the config.
For app.example.com.conf (Website 1) you should set ServerName app.example.com and remove the ServerAlias directive altogether for both the vhost:80 and vhost:443 containers.
The HTTP to HTTPS redirect in the vhost:80 container:
RewriteEngine on
RewriteCond %{SERVER_NAME} =app.example.com [OR]
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
Can be simplified to a single mod_alias Redirect directive:
Redirect 301 / https://app.example.com/
For example.com.conf (Website 2) you have duplicated the vhost:80 and vhost:443 containers and defined the same ServerName example.com in each - this is an error. It is perfectly possible to have 4 containers like this (and use mod_alias Redirect directives), but you would need unique ServerName directives for each vHost and cut down the repetition.
The easiest approach from your point of view is probably just to remove the second (duplicate) vhost:80 and vhost:443 containers and set the following in both the vhost:80 and vhost:443 containers that remain.
ServerName example.com
ServerAlias www.example.com
I then created the https cert through letsencrypt which setup the HTTP to HTTPS redirects
Creating the SSL cert using LetsEncrypt should not have "setup the HTTP to HTTPS redirects"?