How can I use bucket storage to serve static files on google flex/app engine environment?

Question

I have a nodejs backend and a reactjs frontend. I am using the gcloud flex environment (app engine) and want to serve all the frontend files using a CDN. I would not want the requests to touch my nodejs server. I am unable to configure my projects app.yaml to do the same.

I suspect that my requests are not being served from a CDN because if I comment the below line in my nodejs code, I can no longer access index.html .

app.use('/', express.static(path.resolve('./frontend/dist')));

Below is the YAML file.

handlers:
- url: /(.*\.html)
  mime_type: text/html 
  static_files: frontend/dist/\1 
  upload: frontend/dist/(.*\.html)

- url: /styles/(.*\.css) 
  mime_type: text/css 
  static_files: frontend/dist/styles/\1 
  upload: frontend/dist/styles/(.*\.css)

- url: /scripts/(.*\.js) 
  mime_type: text/javascript 
  static_files: frontend/dist/scripts/\1 
  upload: frontend/dist/scripts/(.*\.js)

- url: /images/(.*\.(bmp|gif|ico|jpeg|jpg|png)) 
  static_files: frontend/dist/images/\1 
  upload: frontend/dist/images/(.*\.(bmp|gif|ico|jpeg|jpg|png))

- url: / 
  static_files: frontend/dist/index.html 
  upload: frontend/dist/index.html

-  url: /.* 
  script: IGNORED
  secure: always

Is there a way to configure app engine such that the static file requests don't react my nodejs backend servers?

Thanks

Answer 1

You're mixing up standard GAE env app.yaml elements (the static content config) into your flex env app app.yaml.

Serving the static content is different in the flex environment.

Your express.static-based method for serving static files actually corresponds to Serving from your application:

Serving from your application

Most web frameworks include support for serving static files. In this sample, the application uses the express.static middleware to serve files from the ./public directory to the /static URL.

To serve static content without the requests hitting your app you need to follow the Serving from Cloud Storage:

Example of serving static files from a Cloud Storage bucket

This simple example creates a Cloud Storage bucket and uploads static assets using the Cloud SDK:

1. Create a bucket. It's common, but not required, to name your bucket after your project ID. The bucket name must be globally unique.

   gsutil mb gs://<your-bucket-name>
   

2. Set the ACL to grant read access to items in the bucket.

   gsutil defacl set public-read gs://<your-bucket-name>
   

3. Upload items to the bucket. The rsync command is typically the fastest and easiest way to upload and update assets. You could also use cp.

   gsutil -m rsync -r ./static gs://<your-bucket-name>/static
   

You can now access your static assets via https://storage.googleapis.com/<your-bucket-name>/static/....

For more details on how to use Cloud Storage to serve static assets, including how to serve from a custom domain name, refer to How to Host a Static Website.

For more information on how to use the Cloud Storage API to dynamically upload, download, and manipulate files from within your application, see Using Cloud Storage.