1221

非常に単純な HTTP サーバーを実行したいと考えています。すべての GET リクエストは、通常の HTML ページ (つまり、通常の Web ページを読むときと同じエクスペリエンス) として提供される必要がありますexample.comindex.html

以下のコードを使用して、の内容を読み取ることができますindex.htmlindex.html通常の Web ページとして機能するにはどうすればよいですか?

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end(index);
}).listen(9615);

get以下の 1 つの提案は複雑で、使用したいリソース (CSS、JavaScript、画像) ファイルごとに1 行書く必要があります。

いくつかの画像、CSS、および JavaScript を含む単一の HTML ページを提供するにはどうすればよいですか?

4

33 に答える 33

1011

:この回答は2011年のものです。ただし、それでも有効です。

これには、Node.js でConnectServeStaticを使用できます。

  1. NPM で connect と serve-static をインストールする

     $ npm install connect serve-static
    
  2. 次の内容で server.js ファイルを作成します。

     var connect = require('connect');
     var serveStatic = require('serve-static');
    
     connect()
         .use(serveStatic(__dirname))
         .listen(8080, () => console.log('Server running on 8080...'));
    
  3. Node.js で実行

     $ node server.js
    

あなたは今行くことができますhttp://localhost:8080/yourfile.html

于 2011-12-08T08:09:13.480 に答える
173

この要点を確認してください。参考までにここに再掲しますが、要点は定期的に更新されています。

Node.JS 静的ファイル Web サーバー。任意のディレクトリでサーバーを起動するためにパスに入れてください。オプションのポート引数を取ります。

var http = require("http"),
    url = require("url"),
    path = require("path"),
    fs = require("fs"),
    port = process.argv[2] || 8888;

http.createServer(function(request, response) {

  var uri = url.parse(request.url).pathname
    , filename = path.join(process.cwd(), uri);

  fs.exists(filename, function(exists) {
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';

    fs.readFile(filename, "binary", function(err, file) {
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      response.writeHead(200);
      response.write(file, "binary");
      response.end();
    });
  });
}).listen(parseInt(port, 10));

console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");

アップデート

Gist は css および js ファイルを処理します。私はそれを自分で使用しました。「バイナリ」モードで読み取り/書き込みを使用しても問題ありません。これは、ファイルがファイル ライブラリによってテキストとして解釈されず、応答で返される content-type とは無関係であることを意味します。

コードの問題は、常に「text/plain」のコンテンツ タイプを返すことです。上記のコードは content-type を返しませんが、HTML、CSS、および JS にのみ使用している場合、ブラウザーはそれらを適切に推測できます。間違ったものほど優れたコンテンツ タイプはありません。

通常、コンテンツ タイプは Web サーバーの構成です。これで問題が解決しない場合は申し訳ありませんが、単純な開発サーバーとして機能し、他の人に役立つかもしれないと考えました. 応答で正しいコンテンツ タイプが必要な場合は、joeytwiddle のように明示的に定義するか、適切なデフォルトを持つ Connect などのライブラリを使用する必要があります。これの良いところは、シンプルで自己完結型 (依存関係がない) ことです。

しかし、私はあなたの問題を感じています。したがって、これが複合ソリューションです。

var http = require("http"),
    url = require("url"),
    path = require("path"),
    fs = require("fs")
    port = process.argv[2] || 8888;

http.createServer(function(request, response) {

  var uri = url.parse(request.url).pathname
    , filename = path.join(process.cwd(), uri);

  var contentTypesByExtension = {
    '.html': "text/html",
    '.css':  "text/css",
    '.js':   "text/javascript"
  };

  fs.exists(filename, function(exists) {
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';

    fs.readFile(filename, "binary", function(err, file) {
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      var headers = {};
      var contentType = contentTypesByExtension[path.extname(filename)];
      if (contentType) headers["Content-Type"] = contentType;
      response.writeHead(200, headers);
      response.write(file, "binary");
      response.end();
    });
  });
}).listen(parseInt(port, 10));

console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");
于 2012-11-29T21:46:01.767 に答える
110

エクスプレスは必要ありません。接続する必要はありません。Node.js は http NATIVELY を行います。あなたがする必要があるのは、リクエストに依存するファイルを返すことだけです:

var http = require('http')
var url = require('url')
var fs = require('fs')

