adding subdomain in apache virtual host

I am trying to configure a subdomain: api.example.com (exapmle.com is replaced by my actual domain name)

I already had virtual hosts set up with 2 sites: example.com and example.nl they both had separate directories and where working correctly as separate sites.

Now I want to add api.example.com also with its own separate documentroot. I added a config file called: “api.example.com.conf” with this inside:

<VirtualHost *:80>
ServerAdmin admin@api.example.com
ServerName api.example.com
ServerAlias www.api.example.com
DocumentRoot /var/www/api.example.com/html
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
RewriteEngine on
RewriteCond %{SERVER_NAME} =www.api.example.com [OR]
RewriteCond %{SERVER_NAME} =api.example.com
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

I added the folder /var/www/api.example.com/html with an example index.html inside. I gave the folder the right permissions. After that I enabled the site with: “a2ensite api.example.com.conf” and restarted apache.

I added a new record to the example.com records. It is an A record with api.example.com and it redirects to the same ip as example.com because they are on the same server.

After doing all of this I expected that when I went to api.example.com that it would show me the example index.html that I had created but it did not. When I go to api.example.com it is the same thing as if I would go to example.com.

What am I doing wrong?