Google App Engine serves static CSS files with wrong mime-type

user_416631 0
Viewed 536

I've been working on a new site to be hosted on Google App Engine. I've been deploying my app to a development project and it is hosted here:

Development: https://herdboss-dev.appspot.com/

It works fine.

But when I take the exact same code and deploy it to my other project which going to be the real, production website, it is serving some of the css as application/octet-stream instead of text/css and so those files aren't being parsed by the browser, so almost all of my css is not working on the production site:

Production: https://herdboss-prod.appspot.com/

Even weirder is that SOME of the css is being served correctly. /css/normalize.css is being served as text/css but /css/site.css is being served as application/octet-stream.

https://herdboss-prod.appspot.com/css/normalize.css

https://herdboss-prod.appspot.com/css/site.css

https://herdboss-prod.appspot.com/js/jquery-ui-1.12.1.custom-theme/jquery-ui.min.css

My app.yaml has a static handler for css files:

- url: /css
  static_dir: css
  secure: always

I tried adding a mime_type as well but that didn't change anything:

- url: /css
  static_dir: css
  mime_type: 'text/css'
  secure: always

EDIT:

While experimenting, I cut my site.css in half, deployed, and then it started serving correctly. Then I reinstated the full size site.css, deployed... and it's still serving properly now.

But my jquery-ui.min.css is still serving as octet-stream. This is crazy.

EDIT2:

And it's serving my svg's with the wrong mime type as well.

Is mime-typing just utterly broken in the GAE? If so, why is it working on my dev gae?

google-app-engine mime-types
2 Answers

My solution was:

  1. duplicate the offending file and rename it
  2. change one byte (otherwise it will not be uploaded/updated)
  3. verify that it downloads as stylesheet
  4. use the renamed, changed css file in your html
  5. Wait for the original to get served correctly: after about 24h the problem fixed itself

There is an issue on the GAE issue tracker: https://issuetracker.google.com/issues/186012458

Initially, I tested a workaround but this workaround broke after a day: I modified my HTML to load the stylesheets from a version server basically cross-site as (hxxps://VERSION-dot-SERVER.appspot.com/static/stylesheet.css). The version server served the correct mime-type ... but only for some time.

I suspect the problem is a wrong mime-type due to an extremely rare race condition (cache access/refresh during upload?). It is simply not possible to trick the Google Frontend to refresh the file. Even appending .../styles.css?x=1 or switching back to an older code version will not trigger a refresh.

Files and their mime-types seem to be stored based on their hashed-values, so re-upload of a file with the same content has no effect even if it is simply renamed. You will see an "uploaded 0 files" message if you deploy a version with a duplicate file. It has to be changed and renamed.

user_7121240

I did check both of your sites: https://herdboss-prod.appspot.com/, https://herdboss-prod.appspot.com/

I can see that you have several CSS files: normalize.css, jquery-ui.min.css, base-min.css, grids-min.css, grids-responsive-custom.css, css?family=Open+Sans, site.css, ie-is-terrible.css, css_compiled.css.

All of them served correctly as Type: stylesheet

If you encounter this problem I recommend performing following test:

  1. Check content type in Developer Console > Network with the option Disable Cache > And reload page. If it helps: clean cache of the browser.
  2. Check content of the page in different browser, as content can be interpreted differently depending on the rendering engine.
  3. If 1 and 2 does not work, and you are using nginx, it is most probably configuration problem. Change the file /etc/nginx/conf.d/default.conf. Put /etc/nginx/mime.types in the 'http' section:
http / {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    ....
}

if it is still not working, move it to location section

location / {
 include       /etc/nginx/mime.types;
 ...
}
user_111351590
Related