web-dev-qa-db-ja.com

Node.jsクイックファイルサーバー（HTTP経由の静的ファイル）

Node.jsのすぐに使えるツール（npmと一緒にインストールされる）はありますか、それは私がHTTP上でファイルサーバーとしてフォルダーの内容を公開するのを助けます.

例、私が持っている場合

D:\Folder\file.Zip
D:\Folder\file2.html
D:\Folder\folder\file-in-folder.jpg

それからD:\Folder\node node-file-server.jsで始めて私はファイルにアクセスすることができます

http://hostname/file.Zip
http://hostname/file2.html
http://hostname/folder/file-in-folder.jpg

自分のノードの静的ファイルサーバーが要求をドロップしているのはなぜですか？ いくつかの神秘的な参照

標準node.js静的ファイルサーバ

そのようなツールがない場合は、どのフレームワークを使用すればいいですか？

関連： NodeJSの基本的な静的ファイルサーバ

node.jshttpfileserver
518
Paul Verest

良い「すぐ使えるツール」オプションはhttp-serverでしょう。

npm install http-server -g

使用するには：

cd D:\Folder
http-server

または、このように：

http-server D:\Folder

それをチェックアウト： https://github.com/nodeapps/http-server

892
Matt Self

準備完了ツールを使用したくない場合は、 https://developer.mozilla.org/en-US/docs/Node_server_without_framework で説明されているように、以下のコードを使用できます。

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

http.createServer(function (request, response) {
    console.log('request starting...');

    var filePath = '.' + request.url;
    if (filePath == './')
        filePath = './index.html';

    var extname = path.extname(filePath);
    var contentType = 'text/html';
    switch (extname) {
        case '.js':
            contentType = 'text/javascript';
            break;
        case '.css':
            contentType = 'text/css';
            break;
        case '.json':
            contentType = 'application/json';
            break;
        case '.png':
            contentType = 'image/png';
            break;      
        case '.jpg':
            contentType = 'image/jpg';
            break;
        case '.wav':
            contentType = 'audio/wav';
            break;
    }

    fs.readFile(filePath, function(error, content) {
        if (error) {
            if(error.code == 'ENOENT'){
                fs.readFile('./404.html', function(error, content) {
                    response.writeHead(200, { 'Content-Type': contentType });
                    response.end(content, 'utf-8');
                });
            }
            else {
                response.writeHead(500);
                response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
                response.end(); 
            }
        }
        else {
            response.writeHead(200, { 'Content-Type': contentType });
            response.end(content, 'utf-8');
        }
    });

}).listen(8125);
console.log('Server running at http://127.0.0.1:8125/');

UPDATE外部のデマンド/ファイルからサーバーにアクセスする必要がある場合、node.jsファイルでCORSを克服する必要があります。以下、前の回答で述べたように here

// Website you wish to allow to connect
response.setHeader('Access-Control-Allow-Origin', '*');

// Request methods you wish to allow
response.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

// Request headers you wish to allow
response.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
response.setHeader('Access-Control-Allow-Credentials', true);

UPDATE

Adrianがコメントの中で述べたように、彼は完全な説明でES6コードを書きました here 、何らかの理由でコードが元のサイトからなくなった場合に備えて、私は彼のコードを以下に再投稿しています：

const http = require('http');
const url = require('url');
const fs = require('fs');
const path = require('path');
const port = process.argv[2] || 9000;

http.createServer(function (req, res) {
  console.log(`${req.method} ${req.url}`);

  // parse URL
  const parsedUrl = url.parse(req.url);
  // extract URL path
  let pathname = `.${parsedUrl.pathname}`;
  // based on the URL path, extract the file extention. e.g. .js, .doc, ...
  const ext = path.parse(pathname).ext;
  // maps file extention to MIME typere
  const map = {
    '.ico': 'image/x-icon',
    '.html': 'text/html',
    '.js': 'text/javascript',
    '.json': 'application/json',
    '.css': 'text/css',
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.wav': 'audio/wav',
    '.mp3': 'audio/mpeg',
    '.svg': 'image/svg+xml',
    '.pdf': 'application/pdf',
    '.doc': 'application/msword'
  };

  fs.exists(pathname, function (exist) {
    if(!exist) {
      // if the file is not found, return 404
      res.statusCode = 404;
      res.end(`File ${pathname} not found!`);
      return;
    }

    // if is a directory search for index file matching the extention
    if (fs.statSync(pathname).isDirectory()) pathname += '/index' + ext;

    // read file from file system
    fs.readFile(pathname, function(err, data){
      if(err){
        res.statusCode = 500;
        res.end(`Error getting the file: ${err}.`);
      } else {
        // if the file is found, set Content-type and send data
        res.setHeader('Content-type', map[ext] || 'text/plain' );
        res.end(data);
      }
    });
  });


}).listen(parseInt(port));

