Managed SSL verifications with React App catch all handlers

[owenj]

Hi all,

I'm deploying a production React app and inside my app.yaml I have added a catch all handler so that any request gets handled by React Router like so:

handlers:
  # Serve all static files with url ending with a file extension
  - url: /(.*\..+)$
    static_files: build/\1
    upload: build/(.*\..+)$
  # Catch all handler to index.html
  - url: /.*
    static_files: build/index.html
    upload: build/index.html

This works great but the only issue is when I attempt to activate managed SSL for app engine for my custom domain it is impossible to provision the cert because the path /.well-known/acme-challenge/ * gets redirected to react router and results in a 404 response. I've searched everywhere for what I would have assumed was a fairly standard deployment but can't find anything. How exactly should I handle this case?

Thanks in advance for any response

[osvaldolopez]

There are 2 steps to configure any domain of your own to direct traffic to the App Engine service. First, you must configure App Engine to use the domain, and then configure SSL certificates to secure the traffic.

Configuring App Engine Custom Domain setting is done via the console or by using the API. By default, a Google-managed certificate is provisioned, but you can opt to upload your own managed certificate. What kind of certificate are you using?

Google-managed certificates do not support wildcard mappings. This limitation does not apply for self-managed certificates.

[owenj]

Hi @osvaldolopez thanks for your reply. I am using google managed certificate. I'm not trying to map a wildcard domain but actually in my app.yaml file I have a rule that catches all traffic and sends it to my react index page. What I am wondering is how could I not catch traffic for the  /.well-known/acme-challenge/ route that the managed certificate uses to verify/extend its validity - is it possible to write some rule in app.yaml that sends this traffic to googles managed certificate service or provide the response required to maintain the certs? To activate the cert my workaround was to just temporarily remove the catch all route from the app.yaml, activate the cert and then add the catch all route back but what concerns me is I have to do this every 2 or 3 months to extend the cert's validity...

[osvaldolopez]

Here’s a similar question in Stack Overflow that might be helpful to your rule.

[owenj]

So finally the only way I could make this work:
1. It is not possible to craft a regex expression for a handler that accepts all requests apart from those on the .well-known route (this is the route required for the SSL cert verification) in the app.yaml file
2. I had to create a HTTPS load balancer using the instructions here: link - specifically I had to disable the custom domain and managed certificate in the app engine settings menu, create an external static IP, update DNS records to point to that IP, then create the load balancer with a managed certificate and the static IP. The added benefit of this is actually the use of Cloud CDN and the ability to manage the ingress in app engine to ensure nobody can reach the .appspot.com version of your deployed service. The downside is the extra services on your monthly bill though of course 😅