Unable to set up custom domain on Heroku using Google Domains DNS? - heroku

Question

To preface this, I am new to backend web development so I'm coming at this totally clueless. My past experience is with Netlify, which makes it pretty seamless to add a custom domain to a website with their free DNS service.
To start, I am working on a Flask application that ideally I would like to put on a subdomain of my website (i.e. app.my-website.whatever, not actually my real domain since it includes my real name) on a different host, in this case Heroku, while keeping my main website (www.my-website.whatever) on Netlify. This required me to switch from using Netlify's DNS to using the DNS tools provided by Google Domains.
After deploying the app on the free domain, which went just fine, I tried setting up my domain for the website, following these steps:
On my website's dashboard, I went to Settings > Domains > Add domain and under domain entered app.my-website.whatever, including the subdomain of course.
Copied the DNS Target Heroku gave me.
At my dashboard for my-website.whatever at domains.google.com, under DNS > Default name servers > Resource records, I added a custom record with the hostname app.my-website.whatever (Google Domains automatically adds the .my-website.whatever), type CNAME, TTL 600, and in the Data field I pasted the DNS Target.
In my Ubuntu (WSL) terminal, when I type host app.my-website.whatever, the output says app.my-website.whatever is an alias for {bunch-of-random-characters}.herokudns.com.
Unfortunately, this has not been successful. When I try to visit the domain, I usually get an error such as DNS_PROBE_FINISHED_NXDOMAIN or alternatively ERR_SSL_UNRECOGNIZED_NAME_ALERT. I've also tried the same thing with just www.my-website.whatever, and the same issues occur.
When I try to visit the site, most browsers will automatically append https://, which I would assume doesn't quite work since I do not have a cert set-up for my site, which I need to do manually.
Does the above error mean that there is a problem related to SSL, or is it something else? Is it because my browser forces https:// that I cannot see anything changing (i.e. would http:// work?)?
From what I can tell, I should be able to do all of this on the free-tire, but I have some confusion about a few details, and feel like I could be missing some other things:
Do I need a certificate/SSL for my custom domain to work at all with Heroku?
If it could possibly be an easier solution: Is there a better alternative to Heroku in my case?
With regards to setting up the cert, I tried following the tutorial here:
https://medium.com/#bantic/free-tls-with-letsencrypt-and-heroku-in-5-minutes-807361cca5d3
For certbot, as the tutorial explains, you are given two strings like so: <long-string>.<other-long-string>, and you need to serve a file at /.well-known/acme-challenge/ with the name <long-string> (no extension), but as an unrelated issue, I cannot get Flask to serve this file, even on a local dev server, and I just get a 404 message, which the certbot utility also reports. I can create another file, such as a simple .txt file, in that same directory, and it will serve just fine.
I'll admit, these issues feel a bit basic, but I genuinely am lost, and none of the guides or posts I see online seem to have any remedy or explanation for what is happening here.
If there is any more information I should share, please let me know.