How to run a Vercel serverless function in a static HTML file?

I have the following project directory:

a_vercel_test
|
+--- index.html
|
+--- pages
     |
     +--- api
          |
          +--- index.js

I ran vercel dev inside the folder to get it running. When I go to localhost:3000, I can find the contents of the index.html file properly rendered. For the record, the index.html file looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>A Vercel Test</title>
</head>
<body>
    <h1>A Vercel Test</h1>
</body>
</html>

The index.js file looks like this:

// pages/api/index.js'

export default function handler(req, res) {
  console.log('Running Function');
}

Now what I want to do is run this as a serverless function when the HTML file is loaded. The reason I want to do this is that I want to query some data in this function (using env db secrets), and pass it to my file for rendering. Is this actually possible to do using such bare bones setup on Vercel? And if so, how do I do this? Most examples in the docs are related to next.js, and are also a bit confusing to be honest. I would love to be able to keep everything really light and static.