web-dev-qa-db-ja.com

koa.jsで静的HTMLファイルを表示する

私がしたいことは、インデックスルート（つまり、localhost：3000）が呼び出されたときにindex.htmlファイルを提供することです。

ルーティングにkoa-routerを使用しているため、ルートは次のようになります。

app.all("/", function * (next){
    //Send the file here
});

私はこのようにkoa-staticを使用しようとしました：

var serve = require('koa-static');
 app.all("/", function * (next){
        serve("index.html");
    });

しかし、それはうまくいきませんでした。次に、共同ビューを使用しようとしました（htmlファイルをパブリックディレクトリに配置しました）。

var views = require("co-views");
var render = views("public");
app.all("/", function * (next){
    this.status = 200;
    this.body = yield render("index.html");
});

しかし、それはうまくいきませんでした。

だから私は何をしなければならないか誰にも教えてもらえますか？

javascriptnode.jskoa
18
tomet

それを行う方法はいくつかありますが、そのうちの2つを示します。

テンプレートエンジン

最も簡単な方法は、おそらく swig または jade のようなテンプレートエンジンを使用してファイルを提供することです。

それをインストールするには：

npm install -s swig

共同ビューでそれを行うには、ただ

var views = require("co-views");
var render = views("public", { map: { html: 'swig' });
app.all("/", function * (next){
  this.body = yield render("index");
});

プレーンファイルシステム

または、テンプレートエンジンを使用したくない場合は、単純なNode File System ライブラリを使用できます。

収量で使用できるようにするには、関数をpromiseでラップする必要があります。

var fs = require('fs');

var readFileThunk = function(src) {
  return new Promise(function (resolve, reject) {
    fs.readFile(src, {'encoding': 'utf8'}, function (err, data) {
      if(err) return reject(err);
      resolve(data);
    });
  });
}

app.use(router.get('/', function *(){
  this.body = yield readFileThunk(__dirname + '/public/htmlfilename.html');
}));

また、koa-staticを使用していて、index.htmlをパブリックフォルダー（koa-staticにリンクするフォルダー）に配置すると、デフォルトで、コードなしのルートURLでindex.htmlが提供されます。これは慣習です。

19
Hugo Dozois

ファイルストリームをコア本体に渡す

これは、プレーンファイルシステムを使用する上記のソリューションに非常に似ていますが、応答本体として読み取り可能なストリームを渡すコア機能を利用します。したがって、必要なのは、ファイルへの読み取り可能なストリームを開いて、それをkoaコンテキスト本文に渡すことだけです。その前に、これがhtmlタイプの応答であることをkoaにヒントを与えます。

import { createReadStream } from 'fs';

public async handle(ctx, next) {
    ctx.type = 'html';
    ctx.body = createReadStream('index.html');
}
13
matiangul

これについては、コアスタティックを使用して

app.all("/", async(ctx, next) => 
  serve(`${__dirname}/public`)(
    Object.assign(ctx, { path: 'index.html' }), 
    next)
  );
2
Gabroe