node.jsを単純なWebサーバーとして使用する


1103

非常にシンプルなHTTPサーバーを実行したい。するためにすべてのGETリクエストexample.comを取得する必要がありindex.html、それにはなく、通常のHTMLページ(あなたは、通常のWebページを読んだときのように、すなわち、同じ経験)を務めていました。

以下のコードを使用して、の内容を読み取ることができます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);

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

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


21
npmモジュール「connect」を見てください。それはそのような基本的な機能を提供し、多くのセットアップと他のパッケージの基礎です。
モーレ

5
あなたはあなたの解決策を答えとして置き、それを正しいとマークするべきです。
graham.reeds

8
私はエリックBによって完璧なソリューションを見つけることができました。Sowell がノードjsから静的ファイルを提供することを呼び出しました。全部読んでください。強くお勧めします。
idophir

1
私が作成したCachemereというモジュールを見てください。また、すべてのリソースを自動的にキャッシュします。github.com/topcloud/cachemere
ジョン

1
local-web-serverはその良い例です
ロイド

回答:


993

最も単純なNode.jsサーバーは次のとおりです。

$ npm install http-server -g

これで、次のコマンドを使用してサーバーを実行できます。

$ cd MyApp

$ http-server

NPM 5.2.0以降を使用している場合は、http-serverをインストールせずに使用できますnpx。これは本番環境での使用は推奨されませんが、localhostでサーバーをすばやく実行するための優れた方法です。

$ npx http-server

または、これを試してWebブラウザーを開き、CORSリクエストを有効にすることができます。

$ http-server -o --cors

その他のオプションについてhttp-server、GitHubドキュメントを確認するか、次のコマンドを実行してください。

$ http-server --help

NodeJitsuへの他のたくさんの素晴らしい機能と頭の痛いほどシンプルな配備。

機能フォーク

もちろん、独自のフォークで機能を簡単に追加できます。このプロジェクトの既存の800以上のフォークの1つですでに行われていることがわかります。

ライトサーバー:自動更新の代替

の良い代替案http-serverlight-serverです。ファイルの監視、自動更新、その他多くの機能をサポートしています。

$ npm install -g light-server 
$ light-server

Windowsエクスプローラーのディレクトリコンテキストメニューに追加する

 reg.exe add HKCR\Directory\shell\LightServer\command /ve /t REG_EXPAND_SZ /f /d "\"C:\nodejs\light-server.cmd\" \"-o\" \"-s\" \"%V\""

シンプルなJSON RESTサーバー

プロトタイププロジェクト用のシンプルなRESTサーバーを作成する必要がある場合は、json-server最適です。

自動更新エディター

ほとんどのWebページエディターとIDEツールには、ソースファイルを監視し、変更時にWebページを自動更新するWebサーバーが含まれています。

Visual Studio CodeでLive Serverを使用しています

オープンソースのテキストエディタブラケットはまた、NodeJS静的なWebサーバーが含まれています。ブラケットでHTMLファイルを開き、「Live Preview」を押すだけで、静的サーバーが起動し、ページでブラウザーが開きます。ブラウザは、HTMLファイルを編集して保存するたびに**自動更新されます。これは、アダプティブWebサイトをテストするときに特に役立ちます。複数のブラウザー/ウィンドウサイズ/デバイスでHTMLページを開きます。HTMLページを保存して、アダプティブスタッフがすべて自動更新するため、アダプティブスタッフが機能しているかどうかを即座に確認します。

PhoneGap開発者

ハイブリッドモバイルアプリをコーディングしている場合、PhoneGapチームがこの自動更新のコンセプトを新しいPhoneGapアプリに搭載したことを知りたいと思うかもしれません。これは、開発中にサーバーからHTML5ファイルをロードできる汎用モバイルアプリです。JS / CSS / HTMLファイルを変更する場合、ハイブリッドモバイルアプリの開発サイクルで遅いコンパイル/デプロイ手順をスキップできるので、これは非常に巧妙なトリックです。これは、ほとんどの場合に行っていることです。また、phonegap serveファイルの変更を検出する静的なNodeJS Webサーバー(run )も提供します。

