How to access virtual host from the internet?

Question

I want to access my website via virtual host from the internet. For now, I am using the public IP address of my server to access my website. Here is what I am using (please see below).

http://122.4.195.12:7777/site/index.php

1. Is there a way to access my virtual host from the internet? When I am accessing my virtual host from my internet (https://mysite/site/index.php) I am getting

DNS_PROBE_FINISHED_NXDOMAIN error
mysite’s server IP address could not be found.

2. Is there a way to add a SSL when accessing my website via public IP address? When I change http into https I am getting

ERR_SSL_PROTOCOL_ERROR
122.4.195.12 sent an invalid response.
http://122.4.195.12:7777/site/index.php -> https://122.4.195.12:7777/site/index.php

Here is my Virtual Host Config:

<VirtualHost *:7777>
DocumentRoot "C:\xampp\htdocs"
  ServerName mysite
  <Directory "C:\xampp\htdocs">
    Require all granted
    AllowOverride All
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>
<VirtualHost *:443>
     DocumentRoot "C:/xampp/htdocs"
     ServerName mysite
     SSLEngine on
     SSLCertificateFile "crt/scratchitsite/server.crt"
     SSLCertificateKeyFile "crt/mysite/server.key"
     <Directory "C:\xampp\htdocs">
        Require all granted
        AllowOverride All
        Order allow,deny
        Allow from all
      </Directory>
 </VirtualHost>

Here is the host file of my server:

127.0.0.1       mysite

Answer 1

For question 1

The easier way will still be registering a domain name, point it to your IP address, and setup your VirtualHost ServerName for it

The VirtualHost actually detecting the Host HTTP Header from server site, so the key thing here is:

How to make the client browser send the Host header the same with you defined on server

For example, by using CURL you can force it to use the user definied Host header like this: curl -H 'Host: mysite' 122.4.195.12:7777/site/index.php

If you're using Chrome, you can try to use a browser extension, like this

For question 2

You've enabled HTTPS on port 443 instead of 7777 in your Apache configuration

Which means you should access your HTTPS service like this https://122.4.195.12:443/site/index.php instead of this https://122.4.195.12:7777/site/index.php