4

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

navalsaini
  • 522
  • 6
  • 20
  • So this is the frontend or the backend `.yaml` file? Also describe your app dir structure. – Dan Cornilescu Jan 13 '17 at 13:35
  • 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 /frontend/dist folder (and has subfolders with names images/, scripts/, and styles/). Please let me know if I can provide more information. Thanks – navalsaini Jan 13 '17 at 13:50
  • 1
    Never mind, I was thinking standard env style... – Dan Cornilescu Jan 13 '17 at 14:16
  • Yes this is flex env - I did not realize that I was holding back useful information. – navalsaini Jan 14 '17 at 08:30

1 Answers1

3

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.

Dan Cornilescu
  • 39,470
  • 12
  • 57
  • 97
  • 1
    I have read that document but it did not help me. I need to route some APIs to flex env server and remaining to CDN (the bucket like above). Are you aware of such an example? I am looking for an example where there are both dynamic and static endpoints. I also tried adding the bucket as static_dir for images, css, etc... but that did not help. – navalsaini Jan 13 '17 at 16:23
  • - url: /styles/(.*\.css)$ <----new---line---> static_files: https ://storage.googleapis.com/bucket_name <----new---line---> **mime_type** This did not work either. Though it was just throwing a dart in the dark. – navalsaini Jan 13 '17 at 16:30
  • 1
    That's invalid even for std env configs - `static_files` can contain a file path pattern (relative to `/`), not a host/domain portion. – Dan Cornilescu Jan 13 '17 at 17:02
  • Follow up question - https://cloud.google.com/appengine/docs/python/config/appref (search for handlers) - on this page it no-where says that the document applies to standard env and not flex environment . Wondering if this document is correct? – navalsaini Jan 14 '17 at 03:40
  • Yes, some of the docs weren't updated to explicitly state the env they apply to (some apply to more than one env!). Some hint to it via their URL path. Some, like this one, hint to it via the left-side doc navigation bar: scroll up and check the 2nd box, below the `Google App Engine/Product Overview/Environments` one. – Dan Cornilescu Jan 14 '17 at 14:32