PhoneGap + Sencha Touch開発者

Sencha TouchとjQuery Mobileの開発者向けにPhoneGap静的サーバーとPhoneGap開発者アプリを大幅に調整しました。Sencha Touch Liveで確認してください。静的サーバーをデスクトップコンピューターからファイアウォールの外側のURLにプロキシする--qr QRコードと--localtunnelをサポートします!たくさんの用途。ハイブリッドモバイル開発者の大幅なスピードアップ。

Cordova + Ionic Framework開発者

ローカルサーバーと自動更新機能がionicツールに組み込まれています。ionic serveアプリフォルダーから実行するだけです。さらに良いionic serve --labことは、iOSとAndroidの両方の自動更新を並べて表示することです。


9
npm install live-server -g 同じことをしたいが、ファイルの変更を検出したときに自動再読み込みを使用する場合

3
1つの小さな「ゴチャ」-。http-serverはデフォルトで0.0.0.0でサイトにサービスを提供します。したがって、あなたはそれがローカルテストセルヴィエとして正しく動作持っているIPアドレスを指定する必要がありますhttp-server -a localhost
JESii

1
はい... 0.0.0.0を指定すると、すべてのIPネットワークデバイス(WiFi、ケーブル、Bluetooth)のすべてのIPにバインドされます。これは、ハッキングされる可能性があるため、パブリックネットワークでは悪い考えです。安全なファイアウォールネットワーク内でアプリをデモして他のユーザーを表示したり、同じネットワーク上のモバイルデバイスに接続したりしても、それほど悪くはありません。
Tony O'Hagan

本当に便利な小さなツール。私のサーバーでは多くのNodeアプリが実行されているので、 "-p"オプションを追加して8080以外のポートを選択します。例:nohup http-server -p 60080&(バックグラウンドで起動し、シェルセッション。)ポートが世界に開かれていることを確認する必要があります。例:iptables -I INPUT 1 -p tcp --dport 60090 -j ACCEPT(多くのLinuxシステム)
Blisterpeanuts

サービスとして実行する方法。コマンドプロンプトを閉じても使用できます。これではないとしても、この種のツールはありますか?
Sandeep

983

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

  1. インストールしてNPMで静的にサーブ

    $ 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


24
教育上の理由から、既存のライブラリを使用しないという考えでしたが、低レベルのバージョンであるConnectよりもExpressを使用することをお勧めします。
idophir 2011

135
静的ファイルを提供するExpressの部分は単なる接続なので、静的ファイルを提供するためにExpressを使用する理由がわかりません。しかし、そうです、Expressもその仕事をします。
Gian Marco Gherardi、2011

7
素晴らしいアドバイス。上記の手順は、私の目的には非常にうまく機能しました。Gianのおかげで、Connect、expressjs.comで構築されていることを示すExpressへのリンクは次のとおり
Jack Stone

10
私にとっては機能しません。結果は/test.htmlを取得できません。__dirnameをディレクトリ名に置き換える必要がありますか?
Timo

3
現在、connectはバージョン3に変更されています。したがって、miqidで説明されているようにserve-staticを使用する必要があります。コネクトv3の完全なコードを含む別の回答を投稿しました。
2014年

160

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

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にそれを使用しているだけであれば、ブラウザーはそれらをうまく推測できます。どのコンテンツタイプも、間違ったコンテンツタイプに勝るものはありません。

通常、content-typeは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");

3
これは実際には「問題」を解決しません。index.htmlをバイナリファイルとして返し、cssとjsを処理しません。
idophir 2012年

4
CSSとJSを処理します。index.htmlをバイナリファイルとして返しません。ディスクからデータをコピーするだけです。フォーマットについては、アップデートを参照してください。
ジョナサントラン

コードの1つの問題、大文字と小文字が区別される、特定のファイルのUNIXでは、404
Pradeep

2
「path.existsおよびpath.existsSyncは非推奨になりました。fs.existsおよびfs.existsSyncを使用してください。」stackoverflow.com/a/5008295/259
David Sykes

