On my website I have two applications written in Vue. The first is SPA on port 80, the second is Nuxt SSR on port 8080, which is redirected from localhost:8000. I managed to set HTTPS on both external ports but only on port 80 HTTP traffic is redirected to HTTPS. On port 8080 HTTPS works, but when i try to visit site with http:// it gives me Apache error Bad Requetst:

"Your browser sent a request that this server could not understand.
Reason: You're speaking plain HTTP to an SSL-enabled server port.
Instead use the HTTPS scheme to access this URL, please."

I want all the traffic on port 8080 to be redirected to HTTPS.

My site.conf:

<VirtualHost *:443>
    ServerName site.com

    SSLProtocol all -SSLv3 -TLSv1 -TLSv1.1
    Protocols h2 http/1.1
    SSLEngine On
    SSLCertificateFile cert_path...
    SSLCertificateKeyFile key_path...
    SSLCertificateChainFile cert_path...
    ...
</VirtualHost>

<VirtualHost *:80>
    ...
    RewriteEngine On
    RewriteCond %{HTTPS} !=on
    RewriteRule ^/?(.*) https://%{SERVER_NAME}/$1 [R,L]
    ...
</VirtualHost>

<VirtualHost *:8080>
    ...
    SSLProtocol all -SSLv3 -TLSv1 -TLSv1.1
    Protocols h2 http/1.1
    SSLEngine On
    SSLCertificateFile cert_path...
    SSLCertificateKeyFile key_path...
    SSLCertificateChainFile cert_path...

    ProxyPreserveHost On
    ProxyPass / http://127.0.0.1:8000/
    ProxyPassReverse / http://127.0.0.1:8000/

    RewriteEngine On
    RewriteCond %{HTTPS} !=on
    RewriteRule ^/?(.*) https://%{SERVER_NAME}:8080/$1 [R,L]
</VirtualHost>