console.log(`Server listening on port ${port}`);
167
Hasan A Yousef

NodeJSスクリプト内からサーバーを実行可能にしたい場合は、次のようにします。

connect.staticの代わりに expressjs/serve-static を使用することができます（これはconnect 3では使用できなくなりました）。

myapp.js:

var http = require('http');

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

var serve = serveStatic("./");

var server = http.createServer(function(req, res) {
  var done = finalhandler(req, res);
  serve(req, res, done);
});

server.listen(8000);

そしてコマンドラインから：

  • $ npm install finalhandler serve-static
  • $ node myapp.js
73
jakub.g

Nodeではないことは知っていますが、私はPythonのSimpleHTTPServerを使用しました。

python -m SimpleHTTPServer [port]

それはうまく機能し、Pythonに付属しています。

51
Matt Sergeant

connect はあなたが探しているものかもしれません。

で簡単にインストール：

npm install connect

それから最も基本的な静的ファイルサーバは次のように書くことができます。

var connect = require('connect'),
    directory = '/path/to/Folder';

connect()
    .use(connect.static(directory))
    .listen(80);

console.log('Listening on port 80.');
33
Oleg

Npmを使用してexpressをインストールします。 https://expressjs.com/en/starter/installing.html

このコンテンツを使用して、index.htmlと同じレベルにserver.jsという名前のファイルを作成します。

var express = require('express');
var server = express();
server.use('/', express.static(__dirname + '/'));
server.listen(8080);

別の場所に配置する場合は、3行目にパスを設定してください。

server.use('/', express.static(__dirname + '/public'));

ファイルを含むフォルダにCDをコピーし、次のコマンドでコンソールからノードを実行します。

node server.js

Localhostをブラウズ：8080

13
pasx

デモ/プロトサーバーのみ

それだけで十分な場合は、これを試してください。

const http = require('http');
const fs = require('fs');
const port = 3000;
const app = http.createServer((req,res) => {
    res.writeHead(200);
    if (req.url === '/') req.url = '/index.html'; // courtesy of @JosephCho
    res.end(fs.readFileSync(__dirname + req.url));
});

app.listen(port);

注：アドレスの一部として "/index.html"を使用する必要があります。つまり " http：// localhost：3000/index.html "

11
Jacksonkr

約束ではなくOne-line™プルーフ

enter image description here

最初のものはhttp-server、hs - link です。

npm i -g http-server   // install
hs C:\repos            // run with one line?? FTW!!

2番目はZEIT.coによるserveです - link

npm i -g serve         // install
serve C:\repos         // run with one line?? FTW!!

これがあなたが決めるのを助けるものであるならば、以下は利用可能なオプションです。

 C：\ Users\Qwerty> http-server --help 
使用法：http-server [path] [options] 
 
 options：
 ] -p使用するポート[8080] 
 -a使用するアドレス[0.0.0.0] 
 -dディレクトリリストを表示する[true] 
 -i autoIndexを表示する[true] [ [false] 
 -e --ext何も指定されていない場合のデフォルトのファイル拡張子[none] 
 -s --silentログメッセージを表示しないoutput 
 --cors [= headers] "Access-Control-Allow-Origin"ヘッダーを使用してCORSを有効にします
オプションで、カンマで区切ったCORSヘッダーリストを提供します
 -o [path]サーバの起動後にブラウザウィンドウを開く
 -c秒単位のキャッシュ時間（max-age）[3600]、例えば-c10 10秒間
キャッシングを無効にするには、-c-1を使用します
 -U --utcログメッセージにUTC時刻形式を使用します
 
  - P --proxy要求を解決できない場合はフォールバックプロキシ。例：http://someurl.com 
 
 -S --ssl https。
 -C --certを有効にするssl証明書ファイルへのパス（デフォルト：cert.pem）。 
 -K --key sslキーファイルへのパス（デフォルト：key.pem）
 
 -r --robots /robots.txtに応答します[User-agent：*]\n無効：/]
 -h --helpこのリストを印刷して終了します。
 C：\ Users\Qwerty> serve --help 
 