3
fs.exists()現在は非推奨となっていることに注意してください。fs.stat()競合状態を作成するのではなく、エラーをキャッチします。
マット

100

急行は必要ありません。接続する必要はありません。Node.jsはhttpをネイティブに実行します。必要なのは、リクエストに応じてファイルを返すことだけです。

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)

3
私が間違っていない場合、このソリューションはエンコーディングタイプを考慮しないため、HTMLページと画像のリクエストは同じエンコーディングを取得します。だよね?
idophir 2014年

2
@idophirほとんどの場合、エンコーディングは重要ではありません。ブラウザは、使用されているhtmlタグやその他の情報に基づいてそれを推測します。上記の誰かのように、MIMEタイプは間違ったタイプよりも優れています。確かにnode-mimeのようなものを使用してファイルのMIMEタイプを把握できますが、完全にWeb準拠のhttpサーバーはこの質問の範囲外です。
BT

1
@Rooster特別なものは必要ありません-単にnode thisfile.js。それは実行され、新しい接続をリッスンし、新しい結果を返します。A。シグナルによってクローズされるか、B。なんらかの異常なエラーが原因でプログラムが終了します。
BT

1
@Rooster評判の別のデーモン化者はgithub.com/Unitech/pm2にあります
Traveling Man

1
私はこの答えが一番好きですが、2つの問題があります。1)404を返す必要があるときに200を返します。修正するには、「open」コールバック内でwriteHead(200)を呼び出します。2)エラーが発生した場合、ソケットは開いたままになります。修正するには、「エラー」コールバックでresponse.destroy()を呼び出します。
ポールブランナン2017

70

私はあなたが今欠けている部分はあなたが送っているということだと思います:

Content-Type: text/plain

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

Content-Type: text/html

早速のお返事ありがとうございます。ページが読み込まれますが、CSSはありません。CSSとJSが読み込まれた標準のHTMLページを取得するにはどうすればよいですか?
idophir

20
そのサーバーの拡張を開始する必要があります。今のところ、それはindex.htmlを提供する方法を知っているだけです-foo.cssとfoo.jsを適切なMIMEタイプで提供する方法を教える必要があります。
クリー

1
静的ファイルを提供したくない場合は、CSSを<style>タグにドロップできます。
キース

1
9年後、これは正解として本当に受け入れられるべきです。
rooch84

46

手順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


@STEEL、ノードサーバーを自動的に起動する方法はありますか?つまり、ディレクトリパスに移動せずにnodeserverと入力すると、それだけが起動します。IISのようにノードサーバーを起動したい。教えていただけますか
-Vinoth、

@Vinothはい、多くの方法があります。あなたの正確な目的や目標は何ですか、私はあなたを助けるかもしれません
STEEL

@steelコマンドpromtでノードサーバーを指定せずにサーバーを自動的に起動したい。これは私の要件です。可能であれば、いくつかの例を教えてください
Vinoth '

ブラウザからクリックするだけでターミナルコマンドを実行できるThoughtWorks GOなどのツールを使用する必要があります。
STEEL 2017

32

速い方法:

var express = require('express');
var app = express();
app.use('/', express.static(__dirname + '/../public')); // ← adjust
app.listen(3000, function() { console.log('listening'); });

あなたのやり方で:

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

http.createServer(function (req, res) {
    console.dir(req.url);

    // will get you  '/' or 'index.html' or 'css/styles.css' ...
    // • you need to isolate extension
    // • have a small mimetype lookup array/object
    // • only there and then reading the file
    // •  delivering it after setting the right content type

    res.writeHead(200, {'Content-Type': 'text/html'});

    res.end('ok');
}).listen(3001);

19

switchステートメントを処理するのではなく、辞書からコンテンツタイプを検索する方が簡単だと思います。

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

...

    var contentType = contentTypesByExtension[fileExtension] || 'text/plain';

はい、Eric B. Sowellが使用した「スイッチ」ソリューションよりもはるかにエレガントに見えます(選択した回答を参照)。ありがとう。
idophir 2011

