Nerdragen
Nerdragen

Reputation: 3190

Configuring a reverse-proxy-like Firebase Hosting solution

This is what I currently have

domain.com ->  website A with its own firebase host (domain.firebase.com)
me.domain.com -> website B with its own firebase host (domain-me.firebase.com)

This wasn't hard to set up, just multiple sub-domains redirecting to different Firebase hosts. Now, what I want, is a reverse proxy takes a request and has the option of routing traffic to various servers while keeping the client URL only on the main domain of domain.com. I'm not sure if this is possible specifically with Firebase, as there are tons of NGINX implementation examples, But basically, I want this:

domain.com/ ->  website A with its own firebase host (domain.firebase.com)
domain.com/me -> website B with its own firebase host (domain-me.firebase.com)

Firebase has very intricate redirect options, but redirects also overwrites the client URL. So with a redirect, the client will see domain-me.firebase.com instead of domain.com/me, which isn't what I want.

As far as I've figured, I can use Firebase Cloud functions to serve as a middleware, and have it serve either site as needed. However, this introduces a lot of latency as both Cloud functions and Firebase hosted websites have warm-up times from cold starts.

It's totally fine to not give me a complete and detailed answer, I really just want to know if this is possible to begin with, and where I can find relevant resources. Thanks!

Upvotes: 6

Views: 5661

Answers (2)

Nerdragen
Nerdragen

Reputation: 3190

To answer my own question and building on Doug's answer of using Cloud Run. There is a quick and painless way to set up a reverse-proxy-like implementation with 2 apps. To do this:

1) Build both apps and have them in separate folders, such as folder A and folder B. You only need the build folders of the apps, you don't need the source code.

2) Create a new Express app at the root of folders A and B.

3) Have Express manage routes using app.get and serve files back using res.sendFile.

4) Containerize the entire Express app following Google's tutorial here, you can ignore the sample application since your new Express app is the application.

5) Upload to Cloud Run as a new service. Keep in mind that while the Google tuts don't specify, you will need to give your user permission to upload to the storage bucket. You will need the command gsutil iam ch user:[user]:objectViewer gs://us.artifacts.[project-name].appspot.com Also make sure to switch to the current project using command gcloud config set project [project-name] if you have multiple projects.

6) Use Google domain mapping to map to your root domain, so domain.com.

You must use domain mapping as the URL used by Cloud Run is ephemeral...'cause it's serverless.

Your folder structure should be something like

my-awesome-project
    index.js <- Express app and Docker entry point
    /package.json <- for your Express app
    /A
    /B
    /Dockerfile
    /node_modules

Example router would be

app.get('/me/*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/B/index.html'));
});

app.get('/*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/A/index.html'));
});

Setting your apps up on subdomains instead works pretty much the same way. Containerize each individual app using step 4, then map each domain separately using Google Domain Mapping.

Upvotes: 3

Doug Stevenson
Doug Stevenson

Reputation: 317740

Integration with Cloud Functions and Cloud Run are pretty much your only options here. There's nothing in the config that will let you proxy your requests directly to other endpoints other than indirectly through HTTP redirects.

Upvotes: 2

Related Questions