I'm just getting started with my first app engine site. I followed the hello world sample to get my home page up and running. I added a css file and declared a static handler for it in my app.yaml. Here is the full content:
application: myapp
version: 1
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /css/.*/(.*)
mime_type: text/css
static_files: css/\1
upload: css/(.*)
expiration: "30d"
- url: /.*
script: myapp.app
When I use the Audit feature of the Chrome developer tools, it warns that my CSS file is explicitly non-cacheable. I tried increasing the expiration time, but that didn't help.
Is there anything else I need to do to enable caching for static files? I haven't messed around with any settings in the site dashboard, so it should be using the default settings.
When I run this same test on the SDK against localhost, I get the same warning that none of my CSS is cached and that it's set to be explicitly non-cachable.
When I deploy the app and run the test from .appspot.com, I only get a warning for the jquery CDN link, and all of my CSS files are cached.
Hope this helps.
EDIT: Looks like the files are marked as proxy-cacheable, but I'm still seeing them as non-browser cacheable.
Related
I followed this tutorial: https://cloud.google.com/storage/docs/hosting-static-website to host my React webapp. Here is what I have so far:
// app.yaml
runtime: nodejs10
handlers:
- url: /static
static_dir: build/static
- url: /(.*\.(json|ico|js))$
static_files: build/\1
upload: build/.*\.(json|ico|js)$
- url: /.*
static_files: build/index.html
upload: build/index.html
(I've tried MANY configurations here)
I run npm run build and put the build directory in GCP Cloud Storage along with app.yaml. When I go to my website I get this:
This happens when I hit the root url.
It looks like it is looking at the static directory which should then look at build/static according to my app.yaml.
If I go directly to the webpage such as https://www.drinkingbuddy.io/build/static/js/main.39aaab31.js, the browser displays the file as expected. So it is there being hosted but something is messed up with pathing? I'm not sure.
Testing locally, everything works. Even when serving the build files.
Any guidance would be greatly appreciated! Thank you.
EDIT:
Another thing is that when I go to the base url, it just shows the document tree.
EDIT 2:
When accessing the files directly from the bucket such as https://www.storage.googleapis.com/drinkingbuddy-static/build/index.html, I then get this error:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>UserProjectAccountProblem</Code>
<Message>User project billing account not in good standing.</Message>
<Details>The billing account for the owning project is disabled in state absent</Details>
</Error>
But looking through my account I don't see any billing issues.
EDIT 3:
Now I am able to get to .../build/index.html and it displays my site. but the root / is still throwing errors saying it can't find main.js. I added homepage: "." to my package.json.
I was able to get it to work by doing homepage:"/build". Now I can access the root url and get expected behavior.
I am trying to use the app.yaml in Python 3.8 for Google app engine standard.
My app.yaml looks like this;
handlers:
- url: /static
static_dir: static
- url: /.*
script: auto
I can then access all the files in the directory named "static".
If I then change app.yaml to;
runtime: python38
handlers:
- url: /staticX
static_dir: staticX
- url: /.*
script: auto
If I then try to access any files in "staticX" I get a 404 error.
However I can still access the files in "static". Even a hard refresh gets a 200.
Changing app.yaml has no effect.
This seems to be a matter of caching. According to google documentation static handlers in Google App Engine is cached and, if you do not set value default_expiration, it will be still available in default 10 minutes.
I have done the same test on my side and indeed after redeployment static_dir are still available for around 10m. I noticed that if I start to deploy and redeploy all over again, 10-20 times, sometimes the time seems to be longer than 10m. However, finally, when I check after a few hours, all changes have been available.
I deployed my web on Google Cloud Platform App Engine several times. Using the setting as follows:
app.yaml
runtime: nodejs10
Everything just worked fine when I tested it on the localhost.
But when I deployed it to Google Cloud Platform. The response header always is showing last-modified: Tue, 01 Jan 1980 00:00:01 GMT.
I have checked by [my-web].df.r.appspot.com to make sure that the problem is coming from Google Cloud Platform.
Does anyone have an idea?
Updated 2020-10-07
For anyone facing the same issue, please feel free to join the discussion here.
Apparently, this is behaviour by design as all timestamps are made zero on deploy by app-engine. see: https://issuetracker.google.com/issues/168399701
I was sending the static files myself using express. So I solved it by not setting the etag and last-modified headers. For example:
app.use("/", express.static(root, { etag: false, lastModified: false }));
Or for individual files:
app.get("/*", async (req, res) => {
return res.sendFile("index.html", { root, lastModified: false, etag: false });
});
I had the same problem of old index.html being served. The problem was with the etag that was generated. Even though the files changed, the etag remained the same.
This caused the file to be served from browser's cache with status code 304. The culprit was my app.yaml file, which was
runtime: nodejs10
Changing it to below fixed the issue.
env: standard
runtime: nodejs10
default_expiration: '14d'
handlers:
- url: /static
static_dir: build/static
secure: always
- url: /(.*\.(json|ico))$
static_files: build/\1
upload: build/.*\.(json|ico)$
secure: always
- url: .*
static_files: build/index.html
upload: build/index.html
expiration: '5s'
secure: always
This seems to be a cache caused issue. To ensure that the new index.html is deployed, you would need to run “gcloud beta app deploy --no-cache”, additional fields may need to be added such as app.yaml as mentioned here. This would ensure that the new index.html associated with your version is pushed into the container.
We are experiencing the same issue that previous version of index.html are getting picked up by clients after redeploying an appengine standard app. This problem seemed to start mid-August. We initially found that adding a line to the client HTML file like: seemed to solve the problem. But this is no longer working.
I have an angular js app with following structure
app structure
my app folder look like
app folder
the app does use any back end interaction for now but in future its gonna interact with a separate app engine java project . I want to host this angularjs app to google app engine but I am not able to understand the right configuration . I am more confused how do I set up the app.yaml for google app engine ... and is it necessary to have a main.py file as at present I do not have any handler
If I understand correctly, you would like to host a static web page on app engine, specifically an AngularJS app.
You don't need any server side code and can configure your app.yaml as follows:
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
static_files: www/index.html
upload: www/index.html
- url: /(.*)
static_files: www/\1
upload: www/(.*)
This is assuming you will host your client side code in a www folder and you use a index.html as your index file.
Also take a look at the following guide for hosting a static website [0].
[0] https://cloud.google.com/appengine/docs/standard/python/getting-started/hosting-a-static-website
I have the following yaml file for my Google App Engine website.
application: <my-app-id>
version: 1
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /sitemap.xml
static_files: static/sitemap.xml
upload: static/sitemap.xml
- url: /
static_files: static/index.html
upload: static/index.html
- url: /
static_dir: static
When I test this app using the local server, the file sitemal.xml is accessible by navigating to.
http://localhost:8080/sitemap.xml
However, when I deploy the app, navigating to the following page just redirects me to index.html (it is impossible to download the xml file).
http://<my-domain>.net/sitemap.xml
http://www.<my-domain>.net/sitemap.xml
Why is the local version behaving differently from the deployed version? What can I do to make the file available in the deployed version?
Google App Engine doesn't support naked domains and most likely it's not being redirected correctly. Try accessing it via: http://www.<my-domain>.net/sitemap.xml to see if that works.
It turns out the problem was caused by domain redirection. If I access the application directly, via the following.
http://<app-id>.appspot.com/
Then everything is fine. Apparently something is broken in the way the domain hosting service handles the redirection.