Google App Engine url path lost with www subdomain - google-app-engine

I just moved a couple of static websites onto Google's App Engine, where, if you want to use your own domain, a www subdomain is required. Both domains are routing correctly, with the exception that one's full url path doesn't get passed on to the subdomain unless a www is typed or present in the link; without www, pages redirect home.
The working site—either link will work:
http://www.synth.tk/daw/
http://synth.tk/daw/
The problem site—only the first link will work; the second redirects to the homepage:
http://www.carolyncaton.com/photos/
http://carolyncaton.com/photos/
Both domains are set up with FreeDNS using the following host records as per Google's instructions:
# | A | 216.239.32.21
# | A | 216.239.34.21
# | A | 216.239.36.21
# | A | 216.239.38.21
www | CNAME | ghs.google.com
And both are using the following app.yaml file:
application: app-name-here
version: 1
runtime: python
api_version: 1
default_expiration: "30d"
handlers:
- url: /(.*\.css)
mime_type: text/css
static_files: static/\1
upload: static/(.*\.css)
- url: /(.*\.html)
mime_type: text/html
static_files: static/\1
upload: static/(.*\.html)
expiration: "1h"
- url: /(.*\.js)
mime_type: text/javascript
static_files: static/\1
upload: static/(.*\.js)
- url: /(.*\.eot)
mime_type: application/vnd.ms-fontobject
static_files: static/\1
upload: static/(.*\.eot)
- url: /(.*\.(svg|svgz))
mime_type: images/svg+xml
static_files: static/\1
upload: static/(.*\.(svg|svgz))
- url: /(.*\.ttf)
mime_type: font/truetype
static_files: static/\1
upload: static/(.*\.ttf)
- url: /(.*\.woff)
mime_type: application/x-font-woff
static_files: static/\1
upload: static/(.*\.woff)
- url: /(.*\.pdf)
mime_type: application/pdf
static_files: static/\1
upload: static/(.*\.pdf)
# image files
- url: /(.*\.(bmp|gif|ico|jpeg|jpg|png))
static_files: static/\1
upload: static/(.*\.(bmp|gif|ico|jpeg|jpg|png))
# index files
- url: /(.+)/
static_files: static/\1/index.html
upload: static/(.+)/index.html
expiration: "15m"
- url: /(.+)
static_files: static/\1/index.html
upload: static/(.+)/index.html
expiration: "15m"
# site root
- url: /
static_files: static/index.html
upload: static/index.html
expiration: "15m"

Using developer console in Chrome (F12, click the "preserve log upon navigation" button) you can see that http://carolyncaton.com/photos/ gets a 302 response to http://www.carolyncaton.com/. Since App Engine doesn't support naked (apex) domains, the problem must be elsewhere. I suggest you check FreeDNS for a setting like 'preserve path'.

Google Appengine does not support 'naked domains', see
http://code.google.com/intl/en/appengine/kb/general.html#naked_domain

Both sites seem to work now. Perhaps it just took a while for the nameserver updates to propagate.

Related

App Engine app.yaml variable subdirectories

Here's my current app.yaml:
runtime: nodejs10
service: default
instance_class: F1
automatic_scaling:
min_instances: 0
max_instances: 2
handlers:
# Serve extension from where they were requested
- url: /(.*\.(css|ico|js|png|jpg|gif|mp4|txt|xml|json))$
static_files: dist/apps/my-app/browser/\1
upload: dist/apps/my-app/browser/.*\.(css|ico|js|png|jpg|gif|mp4|txt|xml|json)$
secure: always
expiration: "365d"
# Handle blog SEO routes
- url: /blog
static_files: dist/apps/my-app/browser/blog/index.html
upload: dist/apps/my-app/browser/blog/index.html
secure: always
expiration: "0s"
- url: /blog/introducing-my-app
static_files: dist/apps/my-app/browser/blog/introducing-my-app/index.html
upload: dist/apps/my-app/browser/blog/introducing-my-app/index.html
secure: always
expiration: "0s"
- url: /blog/added-international-support
static_files: dist/apps/my-app/browser/blog/added-international-support/index.html
upload: dist/apps/my-app/browser/blog/added-international-support/index.html
secure: always
expiration: "0s"
- url: /blog/new-blog-entry
static_files: dist/apps/my-app/browser/blog/new-blog-entry/index.html
upload: dist/apps/my-app/browser/blog/new-blog-entry/index.html
secure: always
expiration: "0s"
# Handle default index.html
- url: /(.*)
static_files: dist/apps/my-app/browser/index.html
upload: dist/apps/my-app/browser/index.html
secure: always
expiration: "0s"
How can I combine the rules under "Handle blog SEO routes" in to one rule? Updating app.yaml with every blog entry is not scalable.
This structure is generated from an Angular Universal Prerender project.
I have tried a few combinations with no luck:
- url: /blog/(.*)
static_files: dist/apps/my-app/browser/blog/\1/index.html
upload: dist/apps/my-app/browser/blog/\1/index.html
secure: always
expiration: "0s"
I think your last try is very close to the actual solution. Please, simply adjust the upload value:
- url: /blog/(.*)
static_files: dist/apps/my-app/browser/\1/index.html
upload: dist/apps/my-app/browser/(.*)/index.html
secure: always
expiration: "0s"
As you can see in the Google Cloud documentation when describing the upload key, you need to provide regex placeholders and not back references in its definition.
Please, consider review similar question here in SO like this one or this other.