使用法：serve.js [options] [command] 
 
コマンド：[ help [[]] [[]]オプションを表示します[[]] [[]] -a、 -  auth基本認証の後ろに表示します[[]]  - c、--cacheブラウザにファイルをキャッシュする時間（ミリ秒）
 -n、--cliplessアドレスをクリップボードにコピーしません（デフォルトでは無効）
 -C、--cors Setup *任意のOriginからのリクエストを許可するCORSヘッダ（デフォルトでは無効）
 -h、--help使用法の情報を出力する
 -i、--ignore無視するファイルとディレクトリ
 -o 、--openブラウザでローカルアドレスを開く（デフォルトでは無効）
 -p、--port待機するポート（デフォルトは5000）
 -S、--silent何も記録しません。コンソールへ
 -s、--singleシングルページアプリケーションを提供します（ `-c`を1日に設定します）
 -t、--treeless統計ツリーを表示しません（デフォルトでは無効です） 
 -u、 -  unzipped GZIP圧縮を無効にする
 -v、--versionバージョン番号を出力する

変更を監視する必要がある場合は、 hostr 、credit Henry Tsengの回答 を参照してください。

9
Qwerty

ブラウザ同期という、とてもいいWebサーバがもう1つあります。

ノードパッケージマネージャを使用してダウンロードできます。

npm install -g browser-sync

インストールが完了したら、cmdプロンプトでプロジェクトフォルダに移動して、次のコマンドを実行してください。

browser-sync start --server --port 3001 --files="./*"

ブラウザの現在のフォルダにあるすべてのファイルの作成が開始されます。

BrowserSync からより多くのことを見つけることができます

ありがとう。

8
Samrat Debroy

ここ は私のone-file/lightweight node.js静的ファイルweb-server petプロジェクトで、依存性のないもので、Linux上でこのコマンドを発行するのと同じくらい簡単に使える迅速でリッチなツールだと思います。 node.js（またはDebian/Ubuntuの場合はnodejs-legacy）がインストールされている場合は、/ Unix/macOS端末（またはAndroidの場合は termux ）：

curl pad.js.org | node

（Windowsユーザー向けの資料にはさまざまなコマンドがあります）

それは私が有用であると思うことができると信じるさまざまなことを支持します、

  • 階層ディレクトリインデックスの作成/提供
    • 異なる基準でのソート機能付き
    • Chrome、Firefoxおよびその他のブラウザで[マルチファイル]ドラッグアンドドロップおよびファイル/テキストのみのコピーアンドペーストおよびシステムクリップボードのスクリーンショットペーストでブラウザからアップロードすると、いくつかの制限があります（コマンドラインで無効にできます）。それが提供するオプション）
    • フォルダ/メモ作成/アップロードボタン
  • よく知られているファイルタイプに対して正しいMIMEを提供する（それを無効にする可能性があります）
  • Npmパッケージおよびローカルツールとしてのインストール、またはDockerを使用した恒久的なサービスとしての1線形インストールの可能性
  • 高速転送のためのHTTP 206ファイルサービング（マルチパートファイル転送）
  • 端末とブラウザコンソールからアップロードします（実際には、他のページ/ドメイン上のブラウザのJSコンソール用のファイルシステムプロキシを意図していました）
  • CORSのダウンロード/アップロード（これも無効にすることができます）
  • 簡単なHTTPS統合
  • より安全なサービスを提供するための軽量のコマンドラインオプション：
    • 私のパッチ node.js 8 を使えば、最初のインストールなしでオプションにアクセスすることができます：curl pad.js.org | node - -h
    • あるいは、まず[Sudo] npm install -g pad.jsによってシステムグローバルなnpmパッケージとしてインストールしてから、インストールされているバージョンを使ってそのオプションにアクセスできるようにします。pad -h
    • あるいは、比較的安全なオプションをデフォルトで使用する、提供されているDockerイメージを使用してください。 [Sudo] docker run --restart=always -v /files:/files --name pad.js -d -p 9090:9090 quay.io/ebraminio/pad.js

Screenshot of a folder index using the tool

上記の機能の大部分は、ツールのメインページに記載されています http://pad.js.org これは、私が使用したいくつかのNiceトリックによって、ツールのソース自体も提供されている場所です。

ツールのソースは GitHub にあります。これはあなたのフィードバック、機能要求そして歓迎です！

6
Ebrahim Byagowi

Expressフレームワーク を使用している場合、この機能はすぐに使用可能になります。

単純なファイルサービングアプリを設定するには、次のようにします。

mkdir yourapp
cd yourapp
npm install express
node_modules/express/bin/express
6
Daniel

私はこのページの答えのどれにもそれほど幸運ではありませんでした、しかし、以下はトリックをするように見えました。

以下の内容のserver.jsファイルを追加します。

const express = require('express')
const path = require('path')
const port = process.env.PORT || 3000
const app = express()

// serve static assets normally
app.use(express.static(__dirname + '/dist'))

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'dist', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

expressも必要です。あなたの設定に応じてyarn add express --saveまたはnpm install express --saveを実行してください（私はyarnを推奨します）。

あなたはあなたがあなたのコンテンツを提供しているどんなフォルダであるかにdistを変更することができます。私の単純なプロジェクトでは、どのフォルダからもサービスを提供していなかったので、distというファイル名を削除しました。

それからnode server.jsを実行してください。プロジェクトをHerokuサーバーにアップロードしなければならなかったので、私はpackage.jsonファイルに以下を追加する必要がありました。

  "scripts": {
    "start": "node server.js"
  }
5
FooBar

ノードを使用して静的リソースを提供することでパフォーマンスを確実に向上させるには、 Buffet を使用することをお勧めします。これはキャッシングHTTPリバースプロキシとも呼ばれるWebアプリケーションアクセラレータと同じように機能しますが、選択されたディレクトリをメモリにロードするだけです。

Buffetは完全にバッファされたアプローチをとります - あなたのアプリが起動するとき、すべてのファイルは完全にメモリにロードされるので、あなたはファイルシステムの焼けを感じることは決してないでしょう。実際には、これは非常に効率的です。アプリの前にVarnishを置くと遅くなるかもしれません。

私たちはcodePileサイトでそれを使用し、1kの同時ユーザー接続負荷の下で25のリソースをダウンロードするページで> 700リクエスト/秒の> 4kリクエスト/秒への増加を発見しました。

例：

var server = require('http').createServer();

var buffet = require('buffet')(root: './file'); 

 

server.on('request', function (req, res) {

  buffet(req, res, function () {

    buffet.notFound(req, res);

  });

});

 

server.listen(3000, function () {

  console.log('test server running on port 3000');

});
4
user742030

その link を見てください。

node jsのexpressモジュールをインストールするだけです。

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

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

あなたのファイルにアクセスすることができます http：//hostname/Folder/file.Zip

4
Syed Ali hassan

これは別の単純なWebサーバーです。

https://www.npmjs.com/package/hostr

インストール

npm install -g hostr

作業部長を変更

cd myprojectfolder/

そして始めなさい

hostr
3
Henry Tseng

あなたは試すことができます serve-me

使い方はとても簡単です。

ServeMe = require('serve-me')();
ServeMe.start(3000);

それで全部です。

PD：デフォルトで提供されるフォルダは "public"です。

3
muit

最初にnpm install node-static -g -gを使ってnode-static serverをインストールし、それをあなたのシステムにグローバルにインストールし、それからあなたのファイルが置かれているディレクトリにナビゲートし、staticで起動します。/yourhtmlfilename.

2
samba

NodeJSのものが必要ないのであれば、NPMの serve パッケージを使用できます。これは、すばやく簡単に使用できるツールです。

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

npm install -g serve

2 - serve <path>を使用してあなたの静的フォルダを提供します。

d:> serve d:\StaticSite

静的フォルダが提供されているポートを表示します。ホストに移動するだけです。

http://localhost:3000
2
Diego Mendes

検索者の利益のために、私はJakub gの答えが好きでしたが、少しのエラー処理を望んでいました。明らかにエラーを処理することが最善です 正しく 、これはエラーが発生した場合にサイトが停止するのを防ぐのに役立ちます。以下のコード

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

process.on('uncaughtException', function(err) {
  console.log(err);
});

var server = express();

server.use(express.static(__dirname));

var port = 10001;
server.listen(port, function() { 
    console.log('listening on port ' + port);     
    //var err = new Error('This error won't break the application...')
    //throw err
});
2
HockeyJ
const http = require('http');
const fs = require('fs');
const url = require('url');
const path = require('path');


let mimeTypes = {
  '.html': 'text/html',
  '.css': 'text/css',
  '.js': 'text/javascript',
  '.jpg': 'image/jpeg',
  '.png': 'image/png',
  '.ico': 'image/x-icon',
  '.svg': 'image/svg+xml',
  '.eot': 'appliaction/vnd.ms-fontobject',
  '.ttf': 'aplication/font-sfnt'
};



http.createServer(function (request, response) {
  let pathName = url.parse(request.url).path;
  if(pathName === '/'){
    pathName = '/index.html';
  }
  pathName = pathName.substring(1, pathName.length);
  let extName = path.extName(pathName);
  let staticFiles = `${__dirname}/template/${pathName}`;

      if(extName =='.jpg' || extName == '.png' || extName == '.ico' || extName == '.eot' || extName == '.ttf' || extName == '.svg')
      {
          let file = fr.readFileSync(staticFiles);
          res.writeHead(200, {'Content-Type': mimeTypes[extname]});
          res.write(file, 'binary');
          res.end();
      }else {
        fs.readFile(staticFiles, 'utf8', function (err, data) {
          if(!err){
            res.writeHead(200, {'Content-Type': mimeTypes[extname]});
            res.end(data);
          }else {
            res.writeHead(404, {'Content-Type': 'text/html;charset=utf8'});
            res.write(`<strong>${staticFiles}</strong>File is not found.`);
          }
          res.end();
        });
      }
}).listen(8081);
2
Slava Nazaryan

NPMにはまだ対応していませんが、Expressにシンプルな静的サーバーを構築し、フォーム送信を受け付けて、トランザクションEメールサービス（今のところSendgrid、Mandrill）を介してそれらをEメールで送信することもできます。

https://github.com/jdr0dn3y/nodejs-StatServe

2
jdr0dn3y

あなたが何も前提条件なしで超軽量httpサーバーに興味があるなら、あなたは見てみるべきです： mongoose

1
yossico

開発作業には（express 4） https://github.com/appsmatics/simple-httpserver.git を使用できます。

1
appsmatics

NPMレジストリで検索しています https://npmjs.org/search?q=server 、static-server https://github.com/maelstrom/static-server を見つけました

同僚にファイルを送信する必要がありましたが、100MBのビーストを電子メールで送信するのは面倒なことではありませんか。簡単なJavaScriptアプリケーションの例を実行したいのですが、file：/// protocolで実行するのに問題がありましたか？ Samba、FTP、またはその他の設定ファイルを編集せずにLANでメディアディレクトリを共有したいですか？それからこのファイルサーバーはあなたの人生をもう少し楽にするでしょう。

単純な静的スタッフサーバをインストールするには、npmを使います。

npm install -g static-server

それからファイルかディレクトリを提供するために、単に実行してください。

$ serve path/to/stuff
Serving path/to/stuff on port 8001

それはフォルダの内容をリストすることさえできます。

残念ながら、 ファイルを提供できませんでした :)