http.createServer(function (request, response) {
    var requestUrl = url.parse(request.url)    
    response.writeHead(200)
    fs.createReadStream(requestUrl.pathname).pipe(response)  // do NOT use fs's sync methods ANYWHERE on production (e.g readFileSync) 
}).listen(9615)    

リクエストがベースディレクトリの下のファイルにアクセスできないようにし、適切なエラー処理を行う、より完全な例:

var http = require('http')
var url = require('url')
var fs = require('fs')
var path = require('path')
var baseDirectory = __dirname   // or whatever base directory you want

var port = 9615

http.createServer(function (request, response) {
    try {
        var requestUrl = url.parse(request.url)

        // need to use path.normalize so people can't access directories underneath baseDirectory
        var fsPath = baseDirectory+path.normalize(requestUrl.pathname)

        var fileStream = fs.createReadStream(fsPath)
        fileStream.pipe(response)
        fileStream.on('open', function() {
             response.writeHead(200)
        })
        fileStream.on('error',function(e) {
             response.writeHead(404)     // assume the file doesn't exist
             response.end()
        })
   } catch(e) {
        response.writeHead(500)
        response.end()     // end the response so browsers don't hang
        console.log(e.stack)
   }
}).listen(port)

console.log("listening on port "+port)
于 2014-10-14T06:59:13.440 に答える
76

あなたが今見逃している部分は、あなたが送っているものだと思います:

Content-Type: text/plain

Web ブラウザーで HTML をレンダリングする場合は、これを次のように変更する必要があります。

Content-Type: text/html
于 2011-05-21T21:11:14.730 に答える
47

ステップ1(コマンドプロンプト内[フォルダにCDを挿入してください]):npm install express

ステップ2:ファイルserver.jsを作成します

var fs = require("fs");
var host = "127.0.0.1";
var port = 1337;
var express = require("express");

var app = express();
app.use(express.static(__dirname + "/public")); //use static files in ROOT/public folder

app.get("/", function(request, response){ //root dir
    response.send("Hello!!");
});

app.listen(port, host);

WATCHFILEを追加する(またはnodemonを使用する)必要があることに注意してください。上記のコードは、単純な接続サーバー専用です。

ステップ3:node server.jsまたはnodemon server.js

単純なHTTPサーバーをホストするだけの場合は、より簡単な方法があります。 npm install -g http-server

ディレクトリを開いて次のように入力しますhttp-server

https://www.npmjs.org/package/http-server

于 2013-02-24T14:44:32.250 に答える
20

switch ステートメントを扱うよりも、辞書からコンテンツ タイプを検索する方が適切だと思います。

var contentTypesByExtension = {
    'html': "text/html",
    'js':   "text/javascript"
};

...

    var contentType = contentTypesByExtension[fileExtension] || 'text/plain';
于 2011-11-24T21:08:21.690 に答える
15

これは基本的に、接続バージョン 3 の受け入れられた回答の更新バージョンです。

var connect = require('connect');
var serveStatic = require('serve-static');

var app = connect();

app.use(serveStatic(__dirname, {'index': ['index.html']}));
app.listen(3000);

index.html がデフォルトとして提供されるように、デフォルト オプションも追加しました。

于 2014-06-20T17:40:46.487 に答える
10

