Serve static files from google-cloud-storage through express middleware

Question

I have an express app hosted on google AppEngine which uses the express static middleware. I'd like to store the static files on google-cloud-storage, and to be able to switch from regular filesystem to google-cloud-storage without too much modification.

I was thinking of writing a middleware:

• using the Google Cloud client library for Node.js, something like Express caching Image stream from Google Cloud Storage) ;
• or acting as a proxy (mapping pathnames to raw google-cloud-storage urls).

Is there an easier/cleaner way to do that ?

Answer 1

I made this work using http-proxy-middleware. Essentially, since GCS files can be accessed via http protocol, this is all we need.

Ideally, the files could be served directly out of GCS itself, by making the bucket public and making its URL like https://storage.googleapis.com/<bucket-name>/file. But my requirement was the file needed to be served from the same domain as my app, but the files were not part of the app itself (they are generated separately). So, I had to implement it as a proxy.

import proxy from 'http-proxy-middleware';
...

app.use('/public', proxy({
  target: `https://storage.googleapis.com/${process.env.GOOGLE_CLOUD_PROJECT}.appspot.com`,
  changeOrigin: true,
}));

Note that the bucket based on the project ID is automatically created by GAE, but it needs to be given public access. This can be done by

gsutil defacl set public-read gs://${GOOGLE_CLOUD_PROJECT}.appspot.com

After setting up the proxy, all requests to https://example.com/public/* will served from the bucket <GOOGLE_CLOUD_PROJECT>.appspot.com/public/*.

Answer 2

I require the same and came across the example used on google cloud node or see example in another question

Pipe the readstream of the file-contents to your response. Set the file-name and content-type

// Add headers to describe file
let headers = {
   'Content-disposition': 'attachment; filename="' + 'giraffe.jpg' + '"',
   'Content-Type': 'image/png'
};

// Streams are supported for reading files.
let remoteReadStream = bucket.file('giraffe.jpg').createReadStream();

// Set the response code & headers and pipe content to response
res.status(200).set(headers);
remoteReadStream.pipe(res);