协慌网

登录 贡献 社区

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

我想运行一个非常简单的 HTTP 服务器。对example.com每个 GET 请求都应该将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);

下面的一个建议很复杂,需要我为我想要使用的每个资源(CSS,JavaScript,图像)文件写一个get行。

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

答案

您可以将ConnectServeStatic与 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

最简单的 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 多个分支中完成:

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

一个很好的替代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可能就是您正在寻找的。

自动刷新编辑器

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

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

PhoneGap 开发人员

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

PhoneGap + Sencha Touch 开发者

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

Cordova + Ionic 框架开发人员

本地服务器和自动刷新功能被烘焙到ionic工具中。只需从 app 文件夹中运行ionic serve 。更好的... ionic serve --lab用于查看 iOS 和 Android 的自动刷新并排视图。

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

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