Been pulling my hair trying to figure out why can't favicon.ico loads properly. Needed help from Google Cloud AppEngine gurus.
The project is a React App where gcp-build will generate a build folder with favicon.ico in it.
Consider the following cloudbuild.yaml:
steps:
- name: node:12
args: ["yarn"]
- name: node:12
args: ["yarn", "gcp-build"]
- name: node:12
args: ["rm", "-rf", "node_modules"]
- name: "gcr.io/cloud-builders/gcloud"
args: ["app", "deploy", "--version=mark0"]
timeout: "1600s"
And app.yaml looks like:
service: react-demo
runtime: nodejs12
handlers:
- url: /favicon.ico
static_files: build/favicon.ico
upload: build/favicon.ico
Hitting the page https://react-demo-dot-xxxx-xxxxx.df.r.appspot.com/favicon.ico will always get a 404 error.
Can anyone help please?
To debug if it's an issue with either the Cloud Build steps, the deployment or the runtime itself (notice that the Nodejs 12 runtime is currently in beta), build the React App locally and try to deploy the application directly by using gcloud app deploy, with the following app.yaml file:
runtime: nodejs10
service: react-demo
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: /.*
static_files: build/index.html
upload: build/index.html
Turns out that there's a dispatch.yaml deployed unbeknownst to me using CLI and not committed into codes. In that dispatch.yaml it was directing all */favicon.ico towards default service. One lesson that I've learned is to scour for logs, in this instance, there are no 404 errors logged in the supposed service but it was abundant in the logs of the default service.
Hopefully this would help others in troubleshooting.
Related
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
I'm getting the following error when trying to deploy my app to Google App Engine using gcloud app deploy.
error [INTERNAL]: An internal error occurred while processing task /appengine-flex-v1/insert_flex_deployment/flex_create_resources>2020-05-22T15:14:57.416Z3210.jc.5: Deployment Manager operation thesis-lock/operation-1590160497681-5a63e1799a578-3c148be2-663d8bc4 errors: [code: "RESOURCE_ERROR"
location: "/deployments/aef-flex-20200522t171231/resources/aef-flex-20200522t171231"
message: "{\"ResourceType\":\"compute.beta.regionAutoscaler\",\"ResourceErrorCode\":\"403\",\"ResourceErrorMessage\":{\"code\":403,\"errors\":[{\"domain\":\"usageLimits\",\"message\":\"Exceeded limit \'QUOTA_FOR_INSTANCES\' on resource \'aef-flex-20200522t171231\'. Limit: 8.0\",\"reason\":\"limitExceeded\"}],\"message\":\"Exceeded limit \'QUOTA_FOR_INSTANCES\' on resource \'aef-flex-20200522t171231\'. Limit: 8.0\",\"statusMessage\":\"Forbidden\",\"requestPath\":\"https://compute.googleapis.com/compute/beta/projects/.../regions/europe-west1/autoscalers\",\"httpMethod\":\"POST\"}}"
I've been able to deploy previously without any problems or errors in exactly the same way. I haven't changed my app.yaml. I have checked my quota in the Console yet I can find no quota that have been exceeded. The documentation does not provide any insights.
Any ideas as to what I can do?
I have found some similar questions on SO, but none of them seem to point to this issue specifically and none of the proposed solutions to those questions seem to work.
I have gone through the same. After digging it for 3 days. I found a solution which worked for me. I have opted to use standard environment instead of env: flex (flex environment). I have changed my config file i.e., app.yaml like the following.
a detailed form with each file type.
runtime: python27
threadsafe: true
api_version: 1
handlers:
- url: /(.+\.js)
static_files: app/\1
upload: app/(.+\.js)
- url: /(.+\.css)
static_files: app/\1
upload: app/(.+\.css)
- url: /(.+\.png)
static_files: app/\1
upload: app/(.+\.png)
- url: /(.+\.jpg)
static_files: app/\1
upload: app/(.+\.jpg)
- url: /(.+\.svg)
static_files: app/\1
upload: app/(.+\.svg)
- url: /favicon.ico
static_files: app/favicon.ico
upload: app/favicon.ico
- url: /(.+\.json)
static_files: app/\1
upload: app/(.+\.json)
- url: /(.+)
static_files: app/index.html
upload: app/index.html
- url: /
static_files: app/index.html
upload: app/index.html
If you are going to deploy nodejs application change runtime to nodejs(version) delete threaddSafe and api_version rest are same.
I've uploaded a create-react-app build (with an app.yaml file) to a GCP bucket. The app has then been deployed on a App Engine instance using the cloud shell.
Going to the app's root URL works fine. But going to example.com/anything returns the following error:
Error: Not Found
The requested URL /anything was not found on this server.
App.yaml file looks like this:
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /(.*\.(html|css|js))
static_files: build/\1
upload: build/(.*\.(html|css|js))
- url: /
static_files: build/index.html
upload: build/index.html
You don't have a handler for /anything. If you want a catch-all url, use regex type handler:
- url: /.*
static_files: build/index.html
upload: build/index.html
or, if you want to serve them anything.html as a static file, put it in your build dir, and navigate to /anything.html. Your first handler is set up to map that url.
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