meteor - Cómo servir contenido estático(imágenes, fuentes, etc.) usando un enrutador de hierro

meteorite iron-router

Question

Empecé a trabajar con un enrutador de hierro en meteoro. Necesito mostrar una imagen en la página de inicio. Pude configurar la ruta para ''inicio'' usando el enrutamiento del lado del cliente. Para los archivos estáticos intenté googlear y descubrí que agregar una ruta del lado del servidor podría ayudar. Entonces, agregué el siguiente código en el router.js del servidor.

Router.map(function() {
    this.route(''files'', {
        path: ''/files/:path(*)'',
        action: function() {
            var path = this.params.path;

            console.log(''will serve static content @ ''+path);
            this.response.sendfile(path);
        }
    });
});

Cuando intento acceder a http://localhost:3000/files/someImage.png , dice que no se define ninguna ruta para /files/someImage.png . ¿Estoy haciendo algo mal? ¿Hay alguna otra manera de servir archivos estáticos usando el enrutador de hierro?

Answer 1

En lugar de hacer todo esto, puede poner los archivos debajo de su directorio public . Si agrega el archivo:

myApp/public/images/kitten.png

Puede acceder desde sus plantillas como:

<img src="/images/kitten.png">

No se necesitan rutas para que funcione.

Tenga cuidado con pasar por alto el corte de plomo.

<img src="images/kitten.png">

el ejemplo anterior funcionará desde las rutas de nivel superior como / books, lo que hace que sea fácil pasar por alto, pero falla en / books / pages.

Answer 2

Este es un error en el enrutador de hierro , que dicen que es fijo, pero todavía estoy encontrando el problema y otros han informado sobre ese problema de github que todavía es un problema.

Editar: parece funcionar para archivos que están directamente en / public, pero no para archivos en carpetas dentro / public.

Answer 3

Probablemente solo deba asegurarse de que la ruta esté en un área común visible tanto en el cliente como en el servidor (Esta ruta se ejecuta realmente en el servidor) y especifique where: ''server'' . Además, tenemos que cargar el archivo real fuera del disco, lo que significa que necesitamos la ruta real en el servidor para el archivo, y tenemos que cargar la ''fs''.

var fs = Npm.require(''fs'');

Router.map(function() {
  this.route(''files'', {
    path: ''/files/:path(*)'',
    where: ''server'',
    action: function() {
        var path = this.params.path;
        var basedir = ''~/app/'';

        console.log(''will serve static content @ ''+ path);

        var file = fs.readFileSync(basedir + path);

      var headers = {
        ''Content-type'': ''image/png'',
        ''Content-Disposition'': "attachment; filename=" + path
      };

      this.response.writeHead(200, headers);
      return this.response.end(file);
    }
  });
});

Un par de notas: probablemente deba mover el código de descarga real a una función de solo servidor y llamarlo en su lugar, pasando la respuesta a la función.

También debe hacer una validación de la ruta para que no permita que nadie descargue archivos arbitrariamente en su servidor.

Además, esto configura el tipo de contenido de forma explícita, lo que es probable que desee hacer para las imágenes, pero tal vez no para otros tipos de contenido. Para un tipo genérico puede configurarlo en application/octet-stream

Por supuesto, como se mencionó, si su único objetivo es tener algún contenido estático disponible en el momento del despliegue, solo debe usar el directorio /public .