1221

我想运行一个非常简单的 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 页面?

4

33 回答 33

1112

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

许多其他不错的功能和对 NodeJits 的简单脑死部署。

功能叉

当然,您可以使用自己的 fork 轻松地补充功能。您可能会发现它已经在该项目的现有 800 多个分支之一中完成:

Light Server:一种自动刷新的替代方案

一个不错的替代方法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 服务器,该服务器将监视您的源文件并在它们发生更改时自动刷新您的网页。

我将Live Server与 Visual Studio Code 一起使用。

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

Web / SPA / PWA / 移动 / 桌面 / 浏览器 Ext Web 开发人员

一些 SPA 框架包含Webpack DevServer的内置版本,它可以检测源文件更改并触发 SPA 或 PWA Web 应用程序的增量重建和补丁(称为热重新加载)。这里有一些流行的 SPA 框架可以做到这一点。

VueJS 开发人员

对于 VueJS 开发人员来说,最喜欢的是Quasar 框架,它包括开箱即用的 Webpack DevServer 以及支持服务器端渲染 (SSR) 和代理规则的开关,以解决你的 CORS 问题。它包括大量旨在适应移动和桌面的优化组件。这些允许您为所有平台(SPA、SPA+SSR、PWA、PWA+SSR、Cordova 和 Capacitor Mobile AppStore 应用程序、Electron Desktop Node+VueJS 应用程序甚至浏览器扩展)构建一个应用程序。

另一个流行的是NuxtJS,它还支持静态 HTML/CSS 代码生成以及 SSR 或无 SSR 构建模式,以及其他 UI 组件套件的插件。

反应框架开发人员

ReactJS开发人员还可以设置热重载

Cordova/Capacitor + Ionic 框架开发人员

Iconic 是一个仅限移动设备的混合组件框架,现在支持 VueJS、React 和 Angular 开发。该工具内置了具有自动刷新功能的本地服务器ionic。只需ionic serve从您的应用程序文件夹运行。更好...ionic serve --lab查看自动刷新的 iOS 和 Android 的并排视图。

于 2014-04-17T01:21:31.180 回答
1011

注意:此答案来自 2011 年。但是,它仍然有效。

为此,您可以将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, () => console.log('Server running on 8080...'));
    
  3. 使用 Node.js 运行

     $ node server.js
    

你现在可以去http://localhost:8080/yourfile.html

于 2011-12-08T08:09:13.480 回答
173

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

Node.JS 静态文件网络服务器。将它放在您的路径中以在任何目录中启动服务器,采用可选的端口参数。

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

您的代码的问题是您总是返回“文本/纯文本”的内容类型。上面的代码没有返回任何内容类型,但如果你只是将它用于 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");
于 2012-11-29T21:46:01.767 回答
110

你不需要快递。你不需要连接。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)
于 2014-10-14T06:59:13.440 回答
76

我认为您现在缺少的部分是您要发送:

Content-Type: text/plain

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

Content-Type: text/html
于 2011-05-21T21:11:14.730 回答
47

第 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.jsnodemon server.js

如果您只想托管简单的 HTTP 服务器,现在有更简单的方法。 npm install -g http-server

并打开我们的目录并输入http-server

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

于 2013-02-24T14:44:32.250 回答
37

快速方法:

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);
于 2016-02-07T08:28:42.960 回答
20

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

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

...

    var contentType = contentTypesByExtension[fileExtension] || 'text/plain';
于 2011-11-24T21:08:21.690 回答
15

This is basically an updated version of the accepted answer for connect version 3:

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

var app = connect();

app.use(serveStatic(__dirname, {'index': ['index.html']}));
app.listen(3000);

I also added a default option so that index.html is served as a default.

于 2014-06-20T17:40:46.487 回答
15

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

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

于 2015-11-09T16:10:04.197 回答
13

你可以在你的shell中输入那些

npx serve

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

于 2019-05-06T09:13:01.737 回答
13

如果你在你的 PC 上安装了 node 可能你有 NPM,如果你不需要 NodeJS 的东西,你可以使用serve包:

1 - 在您的 PC 上安装软件包:

npm install -g serve

2 - 为您的静态文件夹提供服务:

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

它将向您显示正在为您的静态文件夹提供服务的端口,只需导航到主机,如下所示:

http://localhost:3000
于 2017-02-23T17:57:20.810 回答
10