この回答は完全にコンテキスト外です...このコメント内のこのリンクを参照しています-stackoverflow.com/questions/6084360/…(ええ、何でも、インターネットが壊れています)
Mars Robertson

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がデフォルトとして提供されるように、デフォルトオプションを追加しました。


13

単純なサーバーを実行するためにNPMモジュールを使用する必要はありません。ノード用の「NPM Free Server」と呼ばれる非常に小さなライブラリがあります。

50行のコード。ファイルまたはフォルダーを要求している場合に出力し、機能しなかった場合は赤または緑の色になります。サイズが1KB未満(縮小)。


素晴らしい選択。html、css、js、画像を提供します。デバッグに最適です。このコードをそのままserver.jsに置き換えてください。
pollaris 2017

2
賛成票を増やしたいと思います!これは素晴らしい!distフォルダーvar filename = path.join(process.cwd() + '/dist/', uri); からサーバーに小さな変更を加えました。私はにコードを入れて、それがちょうど働く私が入力したときにserver.jsnpm start
ジョン・ヘンケル

サービスとして実行する方法。コマンドプロンプトを閉じても使用できます。これではないとしても、この種のツールはありますか?
Sandeep

13

PCにノードがインストールされている場合は、おそらくNPMがあり、NodeJSが必要ない場合は、serveパッケージを使用できます。

1-PCにパッケージをインストールします。

npm install -g serve

2-静的フォルダーを提供します。

serve <path> 
d:> serve d:\StaticSite

静的フォルダーが提供されているポートが表示されます。次のようにホストに移動します。

http://localhost:3000

サービスとして実行する方法。コマンドプロンプトを閉じても使用できます。これではないとしても、この種のツールはありますか?
Sandeep

これは受け入れられる答えになるはずです。最も簡単で、そのまま使用できます。したがって、パスなしでサーブのみを実行すると、現在のフォルダー(以前にCDを作成したフォルダー)からサーバーが実行されます。
ИгорРајачић

9

私はnpmで興味深いライブラリを見つけました。これはmime(npm install mimeまたはhttps://github.com/broofa/node-mime)と呼ばれ、ファイルのMIMEタイプを判別できます。これは私がそれを使って書いたウェブサーバーの例です:

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


8

編集:

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

ステップ1

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

ステップ2

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

step3

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

step4

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

これがserver.jsです

ここにutil.jsがあります


5
私は気にしません。index.htmlしかありません。html + css + jsをロードしたいだけです。ありがとう!
idophir

16
.readFileSyncコールバックの場合は-1 。node.jsでは、非ブロッキングIOを使用します。Syncコマンドを推奨しないでください。
レイノス

こんにちは@krmby、助けてくれてありがとう。私はこれで本当に新しいです。server.jsとutil.jsの両方をダウンロードしました。「node server.js」を実行し、ブラウザを使用してページにアクセスしようとすると、次のエラーが発生します。 :67:8 /var/www/hppy-site/util.js:56:4 at [object Object]。<anonymous>(fs.js:107:5)at [object Object] .emit(events.js :61:17)afterRead(fs.js:970:12)atラッパー(fs.js:245:17)任意のアイデア?ところで、私はあなたのプロジェクトをダウンロードして実行したときに同じことが起こっています。
idophir、

1
ごめんなさい。新しいバージョンを使用していました。res.close()をres.end()に置き換えました
idophir

8

私が行う方法は、最初にグローバルにノード静的サーバーをインストールすることです

npm install node-static -g

次に、htmlファイルを含むディレクトリに移動し、静的サーバーをで起動しますstatic

ブラウザに移動し、と入力しlocalhost:8080/"yourHtmlFile"ます。


1
ワンライナーに勝るものはありません。THX!
AndroidDev 2018

サービスとして実行する方法。コマンドプロンプトを閉じても使用できます。これではないとしても、この種のツールはありますか?
Sandeep

7
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>

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最初にインストールします。


6

w3schoolsから

要求されたファイルを提供するノードサーバーを作成するのはかなり簡単で、そのためのパッケージをインストールする必要はありません。

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

http.createServer(function (req, res) {
  var q = url.parse(req.url, true);
  var filename = "." + q.pathname;
  fs.readFile(filename, function(err, data) {
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/html'});
      return res.end("404 Not Found");
    }  
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    return res.end();
  });
}).listen(8080);