npm で、役に立つかもしれない興味深いライブラリを見つけました。これは mime (npm install mimeまたはhttps://github.com/broofa/node-mime ) と呼ばれ、ファイルの MIME タイプを判別できます。これを使用して作成した Web サーバーの例を次に示します。

var mime = require("mime"),http = require("http"),fs = require("fs");
http.createServer(function (req, resp) {
path  = unescape(__dirname + req.url)
var code = 200
 if(fs.existsSync(path)) {
    if(fs.lstatSync(path).isDirectory()) {
        if(fs.existsSync(path+"index.html")) {
        path += "index.html"
        } else {
            code = 403
            resp.writeHead(code, {"Content-Type": "text/plain"});
            resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
        }
    }
    resp.writeHead(code, {"Content-Type": mime.lookup(path)})
    fs.readFile(path, function (e, r) {
    resp.end(r);

})
} else {
    code = 404
    resp.writeHead(code, {"Content-Type":"text/plain"});
    resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
}
console.log("GET "+code+" "+http.STATUS_CODES[code]+" "+req.url)
}).listen(9000,"localhost");
console.log("Listening at http://localhost:9000")

これは、通常のテキストまたは画像ファイルを提供します(.html、.css、.js、.pdf、.jpg、.png、.m4a、および.mp3は私がテストした拡張子ですが、理論的にはすべてで機能するはずです)

開発者メモ

これで得た出力の例を次に示します。

Listening at http://localhost:9000
GET 200 OK /cloud
GET 404 Not Found /cloud/favicon.ico
GET 200 OK /cloud/icon.png
GET 200 OK /
GET 200 OK /501.png
GET 200 OK /cloud/manifest.json
GET 200 OK /config.log
GET 200 OK /export1.png
GET 200 OK /Chrome3DGlasses.pdf
GET 200 OK /cloud
GET 200 OK /-1
GET 200 OK /Delta-Vs_for_inner_Solar_System.svg

unescapeパス構成の関数に注目してください。これは、スペースとエンコードされた文字を含むファイル名を許可するためです。

于 2014-06-08T01:01:27.243 に答える
9

編集:

Node.js サンプル アプリNode Chatには、必要な機能があります。
その中にREADME.textfile
があります 3. Step はあなたが探しているものです。

ステップ1

  • ポート 8002 で hello world で応答するサーバーを作成します。

ステップ2

  • index.html を作成して提供する

ステップ3

  • util.js を導入する
  • 静的ファイルが提供されるようにロジックを変更します
  • ファイルが見つからない場合は 404 を表示する

step4

  • jquery-1.4.2.js を追加
  • client.js を追加
  • index.html を変更してユーザーにニックネームを要求する

ここにserver.jsがあります

これがutil.jsです

于 2011-05-21T20:57:32.877 に答える
8
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    // change the to 'text/plain' to 'text/html' it will work as your index page
    res.end(index);
}).listen(9615);

私はあなたがこれを探していると思います。index.html に、通常の html コードを入力するだけです。

<html>
    <h1>Hello world</h1>
</html>
于 2014-12-30T09:02:58.487 に答える
7

基本的に受け入れられた回答をコピーしますが、js ファイルの作成は避けます。

$ node
> var connect = require('connect'); connect().use(static('.')).listen(8000);

とても便利でした。

アップデート

最新バージョンの Express では、serve-static は別のミドルウェアになっています。これを使用して提供します。

require('http').createServer(require('serve-static')('.')).listen(3000)

serve-static最初にインストールします。

于 2014-06-17T07:45:24.827 に答える
6

以下のコードを使用して、URL にファイルが記載されていない場合にデフォルトの html ファイルをレンダリングする単純な Web サーバーを起動します。

var http = require('http'),
fs = require('fs'),
url = require('url'),
rootFolder = '/views/',
defaultFileName = '/views/5 Tips on improving Programming Logic   Geek Files.htm';


http.createServer(function(req, res){

    var fileName = url.parse(req.url).pathname;
    // If no file name in Url, use default file name
    fileName = (fileName == "/") ? defaultFileName : rootFolder + fileName;

    fs.readFile(__dirname + decodeURIComponent(fileName), 'binary',function(err, content){
        if (content != null && content != '' ){
            res.writeHead(200,{'Content-Length':content.length});
            res.write(content);
        }
        res.end();
    });

}).listen(8800);

すべての js、css、画像ファイル、およびすべての html コンテンツをレンダリングします。

間違ったものよりも優れたコンテンツタイプはない」という声明に同意する

于 2014-03-24T00:25:34.260 に答える
5

これがまさにあなたが望んでいたものかどうかはわかりませんが、次のように変更してみてください。

{'Content-Type': 'text/plain'}

これに:

{'Content-Type': 'text/html'}

これにより、ブラウザ クライアントはファイルをプレーン テキストではなく html として表示します。

于 2015-08-30T16:31:33.477 に答える
5
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'html'});
res.end(index);
}).listen(9615);

//Just Change The CONTENT TYPE to 'html'
于 2014-03-06T16:30:40.193 に答える
4

local-web-serverは一見の価値があります! readme からの抜粋は次のとおりです。

ローカル Web サーバー