Unable to open google app engine application on my custom domain

I have a React + Flask application deployed on Google App Engine and mapped to my custom domain. I deployed a new version 3 days ago, it was working properly until today. On my custom domain, I cannot open some pages. I checked the console, apparently, the application were unable to load the js packages, and one of the error is
GET https://MY_DOMAIN/static/js/main.4eaaa8ad.chunk.js net :: ERR_ABORTED 404.
I also check the App Engine version instance, the MY_PROJECT.appsport.com is working properly.
I was wondering whether I made an error on the app.yaml file or I mapped the DNS incorrectly.
My app.yaml is this :
runtime: python37
env: standard
default_expiration: '5m'
entrypoint: gunicorn -b :$PORT main:app --timeout 150
instance_class: F4
automatic_scaling:
max_instances: 5
min_instances: 1
min_pending_latency: '5s'
target_cpu_utilization: 0.75
inbound_services:
- warmup
handlers:
- url: /static/js/(.*)
static_files: build/static/js/\1
upload: build/static/js/(.*)
- url: /static/css/(.*)
static_files: build/static/css/\1
upload: build/static/css/(.*)
- url: /static/media/(.*)
static_files: build/static/media/\1
upload: build/static/media/(.*)
- url: /(.*\.(json|ico))$
static_files: build/\1
upload: build/.*\.(json|ico)$
- url: /
static_files: build/index.html
upload: build/index.html
- url: /.*
script: auto
I have also noticed that I actually did not set the $PORT environment variable, could this be a potential problem?
Add the static_dir in handlers of your app.yaml to serve the static files of your application:
handlers:
- url: /static
static_dir: build/static/
- url: /static/js/(.*)
static_files: build/static/js/\1
upload: build/static/js/(.*)
- url: /static/css/(.*)
static_files: build/static/css/\1
upload: build/static/css/(.*)
- url: /static/media/(.*)
static_files: build/static/media/\1
upload: build/static/media/(.*)
- url: /(.*\.(json|ico))$
static_files: build/\1
upload: build/.*\.(json|ico)$
- url: /
static_files: build/index.html
upload: build/index.html
- url: /.*
script: auto

Multi-page URL Fallback (index.html & subpage.html)

