I have a website that I'm already running on firebase hosting using a google domain. I would like to now show all calls to my firebase function being made through a url such as api.mydomain.com, instead of the default firebase domain. How is it that I may be able to do this?
I read the firebase tutorial on hosting cloud functions, and I also came across this article on creating multiple sites. So could someone please tell how is it that I can set up the workflow such that my site is still running at mydomain.com, but my APIs are now being called through api.mydomain.com? What would be the target name for
If possible, I Would like all requests to be shown as requests to api.mydomain.com, and not to api.mydomain.com/endpoint - so that what endpoint is being hit is also hidden from public
Sorry, I am new to this.
Let's say your main project has an ID of example-app. To serve requests as api.mydomain.com, you would have to use a Cloud Function that makes use of express (or some other similar route handler).
Create the secondary site for your project using the Firebase CLI, (with an id of example-app-api, example-api, etc.)
firebase hosting:sites:create example-app-api
Connect your hosting targets to your resources
firebase target:apply hosting app example-app
firebase target:apply hosting api example-app-api
Modify your firebase.json file to suit the targets above.
{
"hosting": [
{
// app is linked to example-app, served as mydomain.com
"target": "app",
// contents of this folder are deployed to the site "example-app"
"public": "public",
// ... other settings ...
},
{
// api is linked to example-app-api, served as api.mydomain.com
"target": "api",
// Contents of this folder are deployed to the site "example-app-api"
// Any file here will be returned instead of calling your Cloud Function.
// Recommended contents:
// - favicon.ico (website icon for bookmarks, links, etc)
// - robots.txt (instructions for bots and scrapers)
// Optional contents:
// - service-worker.js (empty file, used to prevent triggering cloud function)
// - humans.txt (details about who you/your company are & how to report bugs)
"public": "api-static-resources",
// ... other settings ...
"rewrites": [
{
// redirect all calls to the function called "api"
"source": "**",
"function": "api"
}
]
}
]
}
Deploy the api hosting config using the Firebase CLI
firebase deploy --only hosting:api
Open Hosting Settings for your project, click "View" for example-app-api then click "Custom Domain" following these instructions.
You should now be able to trigger your Cloud Function by calling it at api.mydomain.com.
api.mydomain.com/getPost?id=someId
api.mydomain.com/favicon.ico
api.mydomain.com/robots.txt
Related
I checked the docs here: https://firebase.google.com/docs/hosting/multisites and here: https://firebase.google.com/docs/cli/targets but I don't think I understand them well enough and I am unable to host different content on different subdomains within the same domain using Firebase. E.G (page.website.com and website.com) My Firebase.json file looks like this:
{
"hosting": [{
"target": "mainSite",
"public": "public"
},
{
"target": "authentication",
"public": "authentication"
}
]
}
I don't really understand where to direct the folder to the subdomain using:
firebase target:apply hosting TARGET_NAME RESOURCE_IDENTIFIER
Is that RESOURCE_IDENTIFIER? E.G is website.com or whatever site what I should put into RESOURCE_IDENTIFIER? I am lost.
I don't really understand where to direct the folder to the subdomain
using:
firebase target:apply hosting TARGET_NAME RESOURCE_IDENTIFIER Is that
RESOURCE_IDENTIFIER? E.G is website.com or whatever site what I should
put into RESOURCE_IDENTIFIER? I am lost.
RESOURCE_IDENTIFIER refers to the SITE_ID values that you used to construct the Firebase-provisioned default subdomains for the site, see this section of the doc.
You defined them when executing the following command in the the Firebase CLI:
firebase hosting:sites:create SITE_ID
In parallel (and independently of the previous settings) you can associate a custom domain (e.g. page.website.com and website.com) to each of your site.
I deployed a new version of a web app that included some new Firebase functions. The new Firebase functions were inaccessible upon deployment.
I was able to find the root cause by familiarity with Firebase's configuration: the function requests were intended to route through the main app domain, and be redirected on the Firebase server to their final destination. (This should have been set up with Firebase's 'rewrites' section of firebase.json, but wasn't.)
A partial view of my rewrites section of firebase.json:
"rewrites": [
{
"source": "/getPlaces",
"function": "getPlaces"
},
...
{
"source": "**",
"destination": "/index.html"
}
]
In plain English, this says, "Firebase server: every time you get a request routing to https://my.app/getPlaces, I want you to not route to that address within my app; I want to invoke my Cloud function instead. Otherwise, route normally."
Yet when I look at the Functions tab of my Firebase console, all I see is this:
Under 'Request', it says https://us-central1-my-app.cloudfunctions.net/getPlaces. That gives me just one of the ways to access my function; the other is https://my.app/getPlaces, as defined in rewrites. I need to know all of the addresses that Firebase will respond to, not just the default one using cloudfunctions.net.
Is it possible to see the entire configuration for the deployed Firebase functions anywhere in the web UI, ie console.firebase.com or console.cloud.google.com, where redirects from rewrites like this can be seen?
I've deployed a next.js app to Google Cloud and am using Functions and Hosting.
I recently tried to move everything to northamerica-northeast1 region. I re-deployed all the functions placing .region("northamerica-northeast1") at the start of all my Functions as shown here. This successfully updated the location of all my functions.
However, I also use a function to serve my next.js app:
const server = functions.https
.onRequest((request, response) => {
return app.prepare().then(() => handle(request, response));
});
And I re-write all URLs to this function:
"hosting": {
"target": "webapp",
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"function": "nextjs-server"
}
]
},
This is all standard next.js on Google Cloud stuff and I've been doing it for 2+ years. However, when I moved the function to the new region using this:
const server = functions
.region("northamerica-northeast1")
.https
.onRequest((request, response) => {
return app.prepare().then(() => handle(request, response));
});
It appears the re-write no longer works. The function was updated, but when I visit the site, I get a 404. Then, when I move the function back to the default region (by removing the .region()) it works again fine.
I tried on 3 current projects, same thing.
Finally, I tried creating a brand-new, fresh project and deployed to the northamerica-northeast region (as before) and pushed the functions live with the region code in it...so my project never was hosted anywhere except northamerica-northeast1 and it still failed. However, by removing the region, the re-writes start working fine again and I can see the site. This is even though the entire rest of the site is in the northamerica-northeast1 region and just this one server function moved to the default region.
I believe this is a bug in rewrites on google cloud? Or is there something I'm missing or some doc somewhere that says re-writes are unavailable in this region?
If you want to use Hosting and Cloud Functions together, the Functions be located in us-central1.
Firebase Hosting supports Cloud Functions in us-central1 only.
Serve dynamic content and host microservices with Cloud Functions
We are using firebase to host our react js application.
Also, we have a WordPress blog, hosted on Siteground.
We need to access the blog from [Domain]/blog
Firebase offers hosting configuration object and you can use rewrite rules to define source and destination.
But unfortunately, it just lets you add a local path in Destination, not external IP or Domain.
We need something like this in firebase hosting config object:
"hosting": {
// ...
// Serves index.html for requests to files or directories that do not exist
"rewrites": [ {
"source": "/blog",
"destination": "[SERVER IP / CUSTOM"
} ]
}
Is it possible?
Can firebase hosting be used to deploy a node.js application that requires dynamic routing. Why do they call that hosting can be used to deploy single page app.
Firebase Hosting project structure
Something like this:
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var homeRouter = require('./routes/home');
And then have the routes in the routing folder
Firebase Cloud Functions do support Express.js routing.
You can read more in the docs or follow this medium post for more of a walkthrough.
Edit:
For more on using the express router with module imports take a look at this blog.
{
"hosting": {
// ...
// Add the "rewrites" attribute within "hosting"
"rewrites": [ {
"source": "**", // <<< Do this in your firebase.json
"function": "app"
} ]
}
}