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


当前回答

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

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

...

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

其他回答

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

这是一个最快的解决方案,我用快速看到网页

sudo npm install ripple-emulator -g

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

ripple emulate

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

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

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

这很容易,因为今天有大量的图书馆。这里的答案是功能性的。如果你想要另一个版本开始更快和简单

当然,首先要安装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")

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

创建我的第一个node.js服务器时,我找到了一个简单而有效的方法来做到这一点。

我们可以在开始时加载一次HTML,而不是为每个请求加载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