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
Related
After the deployment of my application on Google App Engine every things works like a charm , I can access all pages but when I refresh I receive a 404 error
Example : when refreching https://my-app...appspot.com/create-ad throw 404 not found
I tried
Angular 6 routes not found on Google App Engine
and
How to configure Google App Engine yaml file to handle 404 Error
but same result
This on my app.yml
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
static_files: dist/index.html
upload: dist/index.html
- url: /
static_dir: dist
- url: /.*
static_files: dist/index.html
upload: dist/index.html
skip_files:
- ^.*node_modules(/.*)?
- ^.*json_data(/.*)?
- ^.*e2e(/.*)?
and also tried this app.yml config to redirect all url to index.html
runtime: python27
api_version: 1
threadsafe: false
service: frontend-accept
handlers:
- url: /
static_files: dist/index.html
upload: dist/index.html
- url: /
static_dir: dist
- url: /.*
script: main.py
skip_files:
- ^.*node_modules(/.*)?
- ^.*json_data(/.*)?
- ^.*e2e(/.*)?
this is my main.py
import webapp2
app = webapp2.WSGIApplication()
class RedirectToHome(webapp2.RequestHandler):
def get(self, path):
self.redirect('/dist/index.html')
routes = [
RedirectRoute('/<path:.*>', RedirectToHome),
]
for r in routes:
app.router.add(r)
But always get 404 when refreshing the page
Any help? Thanks
The reason of the 404 HTTP error code is due to this handlers:
- url:
static_dir: dist
As stated in the Google App Engine official documentation, using static_dir: dist causes that all URLs beginning with the / pattern are treated as paths to static files in the /dist directory, so for example every time you call the URL /whatever the application will look for the file /dist/whatever, since it doesn’t exist you get the 404 error.
I believe that the following code will work as you are expecting:
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
static_files: dist/index.html
upload: dist/index.html
- url: /dist/index.html
static_files: dist/index.html
upload: dist/index.html
- url: /.*
script: main.app
skip_files:
- ^.*node_modules(/.*)?
- ^.*json_data(/.*)?
- ^.*e2e(/.*)?
The handler for the / endpoint will serve the dist/index.html file, as well as the /dist/index.html endpoint.
Handlers are checked sequentially and if none of the above handlers have been called then any URL matching the pattern /.* ( which is all of them) will call the main.app script (this will basically override the 404 error message).
This script is redirecting you to the /dist/index.html endpoint, so this is the reason why it needs to be handled in the yaml file.
As a final point I had to import webapp2_extras.routes to use RedirectRoute in the main.py.
finally the solution was to configure the app.yml properly
runtime: python27
api_version: 1
threadsafe: true
skip_files:
- ^(?!dist) # Skip any files not in the dist folder
handlers:
- url: /((?:runtime|main|polyfills|styles|vendor)\.[a-z0-9]+\.js)
secure: always
redirect_http_response_code: 301
static_files: dist/browser/\1
upload: dist/browser/.*
- url: /((?:runtime|main|polyfills|styles|vendor)\.[a-z0-9]+\.js\.map)
secure: always
redirect_http_response_code: 301
static_files: dist/browser/\1
upload: dist/browser/.*
- url: /(styles\.[a-z0-9]+\.css)
secure: always
redirect_http_response_code: 301
static_files: dist/browser/\1
upload: dist/browser/.*
- url: /((?:assets|docs)/.*|favicon\.ico)
secure: always
redirect_http_response_code: 301
static_files: dist/browser/\1
upload: dist/browser/.*
- url: /(manifest\.json|ngsw\.json|ngsw-worker\.js|safety-worker\.js|worker-basic\.min\.js|ngsw_worker\.es6\.js\.map)
secure: always
redirect_http_response_code: 301
static_files: dist/browser/\1
upload: dist/browser/.*
- url: /(.*\.woff)
mime_type: application/x-font-woff
secure: always
redirect_http_response_code: 301
static_files: dist/browser/\1
upload: dist/browser/.*
- url: /.*
secure: always
redirect_http_response_code: 301
static_files: dist/browser/index.html
upload: dist/browser/index\.html
http_headers:
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Frame-Options: DENY
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...
Built a personal blog using jekyll. Everything works well on local host. I do not want to deploy it on github. I prefer hosting on google app engine for some reasons.
I followed some instructions online and copied _site folder generated to my google app engine project.
this is how app.yaml looks like:
application: myblog
version: 1
runtime: python27
api_version: 1
threadsafe: yes
error_handlers:
- file: /404.html
handlers:
- url: /
static_files: _site/index.html
upload: _site/index.html
- url: /(.*)
static_files: _site/\1
upload: _site/(.*)
libraries:
- name: webapp2
version: "2.5.2"
when i run it locally on google app engine, only the index.html and some other files displays. others shows page not found. Is there anything I am not implementing properly ?
Well, I finally figure it out. It is a little trick anyway.
First in your _config.yaml file add:
permalink: /posts/:title/index.html
after that, run jekyll serve to generate the static file in _site folder. Copy the the post folder to _site/ in your app engine project.
Then, in your _config.yaml file change permalink to:
permalink: /posts/:title
run jekyll serve to generate the static file in _site. Copy the entire files generated excluding posts folder into _site/ into your app engine project.
then, make your appengine app.yaml look somewhat like this:
application: myblog
version: 1
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /(.*\.js)
mime_type: text/javascript
static_files: _site/\1
upload: _site/(.*\.js)
- url: /(.*\.(jpg|png|ico))
static_files: _site/\1
upload: _site/(.*\.img)
- url: /(.*\.css)
mime_type: text/css
static_files: _site/\1
upload: _site/(.*\.css)
- url: /(.*\.(eot|svg|svgz|otf|ttf|woff|woff2))
static_files: _site/\1
upload: _site/(.*\.fonts)
- url: /
static_files: _site/index.html
upload: _site/index.html
- url: /(.+)/
static_files: _site/\1/index.html
upload: _site/(.+)/index.html
expiration: "15m"
- url: /(.+)
static_files: _site/\1/index.html
upload: _site/(.+)/index.html
expiration: "15m"
- url: /(.*)
static_files: _site/\1
upload: _site/(.*)
#- url: /((tags)|(archive)|(about)|(posts)|(fonts))/
libraries:
- name: webapp2
version: "2.5.2"
see example for clarification
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
I am receiving a 404 error for every file of my GAE project on the live server and I'm unsure of the next debugging steps
My directory structure is as follows:
| /project
|____ /build
|________ index.php
|________ other_project_files.php
Here are the relevant configuration handlers in app.yaml:
application: alex-young
version: 2
runtime: php
api_version: 1
threadsafe: true
default_expiration: "7d 0h"
skip_files:
- (.*/)?.*/node_modules/.+
- (.*/)?.*/src/.+
- (.*/)?.*/gruntfile\.js
- (.*/)?.*/todo\.txt
handlers:
# - url: /robots.txt
# static_files: robots.txt
# upload: robots.txt
- url: /Alexander\ Young\ -\ Resume.pdf
static_files: build/Alexander\ Young\ -\ Resume.pdf
upload: build/Alexander\ Young\ -\ Resume.pdf
- url: /css
static_dir: build/css
- url: /img
static_dir: build/img
- url: /js
static_dir: build/js
- url: /partials
static_dir: build/partials
application_readable: true
- url: /templates
static_dir: build/templates
application_readable: true
- url: /utils
static_dir: build/utils
application_readable: true
- url: /mustache
static_dir: mustache
application_readable: true
- url: /(.*\.(gif|png|jpg|ico|js|css|eot|svg|ttf|woff))
static_files: \1
upload: (.*\.(gif|png|jpg|ico|js|css|eot|svg|ttf|woff))
- url: /(.+\.php)$
script: build/\1
- url: /
script: build/index.php
The logs simply show a 404 error and no other information. My entire project loads fine on my local machine's MAMP and GAE test servers. I have no idea where to look for errors. Does GAE provide any more details other than Logs?