http:// localhost:8080 / file.html

ディスクからfile.htmlを提供します



5

以下のコードを使用して、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);

すべてのHTMLコンテンツとともに、すべてのjs、css、画像ファイルをレンダリングします。

間違ったコンテンツタイプに勝るコンテンツタイプはありません」というステートメントに同意します。


5

これがまさにあなたが望んだものであるかどうかはわかりませんが、変更してみることができます:

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

これに:

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

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


1
これはこの既存の回答と同じではありませんか?
2015

4
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'

6
Content-Typeである必要がありtext/html、それはそのように定義される通り、: Content-Type := type "/" subtype *[";" parameter]
t.niese 14年

1
これは、たとえjsであっても、そのフォルダー内のすべてのファイルをhtmlタイプに変換するようです...
ahnbizcad

....素晴らしい作品
ピシャリ桜

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 !")

4

ここにクレイジーな複雑な答えがあります。nodeJSファイル/データベースを処理するつもりはないが、質問が示唆するように静的なhtml / css / js / imagesを提供したい場合は、単にpushstate-serverをインストールしてくださいモジュールまたは類似のものをです。

これはミニサイトを作成して立ち上げる「ワンライナー」です。そのブロック全体をターミナルの適切なディレクトリに貼り付けるだけです。

mkdir mysite; \
cd mysite; \
npm install pushstate-server --save; \
mkdir app; \
touch app/index.html; \
echo '<h1>Hello World</h1>' > app/index.html; \
touch server.js; \
echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './app' });" > server.js; \
node server.js

ブラウザを開き、http:// localhost:3000にアクセスします。できました。

サーバーは、appファイルを提供するルートとしてdir を使用します。追加のアセットを追加するには、それらをそのディレクトリ内に配置するだけです。


2
すでに静力学がある場合は、次のものを使用することができます:npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
Swivel

4

シンプルのためのいくつかの素晴らしいソリューションがすでにありますnodejs serverlive-reloadingファイルに変更を加えたときに必要な場合は、もう1つの解決策があります。

npm install lite-server -g

ディレクトリをナビゲートして行います

lite-server

ライブ再読み込みでブラウザが開きます。


4

Express関数sendFileは必要な機能を正確に実行します。ノードからWebサーバーの機能が必要なため、expressは当然の選択であり、静的ファイルの提供は次のように簡単になります。

res.sendFile('/path_to_your/index.html')

詳細はこちら:https : //expressjs.com/en/api.html#res.sendFile

ノードの高速Webサーバーの小さな例:

var express = require('express');
var app = express();
var path = require('path');

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(8080);

これを実行し、http:// localhost:8080に移動します

これを拡張して、CSSや画像などの静的ファイルを提供できるようにするには、次の例をご覧ください。

var express = require('express');
var app = express();
var path = require('path');

app.use(express.static(__dirname + '/css'));

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(8080);

したがって、cssというサブフォルダーを作成し、静的コンテンツをその中に配置すると、index.htmlで使用できるようになり、次のように簡単に参照できます。

<link type="text/css" rel="stylesheet" href="/css/style.css" />

hrefの相対パスに注意してください!

出来上がり!


3

上記の回答のほとんどは、コンテンツが提供される方法を非常にうまく説明しています。追加で探していたのは、ディレクトリの他のコンテンツを参照できるようにディレクトリのリストを表示することでした。これが、さらなる読者のための私の解決策です。

'use strict';

var finalhandler = require('finalhandler');
var http = require('http');
var serveIndex = require('serve-index');
var serveStatic = require('serve-static');
var appRootDir = require('app-root-dir').get();
var log = require(appRootDir + '/log/bunyan.js');

var PORT = process.env.port || 8097;

// Serve directory indexes for reports folder (with icons)
var index = serveIndex('reports/', {'icons': true});

