web-dev-qa-db-ja.com

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

非常に単純なHTTPサーバーを実行したいです。 example.comへのすべてのGETリクエストは、それにindex.htmlを提供されるべきですが、通常のHTMLページとして提供されるべきです(すなわち、通常のWebページを読んだときと同じ経験)。

以下のコードを使って、私はindex.htmlの内容を読むことができます。 index.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つは複雑で、使用したいリソース(CSS、JavaScript、画像)ファイルごとにget行を書く必要があります。

いくつかの画像、CSS、およびJavaScriptを含む単一のHTMLページを提供する方法を教えてください。

1024
idophir

このためにNode.jsで Connect および ServeStatic を使用できます。

  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, function(){
        console.log('Server running on 8080...');
    });
    
  3. Node.jsで実行する

    $ node server.js
    

http://localhost:8080/yourfile.htmlに行くことができます

925

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

$ npm install http-server -g

これで、次のコマンドを使ってサーバーを起動することができます。

$ cd MyApp

$ http-server

NPM 5.2.0以降を使用している場合は、npxと共にインストールしなくてもhttp-serverを使用できます。これは本番環境での使用にはお勧めできませんが、localhost上でサーバーをすばやく実行するための素晴らしい方法です。

$ npx http-server

または、Webブラウザを開いてCORS要求を有効にすると、これを試すことができます。

$ http-server -o --cors

その他のオプションについては、 GitHubhttp-serverのドキュメント、または次のコマンドを実行してください。

$ http-server --help

NodeJitsuへの他のたくさんの素晴らしい機能と頭脳死の単純な展開。

フィーチャーフォーク

もちろん、あなた自身のフォークで簡単に機能を補うことができます。あなたはそれがこのプロジェクトの既存の800以上のフォークのうちの1つで既に行われたのを見つけるかもしれません:

Light Server:自動更新の代替案

http-serverに代わる素敵な方法は light-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サーバーが含まれています。

オープンソース テキストエディタ 角括弧 にはNodeJS静的Webサーバーも含まれます。任意のHTMLファイルを角かっこで開くには、 "Live Preview"を押すだけで静的サーバーが起動し、 HTMLファイルを編集して保存するとブラウザは自動的に更新されます(複数のブラウザ/ウィンドウサイズ/デバイスでHTMLページを開くとすぐに表示されます)。アダプティブなものがallオートリフレッシュのように機能している場合。

PhoneGap開発者

ハイブリッドモバイルアプリ をコーディングしている場合は、 PhoneGap チームがこの自動更新の概念を新しい PhoneGap App を使用した)で採用したことを知っておくと便利です。開発中にサーバーからHTML5ファイルを読み込むことができるアプリこれは、JS/CSS/HTMLファイルを変更する場合、ハイブリッドモバイルアプリの開発サイクルにおける遅いコンパイル/デプロイのステップをスキップできるので、とても巧妙なトリックです - また、ファイルの変更を検出する静的NodeJS Webサーバー(phonegap serveを実行)も提供しています。

PhoneGap + Sencha Touch開発者

私は今、Sencha TouchとjQuery Mobileの開発者向けにPhoneGap静的サーバーとPhoneGap開発者アプリを広範囲に適応させました。 Sencha Touch Live で確認してください。デスクトップコンピュータからファイアウォールの外側のURLへの静的サーバーをプロキシする--qr QR Codesと--localtunnelをサポートしています。たくさんの用途に使用できます。

Cordova + Ionic Framework開発者

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

899
Tony O'Hagan

この Gist をチェックしてください。参照用にここで再現していますが、要旨は定期的に更新されています。

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

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

更新

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

あなたのコードの問題はあなたが常に "text/plain"のコンテントタイプを返しているということです。上記のコードではコンテンツタイプは返されませんが、HTML、CSS、およびJSに使用しているだけの場合は、ブラウザでそれらを推測できます。 間違ったコンテンツタイプより優れたコンテンツタイプはありません。

通常、content-typeはあなたのWebサーバの設定です。それで、これでyour問題が解決しない場合は残念ですが、それは私にとって単純な開発サーバーとしてはたらいていて、それが他の人々を助けるかもしれないと思った。応答に正しいコンテンツタイプが必要な場合は、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");
155
Jonathan Tran

