I have created an app in Google App Engine and it's working pretty well in a conventional browser. The main script is called example.py (because I have been hacking off an example and I never changed it). It calls a html file and passes in variables as you would expect.
Now I want to develop a new version that's more suitable for mobile devices. To do this, I wrote a new python script called example_mobile.py. It's similar to example.py except that it calls a different html file with a different stylesheet. Inelegant I know but I thought it would be easy to implement through the app.yaml file.
Here is my app.yaml file:
application: (my application id string)
version: 1
runtime: python
api_version: 1
handlers:
- url: /remote_api
script: $PYTHON_LIB/google/appengine/ext/remote_api/handler.py
login: admin
- url: /stylesheets
static_dir: stylesheets
- url: /javascript
static_dir: javascript
- url: /images
static_dir: images
- url: /mobile/.*
script: example_mobile.py
- url: /.*
script: example.py
www.(my domain name).com pulls up the output from example.py no problem. I was hoping that www.(my domain name).com/mobile would pull up the output from example_mobile.py but it didn't work. Also tried www.mobile.(my domain name).com but no luck. Tried leaving off the /.* at the end of /mobile but that didn't help either. I switched example_mobile.py and example.py to check that it wasn't the python and I got the expected result so there's definitely something wrong with how I'm formatting and using the app.yaml file. Can't seem to find a similar use case in the GAE docs so any help would be much appreciated.
Thanks,
Dessie
To trigger the /mobile/.* route you should visit www.(my domain name).com/mobile/
One simple suggestion is to have a single example.py matched by /.* leaving the routing part to the WSGIApplication class.
application = webapp.WSGIApplication(
[('/mobile', example.MobileHandler),
( '/', example.MainHandler)],
debug=True)
One rule of thumb here is that on app.yaml you should have different routes for different applications or different components.
Is mobile a different application/components or just the same application with a different theme and some lighter features?
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.
We have a web application (frontend) using React created from Create React App. The app is running on Google Cloud Platform App Engine Standard. Our web application is code splitted. Each page is then loaded on user navigation.
It's working really well. The issue we have is for example user A is on the app home page. We deploy a fix that change the chunk file name. The user A then try to access another page and then got the error Loading chunk * failed. The url to get the file is now returning a 404 because the file has been replaced by some new chunk files.
It's a frequent problem as I can see during my research but I didn't find a solution that apply for Google App Engine.
Here's an article that explain the problem / solution: https://mitchgavan.com/code-splitting-react-safely/
I would like to use the solution "Solution 1: Keep old files on your server after a deployment" but I can't see how to do this using GCP ...
Here's the app.yaml file
service: frontend
runtime: nodejs14
env: standard
instance_class: F1
handlers:
- url: /(.*\..+)$
static_files: build/\1
upload: build/(.*\..+)$
- url: /.*
static_files: build/index.html
upload: build/index.html
We have the following dispatch file (* for masked url)
dispatch:
- url: "*"
service: frontend
- url: "www.*"
service: frontend
Haven't tried this before but see if it makes sense/works.
We have a blog article about downloading your source code from GAE. It contains an explanation of where your source is stored when you deploy (a staging bucket), how long it stays there and how you can modify how long it stays before Google automatically deletes it.
When you deploy to GAE, gcloud only deploys files that have changed (it doesn't deploy those that haven't). Since you now have 'new' files because new hashes were generated, the older files no longer exist on your local machine. I do not know if Google will automatically delete those files from the staging location in bullet 1 above.
My proposal here is that you follow the steps in the blog article (from bullet 1) and alter (change) how long the files are retained in your staging bucket. Another option is to check the retention policy tab and see if you can change the rule so the files don't get deleted. If you're able to alter how long the files remain or the retention policy, it just might solve your problem. Let me know if this works
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 have an Angular site hosted in Google App Engine using the Python27 runtime in a standard env.
When someone visits my site www.site.com I want them automatically redirected to www.site.com/app. For reasons, I cannot do within the index.html file.
(For an explanation why and reason for doing so, see this question Renaming the index.html on Google App Engine)
In my app, I have tried things like
- url: /
mime_type: text/html
static_files: dist/app/index.html
upload: dist/app/index.html
expiration: 0s
For reasons that seem obvious to me now, this won't work as it does not rewrite the URL for the user. It doesn't seem there is a solution to rewrite rules similar to and .htaccess file. I understand this is arguably a better solution but not what I need to do right now.
Is there a setting in the Google App Engine that I am missing?
Is there an attribute in the app.yaml file that I am overlooking?
Thank you for your help
I am looking to discover the best possible practice for building up a file tree inside a GAE/python.
It seems rather efficient to keep everything in one file and route everything there via WSGI.
Though for a complex and multifaceted site it makes sense to have distinct files serving different purposes.
I ran into some weird complications when I had many urls listed in the app.yaml
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: /unit3.*
script: unit3.app
- url: /birthday.*
script: birthday.app
- url: /signup.*
script: signup.app
- url: /rot13.*
script: rot13.app
- url: /welcome.*
script: signup.app
- url: .*
script: main.app
libraries:
- name: webapp2
version: "2.5.1"
- name: jinja2
version: latest
and then having to duplicate those paths in separate .py files
app = webapp2.WSGIApplication([('/signup',SignUpHandler),
('/welcome',WelcomeHandler),
('/signup/.*', NotFoundPageHandler)]
,debug=True)
Is it weird that I think having to detail the routing of the url twice or more is cumbersome? Is there a way to have distinct files (html, css, py, js) and then have the app.yaml connect all the dots with the routing?
Best way to go is use webapp2 framework, routing is very simple there.
You can then just define urls.py and add routes there.
http://webapp-improved.appspot.com/
Routing in webapp.
http://webapp-improved.appspot.com/api/webapp2.html#uri-routing
Here is boilerplate code to get you started.
https://github.com/coto/gae-boilerplate