1
Paul Verest

Connectを使った簡単なStatic-Server

var connect = require('connect'),
  directory = __dirname,
  port = 3000;

connect()
  .use(connect.logger('dev'))
  .use(connect.static(directory))
  .listen(port);

console.log('Listening on port ' + port);

も参照してください。単純なWebサーバーとしてnode.jsを使用する

1
dreampulse

また、リクエストがドロップする理由についても尋ねました。具体的な理由はわかりませんが、Nodeはこのネットワークパターンには最適化されていないため、全体的には専用ミドルウェア（nginx、S3、CDN）を使用します。ここでさらなる説明を参照してください（箇条書き13）： http://goldbergyoni.com/checklist-best-practice-of-node-js-in-production/ /

0
Yonatan

以下は私のために働いた：

以下の内容のファイルapp.jsを作成します。

// app.js

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

http.createServer(function (req, res) {
  fs.readFile(__dirname + req.url, function (err,data) {
    if (err) {
      res.writeHead(404);
      res.end(JSON.stringify(err));
      return;
    }
    res.writeHead(200);
    res.end(data);
  });
}).listen(8080);

コマンドラインを開始します。

cmd

cmdで以下を実行します。

node app.js

以下のコンテンツでindex.htmlを作成します

Hi

Chromeの下のURLの下に移動します：

http://localhost:8080/index.html

ソース： https://nodejs.org/en/knowledge/HTTP/servers/how-to-serve-static-files/

それが役に立てば幸いです。

0
Manohar Reddy Poreddy

私は仕事で個人的なプロジェクトのためにヒューストンを使います、それは私のためにうまくいきます。

https://github.com/alejandro/Houston

0
matthewtole