使用node.js作为简单的Web服务器

Question

我想运行一个非常简单的HTTP服务器.每个GET请求都example.com应该index.html提供给它,但作为常规HTML页面(即,与您阅读普通网页时相同的体验).

使用下面的代码,我可以阅读的内容index.html.我如何index.html作为常规网页？

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我想要使​​用的每个资源(CSS,JavaScript,图像)文件写一行.

如何使用一些图像,CSS和JavaScript提供单个HTML页面？

Answer 1

您可以将Connect和ServeStatic与Node.js一起使用:

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

Answer 2

最简单的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

有关更多选项,请查看GitHub上的文档http-server,或运行:

$ http-server --help

很多其他不错的功能和对NodeJitsu的脑死亡简单部署.

功能分叉

当然,您可以使用自己的fork轻松实现功能.你可能会发现它已经在这个项目现有的800多个分支中完成:

• https://github.com/nodeapps/http-server/network

轻型服务器:自动刷新替代方案

一个不错的选择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可能就是您正在寻找的.

自动刷新编辑器

大多数网页编辑器和IDE工具现在都包含一个Web服务器,它将监视您的源文件并在更改时自动刷新您的网页.

在开源的文本编辑器支架还包括一个静态的NodeJS web服务器.只需在Brackets中打开任何HTML文件,按" 实时预览 "即可启动静态服务器并在页面上打开浏览器.每当您编辑和保存HTML文件时,浏览器都会自动刷新.这在测试自适应网站时尤其有用.在多个浏览器/窗口大小/设备上打开HTML页面.保存您的HTML页面,并立即查看您的自适应内容是否正常工作,因为它们都会自动刷新.

PhoneGap开发人员

如果您正在编写混合移动应用程序,您可能有兴趣知道PhoneGap团队使用他们的新PhoneGap应用程序采用了这种自动刷新概念.这是一个通用的移动应用程序,可以在开发期间从服务器加载HTML5文件.这是一个非常流畅的技巧,因为现在你可以跳过混合移动应用程序的开发周期中的慢速编译/部署步骤,如果你要更改JS/CSS/HTML文件 - 这是你大部分时间都在做的事情.它们还提供phonegap serve检测文件更改的静态NodeJS Web服务器(运行).

PhoneGap + Sencha Touch开发者

我现在已经为Sencha Touch和jQuery Mobile开发人员广泛调整了PhoneGap静态服务器和PhoneGap开发者应用程序.在Sencha Touch Live上查看.支持--qr QR码和--localtunnel,它将您的静态服务器从您的台式计算机代理到防火墙外的URL!吨的用途.大规模加速混合移动设备.

Cordova + Ionic框架开发人员

本地服务器和自动刷新功能将附加到该ionic工具中.只需ionic serve从您的应用文件夹中运行 更好的是... ionic serve --lab查看iOS和Android的自动刷新并排视图.

Answer 3

看看这个要点.我在这里复制它以供参考,但要点已经定期更新.

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文件.我自己用过它.在"二进制"模式下使用读/写不是问题.这只意味着文件不会被文件库解释为文本,并且与响应中返回的内容类型无关.

您的代码的问题是您总是返回内容类型的"text/plain".上面的代码不会返回任何内容类型,但是如果您只是将它用于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");

Answer 4

你不需要快递.你不需要连接.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)

Answer 5

我认为你现在缺少的那部分是你发送的:

Content-Type: text/plain

如果您希望Web浏览器呈现HTML,则应将其更改为:

Content-Type: text/html

Answer 6

Step1(在命令提示符内部[我希望你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

Answer 7

快捷方式:

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

Answer 8

我认为从字典中查找内容类型更简洁,而不是处理switch语句:

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

...

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

Answer 9

这基本上是连接版本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作为默认选项.

Answer 10

您不需要使用任何NPM模块来运行简单的服务器,对于Node ,有一个非常小的名为" NPM Free Server "的库:

• GitHub上的NPM免费服务器

50行代码,如果您请求文件或文件夹,则输出,如果工作失败,则为红色或绿色.小于1KB(缩小).

Answer 11

如果您的PC上安装了节点,可能您有NPM,如果您不需要NodeJS,可以使用serve包:

1 - 在PC上安装软件包:

npm install -g serve

2 - 提供静态文件夹:

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

它将显示您的静态文件夹所在的端口,只需导航到主机,如:

http://localhost:3000

Answer 12

我在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路径构造中的功能.这是为了允许带有空格和编码字符的文件名.

Answer 13

编辑:

Node.js示例应用程序节点聊天具有您想要的功能.
在它的README.textfile
3.步骤就是你要找的.

步骤1

• 创建一个在端口8002上以hello world响应的服务器

第2步

• 创建一个index.html并提供服务

第三步:

• 介绍util.js
• 更改逻辑,以便提供任何静态文件
• 如果没有找到文件,则显示404

第4步

• 添加jquery-1.4.2.js
• 添加client.js
• 更改index.html以提示用户输入昵称

这是server.js

这是util.js

Answer 14

我这样做的方法是首先通过全局安装节点静态服务器

npm install node-static -g

然后导航到包含html文件的目录并启动静态服务器static.

转到浏览器并键入localhost:8080/"yourHtmlFile".

Answer 15

基本上复制接受的答案,但避免创建一个js文件.

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

发现它非常方便.

更新

截至最新版Express,serve-static已成为一个独立的中间件.用它来服务:

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

serve-static先安装.

Answer 16

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>

Answer 17

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'

Answer 18

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

Answer 19

我使用下面的代码启动一个简单的Web服务器,如果Url中没有提到文件,它会呈现默认的html文件.

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内容.

同意声明" 没有内容类型比错误的更好 "

Answer 20

我不确定这是否正是您想要的,但是,您可以尝试更改:

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

对此:

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

这将使浏览器客户端将文件显示为html而不是纯文本.

Answer 21

对于简单的nodejs server. live-reloading如果您在更改文件时需要，还有另一种解决方案。

npm install lite-server -g

导航您的目录并执行以下操作

lite-server

它将通过实时重新加载为您打开浏览器。

Answer 22

您可以在shell中键入

npx serve

回购：https : //github.com/zeit/serve。

Answer 23

local-web-server绝对值得一看！以下是自述文件的摘录：

本地网络服务器

用于快速全栈开发的精益、模块化 Web 服务器。

• 支持 HTTP、HTTPS 和 HTTP2。
• 体积小且 100% 个性化。仅加载和使用项目所需的行为。
• 附加自定义视图以个性化活动的可视化方式。
• 编程和命令行界面。

使用此工具可以：

• 构建任何类型的前端 Web 应用程序（静态、动态、单页应用程序、渐进式 Web 应用程序、React 等）。
• 构建后端服务原型（REST API、微服务、websocket、服务器发送事件服务等）。
• 监视活动、分析性能、试验缓存策略等。

Local-web-server 是lws的一个发行版，与有用的中间件的“入门包”捆绑在一起。

概要

该软件包安装ws命令行工具（请查看使用指南）。

静态网站

不带任何参数运行ws会将当前目录托管为静态网站。导航到服务器将呈现目录列表或您的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 并在客户端处理路由。

水疗教程。

URL 重写和代理请求

另一个常见的用例是将某些请求转发到远程服务器。

以下命令代理来自以/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

Answer 24

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 中的相对路径！

瞧！