0

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?

J.L
  • 75
  • 2
  • 10
  • Maybe the answers on this other [post](https://stackoverflow.com/questions/54820986/deploy-create-react-app-on-google-app-engine) from the community can help you. Try with the app.yaml file on the accepted answer. – Daniel Ocando Jun 30 '20 at 15:46
  • Thank you @daniel-ocando, I've read through the post. In order to isolate the problem I've changed the `app.yaml` to only have one `handlers` and the React app is no longer serving through `/`. However.. still to no avail. It's really strange though, looking at the `source` from AppEngine the file exist. Do you reckon that's cause by the runtime? – J.L Jun 30 '20 at 16:13
  • Would you mind updating the actual app.yaml file you are using? Does it include the following handler: ` - url: /(.*\.(json|ico))$ static_files: build/\ upload: build/.*\.(json|ico)$` (Sorry for the formatting, but I would need to write an answer so you can see it correctly.) – Daniel Ocando Jul 01 '20 at 07:22
  • Hi @DanielOcando, no worries on the formatting. The `app.yaml` shared is exactly the file deployed to AppEngine. – J.L Jul 01 '20 at 08:08

2 Answers2

0

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
Daniel Ocando
  • 3,554
  • 2
  • 11
  • 19
  • Finally get to know what's causing the issue. Apparently one of the engineer deployed a `dispatch.yaml` containing a dispatch `- url: */favicon.ico` to the default service. And being new to GCP I've only been looking at the logs in the `react-demo` service instead of the `default`'s log. Thank you so so much for helping out! – J.L Jul 02 '20 at 12:41
  • I'm very glad that you have found out the real reason behind the error. Feel free to post the answer and measures taken in order to help the community. – Daniel Ocando Jul 02 '20 at 12:43
0

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.

J.L
  • 75
  • 2
  • 10