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

我如何能提供一个单一的HTML页面与一些图像,CSS和JavaScript?


当前回答

Local-web-server绝对值得一看!以下是自述的节选:

本地web服务器

一个精简的、模块化的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

静态文件教程。

这个片段演示了静态托管和两个日志输出格式-开发和统计。

单页应用

为单页应用程序(一个带有客户端路由的应用程序,例如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

其他回答

对于简单的nodejs服务器,已经有一些很好的解决方案。 如果你在修改文件时需要实时重新加载,还有一个解决方案。

npm install lite-server -g

导航您的目录并执行

lite-server

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

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

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

我觉得很方便。

更新

在Express的最新版本中,service -static已经成为一个单独的中间件。用这个来服务:

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

首先安装service -static。

最简单的Node.js服务器就是:

$ npm install http-server -g

现在你可以通过以下命令运行服务器:

$ cd MyApp

$ http-server

如果你使用的是NPM 5.2.0或更新版本,你可以使用http-server而不用安装npx。不建议在生产中使用,但这是快速让服务器在本地主机上运行的好方法。

$ npx http-server

或者,你可以试试这个,打开你的网络浏览器,启用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工具现在都包含一个网络服务器,它可以监视你的源文件,并在它们更改时自动刷新你的网页。

我使用Visual Studio代码Live服务器。

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

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

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

VueJS开发者

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

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

React框架开发人员

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

Cordova/电容器+离子框架开发人员

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

你可以在shell中输入这些

npx serve

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

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

同意“没有内容类型比错误的内容类型更好”的说法