I'm currently working on a social media app for Android mobile, and I have a problem regarding the cost-efficiency of my app especially with Firebase Storage. Therefore I want to implement a CDN for Firebase, which would cache the videos and images, preferably using a CDN service that offers scalable pricing (Google CDN offers this price model). I have been searching everywhere on how I could implement the google CDN with Firebase Storage but found no clear instructions. How can I achieve this?
There are a few ways to implement a CDN with Firebase Cloud Storage.
Please have a look at the documentation Firebase Cloud Storage:
Cloud Storage stores your files in a Google Cloud Storage bucket, making them accessible through both Firebase and Google Cloud. This allows you the flexibility to upload and download files
from mobile clients via the Firebase SDKs, and do server-side
processing such as image filtering or video transcoding using Google
Cloud Platform.
As a result, you can follow the documentation Setting up Cloud CDN with a backend bucket, but keep in mind that Cloud CDN will only kick in if you're accessing your data via that External HTTP(S) Load Balancer. You can find an example in the updated article Create a Custom Domain CDN with Google mentioned by #Yanan C.
As an alternative, you can use Cloudflare or other CDN. To do it you can follow instructions provided in the article How to Put a CDN in Front of Firebase Cloud Storage:
In Cloudflare create a new CNAME pointing your subdomain to c.storage.googleapis.com. For example: CNAME images.firerun.io c.storage.googleapis.com.
In the Firebase console -> Storage, create a new bucket named the subdomain. In the example above, the bucket name would be
"images.firerun.io". This is restriction where only the bucket named
the same as the subdomain will work.
Add a test file, for example: keep-calm.jpg
Next, give public access to the bucket the Google Console. Note, this is different from Firebase security rules where you should set
the security rules to allow externally allow read:
Go to Storage Management in the Google Console. Select your Firebase project.
Click on your new bucket (e.g. images.firerun.io) and click on the tab "permissions."
Click the "Add Members" button.
Enter New Member as "allUsers" and Role as Cloud Storage -> Storage Object Viewer".
Click "Save" and accept the warning that this is publicly accessible.
Now go to your subdomain with the file appended. For example: https://images.firerun.io/keep-calm.jpg
In addition, please have a look on the article Why You Should Put a CDN Like Cloudflare in Front of Firebase.
For Firebase Storage, I suppose the contents to cache, such as videos and images, are objects stored in buckets, please let me know otherwise. If it is the case, the post provides an answer from Firebase Support regarding how to use CDN with Firebase Storage, with an excerpt as below:
Now, there are ways to add a CDN to Cloud
Storage content; I found this small guide using Google CDN:
https://medium.com/#marco_37432/create-a-custom-domain-cdn-with-google-beta-7ad9531dfbae
Another use that I have seen is creating a static website with Cloud
Storage and adding on top another CDN provider, like CloudFlare. You
can see more details in this links:
https://cloudplatform.googleblog.com/2015/09/push-google-cloud-origin-content-out-to-users.html
https://cloud.google.com/interconnect/docs/how-to/cdn-interconnect
Hope it helps.
Related
I need to have a custom URL for firebase storage images, this is because the images are to be accessed from static urls like
-> firebase.com/.../image-1 etc.
This will be not be changed and is static so if we could change firebase storage image urls to custom urls, it will be good.
Firebase does not directly support custom URLs for objects in storage.
Since Firebase storage buckets are actually Google Cloud Storage buckets with added APIs, you can follow the instructions in the Google Cloud documentation for hosting a static web site from a storage bucket. It is not trivial to set up, and requires use of other Google Cloud products.
In our system the users upload their images using our mobile app to firebase storage which is a wrapper over google cloud storage bucket, the mobile app is using this library to do the upload, and then use the getDownloadUrl method (described in the link) to generate a download link like the following:
https://firebasestorage.googleapis.com/v0/b/{BUCKET_NAME}/o/{PARENT_FOLDER}/{IMAGE_NAME}?alt=media&token={UUID}
Then it sends the URL to our BE to store the link.
The download time for firebase storage links is much longer than downloading the exact same image directly from google cloud storage link which is simply could be generated from the following link template
https://storage.googleapis.com/{BUCKET_NAME}/{PARENT_FOLDER}/{IMAGE_NAME}.
As GCP link is faster (according to our own benchmark), then we need a way to map firebase link into its counter part in GCP storage to improve the download performance.
The solution described above to do the mapping is right for any image that is publicly available in the GCP bucket, however, if the image is not publicly available then it could be accessed using firebase link (maybe because it has the token in the link), but we can not access it using the GCP link and it gives the following error:
<Error>
<Code>AccessDenied</Code>
<Message>Access denied.</Message>
<Details>Anonymous caller does not have storage.objects.get access to the Google Cloud Storage object.</Details>
</Error>
My question is:
How can we access the image from GCP storage link, even if it is not public, given that we can not make all images public due to security reasons?
I have recently been trying to send user's invoices from our online shop that include images of the products bought. We are using firebase for our backend, and firebase storage for hosting the images.
For some reason, whenever I add a firebase storage hosted image to the email it goes straight to the spam folder. When I use a test image hosted at a different URL it seems there is no problem.
Is there a way to get around this problem while still using firebase storage for our image hosting? Or would it be best to simply store the images elsewhere?
You can't serve the images directly from Cloud Storage as the URL is often obfuscated with hashes or UUIDs and has been abused for spam in the past. As the spam filter can't determine if the resource is legitimate or not, it simply gets flagged as spam.
You can serve the images from a deployed Firebase Hosting site (not recommended), from behind Firebase Hosting using Cloud Functions and rewrites that pipe data from Cloud Storage (suitable for low-frequency requests), or make use of a reputable resource hosting platform (like Cloud Storage).
In all of the above situations, you should serve those images from a custom domain like https://cdn.example.com that matches your email address and ensure that it has a valid SSL certificate.
What is Firebase Hosting for? Examples? I'm not clear on what it does with respect to hosting a website or server or both....
My understanding of hosting is that one would enlist something like Bluehost or GoDaddy to host a webpage, which they would then upload the website files via an FTP. I see it appears Firebase Hosting may serve a similar purpose and you can add your own domain name like this.
I also understand that websites sometimes require a separate server to do things like: processing requests while keeping secret keys hidden, or rendering a unique webpage server-side and sending a static page to the user. I've used Firebase Realtime Database for non-secure data storage, but I would like to be able to use the hosting as well for serving private user-specific content without exposing keys.
I just did a tutorial to create what seemed like a web app that one would query from another webpage, but I wasn't able to deploy and try it out because of the pay-wall.
Can Firebase Hosting be my secondary server that processes private requests to a database or is it only for hosting a user-facing webpage, or both?
I am new to programming and would appreciate hearing if it seems like I am misunderstanding something within my question. Recommended resources for further learning on this subject are greatly appreciated!
Thank you.
Hosting a static web site
Firebase Hosting on its own is a service for hosting static assets. So in your scenario HTML + CSS + Images + JavaScript files that are included in them. None of this content is executed, or in any other way interpreted, on the Firebase servers. You upload (in Firebase terms "deploy") the files to Firebase, which then distributes then to its global CDN edges, and when your site is visited, the content it served from that CDN.
In the Firebase documentation on what can you host this is referred to as:
Host your single-page web apps, marketing websites, and static and dynamic assets
Hosting a static web site with dynamic content
You can use Firebase with many of the other back-end services to add dynamic functionality to your static web site. For example, you can call Realtime Database from your client-side JavaScript code, and display dynamic data in your static web app that way. Firestore would be similar, which you could use in place of Realtime Database. Similarly you can use Firebase to connect to Cloud Storage, for storing of files, for example to allow your users to upload and view images.
And then you'll typically want to secure access to all this dynamic content. At that point, you use Firebase Authentication to allow your users to sign in, and when you'll use Firebase's server-side security rules, which are available for Realtime Database, Cloud Firestore and Cloud Storage. These rules determine what data or files the users can access.
The Firebase documentation covers this in the section on deep integrations with other Firebase products.
Firebase Hosting works out-of-the-box with Firebase services, including Cloud Functions, Authentication, Realtime Database, Cloud Firestore, and Cloud Messaging. You can build powerful microservices and web apps using these complementary Firebase services.
Adding dynamic server-side pieces to web site
You can integrate Firebase Hosting with Google Cloud Functions and Cloud Run to build dynamic web sites. In those scenarios, you host the server-side code on Cloud Run or Cloud Functions, and set Firebase Hosting up to redirect certain URLs to specific end points in your server-side code.
In the Firebase documentation on what can you host this is referred to as:
Pair Firebase Hosting with Cloud Functions to build microservices using the Express.js framework. This pairing allows you to host your microservices and APIs on Firebase.
i'm making an app using firebase.
photos uploaded by users are saved in firebase storage.
I use firebase cloud functions to make thumbnails to load photo feed faster,
but in one page, I need to load original photos(max 30 pics) at once.
To load original photos faster, I want to use google cloud CDN.
I followed docs here google cloud cdn docs , made load balancer and cdn
I can see Cloud CDN : Enabled (that Backend buckets are my firebase storage), but it seems to be not working.
in my app, I load those pictures with firebase storage urls which look like 'firebasestorage.googleapis.com/....'.
How can I integrate my firebase storage with google cloud cdn??
Using firebasestorage.googleapis.com sounds like the problem here. When you set up Cloud CDN in your project, you had to create an HTTP(S) Load-Balancer in order to expose a bucket. Cloud CDN will only kick in if you're accessing your data via that Load-Balancer. Try accessing the Load-Balancer's public IP instead of the firebase URL. You can find the IP address right there in the same page you've screenshot. Finally, don't forget to make sure the files you want to make available via the CDN obey these restrictions.