Firebase custom domain 'Needs Setup' with nginx proxy server - firebase

Question

I have a Frontend app hosted on Firebase hosting. I also have a backend API running on a Digital Ocean droplet. I have nginx installed on the droplet which will either redirect to the frontend app or to the backend API. My nginx configuration file looks like the following:
server {
listen 80;
return 301 https://$host$request_uri;
}
server {
listen 443;
server_name myapp.com *.myapp.com;
ssl_certificate /etc/nginx/cert.crt;
ssl_certificate_key /etc/nginx/cert.key;
ssl on;
ssl_session_cache builtin:1000 shared:SSL:10m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
ssl_prefer_server_ciphers on;
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://150.101.64.193:80;
proxy_read_timeout 90;
proxy_redirect http://150.101.64.193:80 https://myapp.com;
}
location /api/ {
proxy_pass http://localhost:5000;
proxy_read_timeout 90;
proxy_redirect http://localhost:5000 https://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
Firebase tells me to copy two TXT records into my DNS settings but could only get that to work if I wanted to map the domain name to the frontend app. Instead my DNS settings map my domain name to the IP address of the droplet. The proxy on the droplet should then forward the request to either the frontend or the backend depending on the route passed. e.g.
www.myapp.com/blah redirects to Firebase app
www.myapp.com/api/blah redirects to API
Currently Firebase reports that my custom domain needs setup because there is no corresponding TXT records. This is the first time I have tried to deploy a web app so I am unsure if this setup will work.

Answer 1

If you are using NGINX to proxy traffic to a Firebase Hosting site, you likely want to proxy that traffic to the shared domain e.g. <site>.web.app instead of re-proxying back to the same domain that is serving traffic.
We don't recommend putting proxies in front of Firebase Hosting as that defeats the purpose of Firebase Hosting's global CDN, but it should work.
You could also use Cloud Functions or Cloud Run to build your API surface directly instead of proxying to an NGINX backend.