我在 npm 上发现了一个有趣的库,它可能对你有用。它被称为 mime(npm install mimehttps://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路径构造中的功能。这是为了允许带有空格和编码字符的文件名。

于 2014-06-08T01:01:27.243 回答
9

编辑:

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

步骤1

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

第2步

  • 创建一个 index.html 并提供它

第三步

  • 介绍 util.js
  • 更改逻辑以便提供任何静态文件
  • 在没有找到文件的情况下显示 404

第4步

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

这是server.js

这是util.js

于 2011-05-21T20:57:32.877 回答
8
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>
于 2014-12-30T09:02:58.487 回答
8

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

npm install node-static -g

然后导航到包含您的 html 文件的目录并使用static.

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

于 2016-02-02T22:40:49.790 回答
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

于 2014-06-17T07:45:24.827 回答
6

我使用下面的代码来启动一个简单的 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 内容。

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

于 2014-03-24T00:25:34.260 回答
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

于 2018-10-25T01:17:02.770 回答
5
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'
于 2014-03-06T16:30:40.193 回答
5

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

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

对此:

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

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

于 2015-08-30T16:31:33.477 回答
5

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

瞧!

于 2019-12-06T13:23:17.393 回答
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 !")
于 2014-07-01T14:46:27.100 回答
4

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

静态文件教程

此剪辑演示了静态托管以及几种日志输出格式 -devstats.

单页应用

为单页应用程序(具有客户端路由的应用程序,例如 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,分别传递--httpsor--http2标志。有关更多配置选项和如何在浏览器中获取“绿色挂锁”的指南,请参阅 wiki 。

$ lws --http2
Listening at https://mba4.local:8000, https://127.0.0.1:8000, https://192.168.0.200:8000
于 2019-06-25T10:01:10.447 回答
4

我遇到的更简单的版本如下。出于教育目的,这是最好的,因为它不使用任何抽象库。

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应该和这个文件在同一个目录中。希望这可以帮助某人:)

于 2017-05-30T18:35:55.327 回答
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目录作为根来提供文件。要添加其他资产,只需将它们放在该目录中即可。

于 2015-08-03T18:32:54.120 回答
4

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

npm install lite-server -g

浏览您的目录并执行

lite-server

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

于 2017-05-01T10:51:38.680 回答
3

从头开始的 Node.js 网络服务器


没有第三方框架;允许查询字符串;添加尾部斜杠;把手 404


创建一个public_html子文件夹并将所有内容放入其中。


要点: https ://gist.github.com/veganaize/fc3b9aa393ca688a284c54caf43a3fc3

var fs = require('fs');

require('http').createServer(function(request, response) {
  var path = 'public_html'+ request.url.slice(0,
      (request.url.indexOf('?')+1 || request.url.length+1) - 1);
      
  fs.stat(path, function(bad_path, path_stat) {
    if (bad_path) respond(404);
    else if (path_stat.isDirectory() && path.slice(-1) !== '/') {
      response.setHeader('Location', path.slice(11)+'/');
      respond(301);
    } else fs.readFile(path.slice(-1)==='/' ? path+'index.html' : path,
          function(bad_file, file_content) {
      if (bad_file) respond(404);
      else respond(200, file_content);
    });
  });
 
  function respond(status, content) {
    response.statusCode = status;
    response.end(content);
  }
}).listen(80, function(){console.log('Server running on port 80...')});
于 2020-09-10T03:24:33.447 回答
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));
于 2016-12-31T17:48:58.070 回答
2

创建一个简单的 Node.js Web 服务器并从文件异步提供 HTML 页面

创建我的第一个 node.js 服务器后,我找到了一种简单有效的方法。

我们可以在开始时加载一次,而不是为每个请求加载 HTML。然后返回我们在启动时加载的数据。

const host = "localhost";
const port = 5000;
const http = require("HTTP");
const fs = require("fs").promises;

let htmlFile;
const reqListenerFunc = function (req, resp) {
    resp.setHeader("Content-Type", "text/html");
    resp.writeHead(200);
    resp.end(htmlFile);
};
const simpleServer = http.createServer(reqListenerFunc);

// // Using Arrow function directly
// const simpleServer = http.createServer( (req, resp) => {
//     resp.setHeader("Content-Type", "text/html");
//     resp.writeHead(200);
//     resp.end(htmlFile);
// });

fs.readFile(__dirname + "/index.html")
    .then(content => {
        htmlFile = content;
        simpleServer.listen(port, host, () => {
            console.log(`Node.js web server is running on http://${host}:${port}`);
        });
    })
    .catch(err => {
        console.error(`Cannot read index.html file. <br> Error: ${err}`);
        process.exit(1);
    });

阅读更多:https ://www.digitalocean.com/community/tutorials/how-to-create-a-web-server-in-node-js-with-the-http-module

于 2021-04-07T09:39:33.047 回答
2

这是我用来快速查看网页的最快解决方案之一

sudo npm install ripple-emulator -g

从那时起,只需进入您的 html 文件的目录并运行

ripple emulate

然后将设备更改为 Nexus 7 横向。

于 2015-07-10T21:44:53.590 回答
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")
        }
    }
}
于 2019-01-08T11:54:59.990 回答
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")
于 2019-03-02T10:47:12.390 回答