How to store lots of HTML files in Firebase and serve it through http request?

Viewed 461

I have lots of html reports that I need to store, which then I would like to be able to serve it to my app from an API endpoint GET /:reportID.

My initial and probably dumb approach is to store all of the HTML files on the cloud functions then just send the HTML file if the endpoint is called. This doesn't work because of The maximum size of a single function deployment limitation is only 100MB compressed or 500MB uncompressed.(I have almost hundred thousands of HTML files)

Then I'm thinking to store the files in Firebase storage. Serve it when the Cloud functions is called by downloading it first then send it to the client. I don't think this is a good approach as there are many task involved.

  • 2x downloading
  • write the file to cloud functions
  • delete the file after its being sent

The other way that I could think of is by getting the file directly into my client app. However, I don't use authentication from firebase, so I have a token that needs to be authenticated first. I'm not sure if this is even possible to be added on firebase storage rules.

I'm currently stuck. Anyone can give me some insight on how should I approach this problem?

2 Answers

Firebase storage is a Google Cloud Storage Bucket behind the scene. Rather than serving your HTML files as responses from your Cloud Function, you can store the HTML files directly as object (HTML files) in Google Cloud Storage Bucket with text/html content type. Then you need to open the bucket to public access. Security wise, you can allow only authenticated users to access the files. So you can serve your files directly from Cloud Storage and you overcome the limit of the 100MB.

Your files will be accessible through this URL pattern https://storage.googleapis.com/<BUCKET_NAME/<HTML_FILE_NAME.

Finally, you can improve things:

  • you can cache your HTML files behind a CDN
  • you can replace storage.googleapis.com domain with a static IP address.

You can achieve all these steps in a simple way, very well documented in this Google doc.

Have you considered storing them as text within Firestore?

Firestore has low latency and low read costs and can scale well with multiple files and documents. you can also append fields to query against to serve. With this, it may require a wrapper to decode and inject into your website, this could be done with a cloud function or a local script using basic javascript.

But this is speculation for your needs and you can combine it with Cloud Functions and Cloud Storage

Related