web-dev-qa-db-ja.com

Iron Routerを使用して静的コンテンツ(画像、フォントなど)を提供する方法

私は流星の鉄のルーターで働き始めたばかりです。ホームページに画像を表示する必要があります。クライアント側のルーティングを使用して、「ホーム」のルートを構成できました。静的ファイルの場合、グーグルで検索してみましたが、サーバー側のルートを追加すると役立つことがわかりました。そこで、サーバーのrouter.jsに次のコードを追加しました。

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);
        }
    });
});

http://localhost:3000/files/someImage.pngにアクセスしようとすると、/files/someImage.pngのルートが定義されていないと表示されます。私は何か間違っていますか? Iron Routerを使用して静的ファイルを提供する他の方法はありますか?

29
Goje87

これをすべて行う代わりに、ファイルをpublicディレクトリの下に置くことができます。ファイルを追加する場合:

myApp/public/images/kitten.png

次のようなテンプレートからアクセスできます。

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

それを機能させるためにルートは必要ありません。

リードスラッシュを見落とすことに注意してください。

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

上記の例は、/ books/pagesで失敗するのを簡単にするために、/ booksのようなトップレベルのルートで動作します。

61
David Weldon

おそらく、ルートがクライアントとサーバーの両方で見える共通エリアにあることを確認し(このルートは実際にサーバーで実行されます)、where: 'server'を指定する必要があります。さらに、実際のファイルをディスクからロードする必要があります。つまり、サーバー上のファイルへの実際のパスが必要であり、「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);
    }
  });
});

いくつかの注意事項:実際のダウンロードコードをサーバーのみの関数に移動し、代わりに呼び出して、関数に応答を渡す必要があります。

また、パスの検証を行って、サーバー上のファイルを誰もが勝手にダウンロードできないようにする必要があります。

さらに、これはコンテンツタイプを明示的に設定します。これはおそらく画像に対して行いますが、他のコンテンツタイプに対しては行わない場合があります。ジェネリック型の場合は、application/octet-streamに設定できます

もちろん、既に述べたように、展開時に静的コンテンツを利用できるようにすることが唯一の目標である場合は、/publicディレクトリを使用する必要があります。

5
MrMowgli

これは iron-routerのバグ であり、修正されたと言われていますが、私はまだ問題に遭遇しており、他の人はgithubの問題についてそれがまだ問題であると報告しています。

編集:/ publicに直接あるファイルでは機能するようですが、/ public内のフォルダー内のファイルでは機能しないようです。

4
foobarbecue