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


当前回答

我也可以推荐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")
        }
    }
}

其他回答

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

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

步骤1(在命令提示符[I hope you cd TO YOUR FOLDER]内):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(或不使用demon)。以上代码仅用于一个简单的连接服务器。

步骤3:node server.js或nodemon server.js

现在有一个更简单的方法,如果你只是想主机简单的HTTP服务器。 NPM install -g http-server

打开目录,输入http-server

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

最快捷的方法:

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

最简单的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的自动刷新视图。

Express函数sendFile正是你所需要的,因为你想从节点的web服务器功能,Express是自然的选择,然后服务静态文件变得简单:

res.sendFile('/path_to_your/index.html')

更多信息请点击:https://expressjs.com/en/api.html#res.sendFile

一个用express web server for node的小例子:

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

拖鞋!