迅速なフルスタック開発のための無駄のないモジュラー Web サーバー。

  • HTTP、HTTPS、および HTTP2 をサポートします。
  • 小型で 100% パーソナライズ可能。プロジェクトに必要な動作のみを読み込んで使用します。
  • カスタム ビューを添付して、アクティビティの視覚化方法をパーソナライズします。
  • プログラムおよびコマンドライン インターフェイス。

このツールを使用して、次のことを行います。

  • あらゆるタイプのフロントエンド Web アプリケーション (静的、動的、シングル ページ アプリ、プログレッシブ Web アプリ、React など) を構築します。
  • バックエンド サービス (REST API、マイクロサービス、websocket、Server Sent Events サービスなど) のプロトタイプを作成します。
  • アクティビティの監視、パフォーマンスの分析、キャッシュ戦略の実験など。

Local-web-server は、便利なミドルウェアの「スターター パック」にバンドルされたlwsのディストリビューションです。

あらすじ

このパッケージは、wsコマンドライン ツールをインストールします (使用ガイドを参照してください)。

静的 Web サイト

ws引数なしで実行すると、現在のディレクトリが静的 Web サイトとしてホストされます。サーバーに移動すると、ディレクトリ リストまたはindex.htmlファイルが存在する場合はそのファイルが表示されます。

$ ws
Listening on http://mbp.local:8000, http://127.0.0.1:8000, http://192.168.0.100:8000

静的ファイルのチュートリアル

このクリップでは、静的ホスティングといくつかのログ出力形式 (devおよびstats.

単一ページのアプリケーション

シングル ページ アプリケーション (React や Angular アプリなどのクライアント側ルーティングを備えたアプリ) の提供は、シングル ページの名前を指定するのと同じくらい簡単です。

$ ws --spa index.html

静的サイトでは、典型的な SPA パス (例: ) に対する要求は/user/1、その場所に存在しないファイルとして/login返されます。404 Not Foundただし、SPA としてマークするindex.htmlと、次のルールが作成されます。

静的ファイルが要求された場合 (例: /css/style.css) はそれを提供し、要求されていない場合 (例: /login)、指定された SPA を提供し、クライアント側のルートを処理します。

スパのチュートリアル

URL 書き換えとプロキシ リクエスト

もう 1 つの一般的な使用例は、特定の要求をリモート サーバーに転送することです。

/posts/次のコマンドは、 toで始まる任意のパスからのブログ投稿リクエストをプロキシしますhttps://jsonplaceholder.typicode.com/posts/。たとえば、 のリクエスト/posts/1は にプロキシされhttps://jsonplaceholder.typicode.com/posts/1ます。

$ ws --rewrite '/posts/(.*) -> https://jsonplaceholder.typicode.com/posts/$1'

チュートリアルを書き直します。

このクリップは、上記に加えて、 を使用し--static.extensionsてデフォルトのファイル拡張子を指定し、--verboseアクティビティを監視する方法を示しています。

HTTPS と HTTP2

HTTPS または HTTP2 の場合は、それぞれ--httpsまたは--http2フラグを渡します。詳しい構成オプションと、ブラウザーで「緑色の南京錠」を取得する方法については、wiki を参照してください。

$ lws --http2
Listening at https://mba4.local:8000, https://127.0.0.1:8000, https://192.168.0.200:8000
于 2019-06-25T10:01:10.447 に答える
4

わずかに冗長な Express 4.x バージョンですが、最小限の行数でディレクトリ リスト、圧縮、キャッシュ、および要求ログを提供します。

var express = require('express');
var compress = require('compression');
var directory = require('serve-index');
var morgan = require('morgan'); //logging for express

var app = express();

var oneDay = 86400000;

app.use(compress());
app.use(morgan());
app.use(express.static('filesdir', { maxAge: oneDay }));
app.use(directory('filesdir', {'icons': true}))

app.listen(process.env.PORT || 8000);

console.log("Ready To serve files !")
于 2014-07-01T14:46:27.100 に答える
2

これは、Web ページをすばやく表示するために使用する最速のソリューションの 1 つです。

sudo npm install ripple-emulator -g

それ以降は、html ファイルのディレクトリを入力して実行するだけです

ripple emulate

次に、デバイスを Nexus 7 ランドスケープに変更します。

于 2015-07-10T21:44:53.590 に答える