es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

App Engine no está sirviendo imágenes de la carpeta pública en React.

Hospedé una aplicación React en App Engine y tengo muchas imágenes en la carpeta pública que se muestran correctamente en mi máquina local, pero cuando la intento desplegar en el entorno estándar, todos los archivos son desplegados. Revisé las fuentes en las URL de las imágenes y las sirve, pero parecen estar dañadas (cuando las descargo). Tal vez hice algo mal en la configuración? Lo único a lo que puedo acceder es el favicon. Esto es lo que obtengo en la fuente.

source image

Mi app.yaml es:

runtime: nodejs12   
service: default   
instance_class: F4_1G
handlers:
  - url: /static
    static_dir: build/static

  - url: /assets
    static_dir: build/assets

  - url: /(.*\.(json|ico|js))$
    static_files: build/\1
    upload: build/.*\.(json|ico|js)$

  - url: .*
    static_files: build/index.html
    upload: build/index.html
Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Parece ser que el problema está en la forma en que se están sirviendo las imágenes en el archivo app.yaml. Si bien se especifican los directorios estáticos para /static y /assets, no hay un directorio especificado para las imágenes.

    Una solución sería agregar otro directorio estático para las imágenes en el archivo app.yaml, como este:

    handlers:
       - url: /static
        static_dir: build/static
    
       - url: /assets
        static_dir: build/assets
    
       - url: /images
        static_dir: build/public/images
    
      - url: /(.*\.(json|ico|js))$
        static_files: build/\1
        upload: build/.*\.(json|ico|js)$
    
      - url: .*
        static_files: build/index.html
        upload: build/index.html
    

    Aquí, estamos especificando un directorio estático para /images que apunta a las imágenes en la carpeta public/images de la aplicación. Esto debería garantizar que las imágenes se sirvan correctamente en el entorno estándar del motor de aplicaciones al ser implementadas.

Comments are closed.