あなたは急行を必要としません。あなたは接続する必要はありません。 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)
88
B T

私はあなたが今不足している部分はあなたが送信しているということです:

Content-Type: text/plain

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

Content-Type: text/html
67
clee

ステップ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

あなたが単にHost simple HTTP serverが欲しいのなら、もっと簡単な方法があります。 npm install -g http-server

そして私たちのディレクトリを開いてhttp-serverをタイプしてください

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

44
STEEL

早道:

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);
29
Frank Nocke

Switch文を処理するのではなく、辞書からコンテンツタイプを検索するのが適切だと思います。

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

...

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

これは基本的にConnectバージョン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がデフォルトとして機能するように、デフォルトオプションも追加しました。

15
tomet

単純なサーバーを実行するためにNPMモジュールを使用する必要はありません。Node用に " NPM Free Server "という非常に小さなライブラリがあります。

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

13
Jaredcheeda

もしあなたがあなたのPCにノードをインストールしていればおそらくあなたはNPMを持っています、もしあなたがNodeJSのものを必要としていなければ、あなたはこれのために serve パッケージを使うことができます:

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

npm install -g serve

2 - あなたの静的フォルダを提供します:

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

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

http://localhost:3000
11
Diego Mendes

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

9
MayorMonty

私のやり方は、まず最初に静的ノードをグローバルにインストールすることです。

npm install node-static -g

次に、htmlファイルが含まれているディレクトリに移動し、staticを指定して静的サーバーを起動します。

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

8
samba

編集する

Node.jsサンプルアプリ ノードチャット あなたが望む機能を持っています。
その中に README.textfile
3。ステップはあなたが探しているものです。

ステップ1

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

ステップ2

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

step3

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

ステップ4

  • jquery-1.4.2.jsを追加します。
  • client.jsを追加する
  • index.htmlをニックネームのプロンプト・ユーザーに変更します

これは server.js です。

これは util.js です。

8
Kerem Baydoğan

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

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

それは非常に説得力があるとわかりました。

更新

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

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

最初にserve-staticをインストールしてください。

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

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

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

これに:

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

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

5
Xenry

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
Sachin303

もう少し冗長な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
Bruno Grieder

ここでは狂った量の複雑な答えが出ています。 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ディレクトリを使用します。追加のアセットを追加するには、それらをそのディレクトリの中に置くだけです。

4
cyberwombat

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

'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));
3
Abu Shumon

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を提供します

3
Ahmed M. Matar
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'
3
user3389163

単純なnodejs serverには、すでにいくつかの優れた解決策があります。ファイルを変更したときにlive-reloadingが必要な場合は、もう1つ解決策があります。

npm install lite-server -g

あなたのディレクトリをナビゲートして行う

lite-server

ライブリロードでブラウザが開きます。

3
lokeshjain2008

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

Sudo npm install ripple-emulator -g

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

ripple emulate

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

2
Helzgate

私は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
Gen4ik

今日のたくさんの図書館のプレゼントでとても簡単です。ここでの答えは機能的です。より早く簡単に他のバージョンを起動したい場合

もちろん最初に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")
1
James Suárez

local-web-server は一見の価値があります! readmeからの抜粋を次に示します。

ローカルWebサーバー

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

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

このツールを使用して:

  • 任意のタイプのフロントエンドWebアプリケーション(静的、動的、単一ページアプリ、Progessive Webアプリ、Reactなど)を構築します。
  • バックエンドサービス(REST API、マイクロサービス、Webソケット、サーバー送信イベントサービスなど)のプロトタイプを作成します。
  • アクティビティの監視、パフォーマンスの分析、キャッシュ戦略の実験など。

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

あらすじ

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

静的ウェブサイト

引数なしで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を返します。ただし、index.htmlをSPAとしてマークすることにより、このルールを作成します。

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

SPAチュートリアル

URLの書き換えとプロキシされたリクエスト

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

次のコマンドは、/posts/で始まるパスから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
1
Lloyd

シェルにそれらをタイプするだけです

npx serve

レポ: https://github.com/zeit/serve

0
Geng Jiawen

私が遭遇した簡単なバージョンは以下の通りです。それは抽象ライブラリを使用しないので、教育目的のために、それは最善です。

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はこのファイルと同じディレクトリになければなりません。これが誰かに役立つことを願っています:)

0
Kaushal28