0

Premise / What I want to achieve

I'm deploying a Nuxt.js app in SSR mode on Google App Engine. At the time, the favicon is no longer displayed, so I want to be able to display it.

yarn build + gcloud app deploy

By the way, it was displayed without any problem with the following command.

yarn dev

yarn build + yarn start

Corresponding source code

export default = {  
  head: {
    link: [
      { rel: 'icon',
      type: 'image/x-icon', href: 'images/favicon.ico' }
    ]
  }
}(nuxt.config.js)

runtime: nodejs12

instance_class: F2

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    secure: always

  - url: /(.*\.(gif|png|jpg|ico|txt))$
    static_files: static/\1
    upload: static/.*\.(gif|png|jpg|ico|txt)$
    secure: always

  - url: /sw.js
    static_files: static/sw.js
    upload: static/sw.js

  - url: /.*
    script: auto
    secure: always

  - url: /images/favicon.ico
    static_files: static/images/favicon.ico
    upload: static/images/favicon.ico

  - url: /assets
    static_dir: assets

env_variables:
  HOST: '0.0.0.0'
  PORT: '8080'(app.yaml)

I placed the favicon.ico under the static / images directory.

torish
  • 1

2 Answers2

0

From the command you are running, you do not appear to be declaring the app.yaml file when deploying the app.

yarn build + gcloud app deploy

Try:

gcloud app deploy app.yaml --project [project-id]
Andrew
  • 795
  • 4
  • 18
  • Thank you for your reply! I did gcloud app deploy app.yaml --project [project-id] but the result didn't change. – torish Dec 23 '20 at 00:42
0

Please have a look into the App Engine Official Documentation regarding how to set the Favicon.ico

The Vuejs apps are managed as static websites by App Engine as Vue runs on the front-end.

Therefore you would need to configure the app.yaml to use static files.

app.yaml:


env_variables:
  HOST: "0.0.0.0"
  PORT: "8080"

handlers:
- url: /favicon\.ico
  static_files: static/favicon.ico
  upload: static/favicon.ico

- url: /sw.js
  static_files: static/sw.js
  upload: static/sw.js

- url: /static
  static_dir: public

- url: /.*
  script: auto
  secure: always

Please have a look into the following App Engine documentation for static files in App Engine.

Nibrass H
  • 2,403
  • 1
  • 8
  • 14
  • Thank you for your reply! I changed the code but did not solve it. – torish Jan 08 '21 at 18:53
  • ``` runtime: nodejs12 instance_class: F2 handlers: - url: /favicon\.ico static_files: favicon.ico upload: favicon\.ico - url: /sw.js static_files: sw.js upload: sw.js - url: /assets static_dir: assets - url: /_nuxt static_dir: .nuxt/dist/client secure: always - url: /(.*\.(gif|png|jpg|ico|txt))$ static_files: static/\1 upload: static/.*\.(gif|png|jpg|ico|txt)$ secure: always - url: /.* script: auto secure: always env_variables: HOST: '0.0.0.0' PORT: '8080' ``` – torish Jan 08 '21 at 18:55
  • I did "gcloud app logs tail". "GET /favicon.ico HTTP/1.1" 404 "GET /sw.js HTTP/1.1" 404 – torish Jan 10 '21 at 10:01
  • I have edited my answer, please have a look at it. Could you please tell if your favicon.ico is located in the static directory? Could you please share your App Engine app structure? – Nibrass H Jan 10 '21 at 16:59
  • Please note that the favicon and swj entry should be placed before the entry for the main handler. – Nibrass H Jan 10 '21 at 17:03
  • Also could you please share how are you showing your favicon.ico in your vue.js app. – Nibrass H Jan 10 '21 at 17:14
  • Sorry for contacting you so late. The favicon.ico is directly under the static directory. I have srcDir:'app' in nuxt.config.js set so the static directory is under the app directory. – torish Jan 21 '21 at 06:18
  • handlers: - url: /favicon\.ico static_files: static/favicon.ico upload: static/favicon\.ico - url: /sw.js static_files: static/sw.js upload: static/sw.js - url: /sitemap.xml static_files: static/sitemap.xml upload: static/sitemap\.xml - url: /assets static_dir: /assets - url: /_nuxt static_dir: .nuxt/dist/client secure: always - url: /(.*\.(gif|png|jpg|ico|txt))$ static_files: static/\1 upload: static/.*\.(gif|png|jpg|ico|txt)$ secure: always - url: /.* script: auto secure: always – torish Jan 21 '21 at 06:23
  • Since there is a static directory under the app directory, do I need to change things like -url? – torish Jan 21 '21 at 06:24
  • I have a favicon.ico specified in nuxt.config.js. link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] – torish Jan 21 '21 at 06:27
  • Hello, could you please edit your post with the modified files, so that it is easier to read what you have modified? I also found [this post](https://stackoverflow.com/questions/887328/favicon-ico-not-found-error-in-app-engine) which might help further. – Artemis Georgakopoulou Jan 29 '21 at 11:08