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

So this is the frontend or the backend .yaml file? Also describe your app dir structure. — Dan Cornilescu
This is the .yaml used to upload my code to app-engine. The extract shows the handler portion of the code. The static files are created in <project-root>/frontend/dist folder (and has subfolders with names images/, scripts/, and styles/). Please let me know if I can provide more information. Thanks — navalsaini
Yes this is flex env - I did not realize that I was holding back useful information. — navalsaini

Dan Cornilescu Dan Cornilescu · Accepted Answer · 2017-01-13T14:14:57

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:
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>
Set the ACL to grant read access to items in the bucket.
gsutil defacl set public-read gs://<your-bucket-name>
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.

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

1 Answers