// Serve up files under the folder
var serve = serveStatic('reports/');

// Create server
var server = http.createServer(function onRequest(req, res){
    var done = finalhandler(req, res);
    serve(req, res, function onNext(err) {
    if (err)
        return done(err);
    index(req, res, done);
    })
});


server.listen(PORT, log.info('Server listening on: ', PORT));

2

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

sudo npm install ripple-emulator -g

それから、あなたのhtmlファイルのディレクトリを入力して実行してください

ripple emulate

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


5
これでNexus 7はどうしますか?
waeltken 2015

2

私が出会った単純なバージョンは次のとおりです。教育目的の場合は、抽象ライブラリを使用しないので最適です。

var http = require('http'),
url = require('url'),
path = require('path'),
fs = require('fs');

var mimeTypes = {
  "html": "text/html",
  "mp3":"audio/mpeg",
  "mp4":"video/mp4",
  "jpeg": "image/jpeg",
  "jpg": "image/jpeg",
  "png": "image/png",
  "js": "text/javascript",
  "css": "text/css"};

http.createServer(function(req, res) {
    var uri = url.parse(req.url).pathname;
    var filename = path.join(process.cwd(), uri);
    fs.exists(filename, function(exists) {
        if(!exists) {
            console.log("not exists: " + filename);
            res.writeHead(200, {'Content-Type': 'text/plain'});
            res.write('404 Not Found\n');
            res.end();
            return;
        }
        var mimeType = mimeTypes[path.extname(filename).split(".")[1]];
        res.writeHead(200, {'Content-Type':mimeType});

        var fileStream = fs.createReadStream(filename);
        fileStream.pipe(res);

    }); //end path.exists
}).listen(1337);

ブラウザに移動して、以下を開きます:

http://127.0.0.1/image.jpg

ここimage.jpgはこのファイルと同じディレクトリにあるはずです。これが誰かを助けることを願っています:)


ファイル名からMIMEタイプを特定するべきではありません。
mwieczorek

注:fs.exists()は非推奨になりました。fs.existsSync()が直接置き換えられます。
JWAspin

@mwieczorekそれはどのように占拠されるべきですか?彼がファイル拡張子を分割しているのを見逃しましたか?
ジェームズニュートン

使用する可能性があります:let mimeType = mimeTypes [filename.split( "。")。pop()] || 「application / octet-stream」
James Newton

1

SugoiJSをお勧めすることもできます。セットアップは非常に簡単で、すぐに書き始めることができ、優れた機能を備えています。

はじめにここをご覧くださいhttp : //demo.sugoijs.com/ 、ドキュメント:https : //wiki.sugoijs.com/

リクエスト処理デコレーター、リクエストポリシー、承認ポリシーデコレーターがあります。

例えば:

import {Controller,Response,HttpGet,RequestParam} from "@sugoi/server";

@Controller('/dashboard')
export class CoreController{
    constructor(){}

    @HttpGet("/:role")
    test(@RequestParam('role') role:string,
         @RequestHeader("role") headerRole:string){
        if(role === headerRole )
            return "authorized";
        else{
            throw new Error("unauthorized")
        }
    }
}

1

今日の膨大な数のライブラリーで非常に簡単です。ここでの回答は機能します。別のバージョンをより速く簡単に開始したい場合

もちろん最初にnode.jsをインストールします。後:

> # module with zero dependencies
> npm install -g @kawix/core@latest 
> # change /path/to/static with your folder or empty for current
> kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js" /path/to/static

ここに「https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js」のコンテンツ(ダウンロードする必要はありません。背後にある仕組みを理解するために投稿しました)

// you can use like this:
// kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express.js" /path/to/static
// kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express.js" 

// this will download the npm module and make a local cache
import express from 'npm://express@^4.16.4'
import Path from 'path'

var folder= process.argv[2] || "."
folder= Path.resolve(process.cwd(), folder)
console.log("Using folder as public: " + folder)

var app = express() 
app.use(express.static(folder)) 
app.listen(8181)
console.log("Listening on 8181")
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.