I'm trying to deploy a multi-page Vue.js app using google apps python engine.
In order for the Vue.js application to work I need all URL's to fallback so the vue javascript router can take over.
Index.html links:
/foo
/bar
/foo/bar
Subpage.html links:
/subpage/foo
/subpage/bar
/subpage/foo/bar
In my current configuration if I remove the wildcard from the index, then the subpage is accessible, but the index links no longer work. Is it possible to achieve multiple fallbacks, first to '/' and second to '/subpage/'?
I've included my app.yaml which, in my opinion should work as written but doesn't.
runtime: python27
api_version: 1
threadsafe: true
handlers:
# Fonts and images
- url: /(.+\.(eot|otf|tt[cf]|woff2?|cur|gif|ico|jpe?g|png|svgz?|webp))
static_files: dist/\1
upload: dist/(.+\.(eot|otf|tt[cf]|woff2?|cur|gif|ico|jpe?g|png|svgz?|webp))
secure: always
http_headers:
Access-Control-Allow-Origin: "*"
# CSS, Javascript, text and other file types
- url: /(.+\.(css|js|xml|txt|map))
static_files: dist/\1
upload: dist/(.+\.(css|js|xml|txt|map))
expiration: "10m"
secure: always
# HTML pages
- url: /(.+\.html)
static_files: dist/\1
upload: dist/(.+\.html)
expiration: '10m'
secure: always
http_headers:
X-UA-Compatible: 'IE=edge'
# Index entry point
- url: /.*
static_files: dist/index.html
upload: dist/index.html
expiration: '10m'
secure: always
http_headers:
X-UA-Compatible: 'IE=edge'
# Subpage entry point
- url: /subpage/.*
static_files: dist/subpage.html
upload: dist/subpage.html
expiration: '10m'
secure: always
http_headers:
X-UA-Compatible: 'IE=edge'
skip_files:
- ^(.*/)?app\.yaml
- ^(.*/)?app\.yml
- ^(.*/)?#.*#
- ^(.*/)?.*~
- ^(.*/)?.*/RCS/.*
- ^(.*/)?\..*
- ^(.*/)?tests$
- ^(.*/)?test$
- ^test/(.*/)?
- ^COPYING.LESSER
- ^README\..*
- \.gitignore
- ^\.git/.*
- \.*\.lint$
- ^node_modules/(.*/)?
- public/*
- src/*
Your problem is that - url: /.* catches EVERYTHING not yet caught. So, the handlers never get to /subpage/.*
Move the /subpage/.* handler above the wildcard - url: /.*:
# Subpage entry point
- url: /subpage/.*
static_files: dist/subpage.html
upload: dist/subpage.html
expiration: '10m'
secure: always
http_headers:
X-UA-Compatible: 'IE=edge'
# Index entry point
- url: /.*
static_files: dist/index.html
upload: dist/index.html
expiration: '10m'
secure: always
http_headers:
X-UA-Compatible: 'IE=edge'

App Engine on page refresh gives 404 for my angular2 project?

The question is very similar to How do I make Angular 2 routing work with App Engine on page refresh? but I do not have enough points to comment and it says not to put questions in answers.
Anyway same problem except it's a static hosted site on appspot with angular cli dist folder being used:
Project
|
+--dist
|
+--index.html
+--inline.js
+--inline.map
+--main.bundle.js
+--main.map
+--styles.bundle.js
+--styles.map
+--app.yaml
+--index.yaml
I tried changing my app.yaml to something similar to Dan's answer linked above but can't work it out? Here is the app.yaml file:
application:
version:
runtime: python27
threadsafe: true
api_version: 1
handlers:
- url: /(.*\.js)
static_files: dist/\1
upload: dist/(.*\.js)
- url: /(.*\.map)
mime_type: application/octet-stream
static_files: dist/\1
upload: dist/(.*\.map)
- url: /
static_files: dist/index.html
upload: dist/index.html
- url: /(.*)
static_files: dist/\1
upload: dist/(.*)
Thanks
try this handlers:
- url: /(.*\.(gif|png|jpg|css|js)(|\.map))$
static_files: dist/\1
upload: dist/(.*)(|\.map)
- url: /(.*)
static_files: dist/index.html
upload: dist/index.html
add file extensions in the first handler if your app uses more.
works for my app...

How do I make Angular 2 routing work with App Engine on page refresh?

I am trying to make an Angular 2 app running on App Engine Standard Environment. It works with the following app.yaml configuration when navigating within the app:
handlers:
- url: /api/.*
script: _go_app
- url: (.*)/
static_files: static\1/index.html
upload: static
- url: (.*)
static_files: static\1
upload: static
I can click on a link from / to /clients or /clients/234234 and it works fine.
However if I refresh the browser in a non base path e.g. http://myapp.appspot.com/clients/234234 then I get a 404 error. I guess I need to serve my index.html from all paths which is what I thought (.*)/ and (.*) would do.
How can I set up my handlers/app so I can use HTML5 routing and not let this happen?
I have a bunch of static files that need to be served so I added their mappings first. I also (most importantly) changed the way index.html was served:
handlers:
- url: /api/.*
script: _go_app
- url: /(.*\.svg)
static_files: static/\1
upload: static/(.*\.svg)
- url: /(.*\.js)
static_files: static/\1
upload: static/(.*\.js)
- url: /(.*\.map)
mime_type: application/octet-stream
static_files: static/\1
upload: static/(.*\.map)
- url: (.*)/
static_files: static/index.html
upload: static
- url: (.*)
static_files: static/index.html
upload: static

Resources