开发者笔记

Question

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

Answer 1

您可以将Connect和ServeStatic用于Node.js：

使用NPM安装connect和serve-static
```
$ npm install connect serve-static
```

使用以下内容创建server.js文件：

var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080, function(){
    console.log('Server running on 8080...');
});

使用Node.js运行
```
$ node server.js
```

您现在可以转到http://localhost:8080/yourfile.html

Answer 2

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

如需更多选项，请查看documentation for http-server on GitHub或运行：

$ http-server --help

很多其他不错的功能和对NodeJitsu的脑死亡简单部署。

功能分叉

当然，您可以使用自己的分叉轻松充值功能。你可能会发现它已经在这个项目现有的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工具现在都包含一个Web服务器，它将监视您的源文件并在更改时自动刷新您的网页。

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

PhoneGap开发者

如果您正在对hybrid mobile app进行编码，您可能有兴趣知道PhoneGap团队已将新的PhoneGap App采用此自动刷新概念。这是一个通用的移动应用程序，可以在开发期间从服务器加载HTML5文件。这是一个非常流畅的技巧，因为现在您可以跳过混合移动应用程序的开发周期中的慢速编译/部署步骤，如果您正在更改JS / CSS / HTML文件 - 这是您正在做的大部分工作时间。它们还提供检测文件更改的静态NodeJS Web服务器（运行phonegap serve）。

PhoneGap + Sencha Touch Developers

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

Cordova + Ionic框架开发人员

本地服务器和自动刷新功能已融入ionic工具。只需从您的应用文件夹中运行ionic serve即可。更好...... ionic serve --lab可以查看iOS和Android的自动刷新并排视图。

Answer 3

查看此gist。我在这里复制它以供参考，但要点已定期更新。

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

Answer 4

你不需要快递。你不需要连接。 Node.js确实是http NATIVELY。您需要做的就是根据请求返回一个文件：

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)

Answer 5

我认为你现在缺少的那部分是你发送的：

Content-Type: text/plain

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

Content-Type: text/html

Answer 6

Step1（在命令提示符内部[我希望你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.js或nodemon server.js

如果您只想要主机简单的HTTP服务器，现在有更简单的方法。 npm install -g http-server

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

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

Answer 7

快捷方式：

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

Answer 8

我认为从字典中查找内容类型更简洁，而不是处理switch语句：

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

...

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

Answer 9

这基本上是连接版本3的已接受答案的更新版本：

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

var app = connect();

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

我还添加了一个默认选项，以便将index.html作为默认选项。

Answer 10

你不需要使用任何NPM模块来运行一个简单的服务器，对于Node来说，有一个非常小的库叫做“ NPM Free Server ”：

的 NPM Free Server on GitHub

50行代码，如果您请求文件或文件夹，则输出，如果工作失败，则为红色或绿色。小于1KB（缩小）。

Answer 11

如果您的PC上安装了节点，可能您有NPM，如果您不需要NodeJS，可以使用serve包：

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

npm install -g serve

2 - 提供静态文件夹：

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

它将显示您的静态文件夹所在的端口，只需导航到主机，如：

http://localhost:3000

Answer 12

我在npm上找到了一个有趣的库，可能对你有用。它被称为mime（npm install mime或https://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函数。这是为了允许带有空格和编码字符的文件名。

Answer 13

我这样做的方法是首先通过

全局安装节点静态服务器

npm install node-static -g

然后导航到包含html文件的目录，并使用static启动静态服务器。

转到浏览器并输入localhost:8080/"yourHtmlFile"。

Answer 14

编辑：

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

步骤1


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


步骤2


创建index.html并提供服务


步骤3


介绍util.js

更改逻辑以便提供任何静态文件

在没有找到文件的情况下显示404


步骤4


添加jquery-1.4.2.js

添加client.js

更改index.html以提示用户输入昵称

以下是server.js

以下是util.js

Answer 15

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

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

发现它非常方便。

更新

从Express的最新版本开始，serve-static已成为一个独立的中间件。用它来服务：

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

首先安装serve-static。

Answer 16

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>

Answer 17

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

同意声明＆＃34; 没有内容类型比错误的更好＆＃34;

Answer 18

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

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

到此：

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

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

Answer 19

这里有很多复杂的答案。如果您不打算处理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目录作为根目录来提供文件。要添加其他资源，只需将它们放在该目录中即可。

Answer 20

稍微详细的快递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 !")

Answer 21

上面的大多数答案非常清楚地描述了如何提供内容。我所看到的另外一个是目录列表，以便可以浏览目录的其他内容。以下是我为更多读者提供的解决方案：

<section id='get-involved' class='get-involved'>
  <h1 class='header'>Get Involved</h1>

  <p class='tag-line tag-line-get-involved'>
    Become a partner in action!
  </p>

  <div class='square-container'>

    <div>
      <button ui-sref='launch' class='square square-orange'>
        <p>Launch a Chapter</p>
      </button>
      <p>Start a chapter on your campus!</p>
      <p class='description'>We provide all the necessary resources and guide you through the process so you can spend less time with the setup and more time effecting change!</p>
    </div>

    <div>
      <button ui-sref='become-mentor' class='square square-blue'>
        <p>Become a Mentor</p>
      </button>
      <p>Are you a young college alum looking to get involved?</p>
      <p class='description'>Apply to mentor a team of studentes committed to making change in your community. We make it easy to give back!
      </p>
    </div>

    <div>
      <button ui-sref='nominate' class='square square-aqua'>
        <p>Nominate an
          <br>Issue Advisor</p>
      </button>
      <p>Do you know a great advisor for the network?</p>
      <p class='description'>Advisors join our student teams on a bimonthly call to share insight into new developments in their field and answer questions.
      </p>
    </div>


    <div>
      <button ui-sref='support' class='square square-green'>
        <p>Support Kinetic Global</p>
      </button>
      <p>Support college students making change in your community!</p>
      <p class='description'>Kinetic Global is a lean operation, so we offer multiple ways to contribute to the network (financially and in-kind).</p>
    </div>

  </div>
</section>

Answer 22

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'

Answer 23

对于简单的nodejs server，已经有一些很棒的解决方案。如果您在更改文件时需要live-reloading，还有一个解决方案。

npm install lite-server -g

导航您的目录并执行

lite-server

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

Answer 24

来自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

Answer 25

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

git push -f *repository* HEAD:*master*

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

即可

sudo npm install ripple-emulator -g

然后将设备更改为Nexus 7格局。

Answer 26

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

Answer 27

今天的大量图书馆非常容易。这里的答案是有效的。如果您想要另一个版本更快更简单地启动

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

Answer 28

您可以在shell中键入这些内容

npx serve

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

Answer 29

Node.js Web服务器从头开始

没有第三方框架；允许查询字符串；添加斜杠；处理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...')});

Answer 30

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

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应与此文件位于同一目录中。希望这有助于某人：）

Answer 31

local-web-server绝对值得一看！这是自述文件的摘录：

本地网络服务器

精简的模块化Web服务器，用于快速的全栈开发。

支持HTTP，HTTPS和HTTP2。
小型且100％可个性化。仅加载和使用项目所需的行为。
附加自定义视图以个性化活动的可视化方式。
程序和命令行界面。

使用此工具可以：

构建任何类型的前端Web应用程序（静态，动态，单页应用程序，Progessive Web App，React等）。
为后端服务（REST API，微服务，websocket，服务器发送事件服务等）建立原型。
监控活动，分析性能，尝试缓存策略等。

本地网络服务器是lws的发行版，与有用的中间件的“入门包”捆绑在一起。

简介

此软件包将安装ws命令行工具（请看usage guide）。

静态网站

不带任何参数运行ws会将当前目录作为静态网站托管。导航到服务器将呈现目录列表或您的index.html（如果该文件存在）。

$ ws
Listening on http://mbp.local:8000, http://127.0.0.1:8000, http://192.168.0.100:8000

Static files tutorial。

此剪辑演示了静态托管以及两种日志输出格式-dev和stats。

单页应用

为单页应用程序（具有客户端路由的应用程序，例如React或Angular应用程序）提供服务就像指定单个页面的名称一样简单：

$ ws --spa index.html

在静态站点上，对典型SPA路径（例如/user/1，/login）的请求将返回404 Not Found，因为该位置不存在文件。但是，通过将index.html标记为SPA，您可以创建以下规则：

如果请求了静态文件（例如/css/style.css），则将其提供服务；如果未请求（例如/login），则将服务指定的SPA并处理客户端路由。

SPA tutorial。

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'

Rewrite tutorial。

此剪辑演示了上述内容以及使用--static.extensions指定默认文件扩展名和使用--verbose监视活动的情况。

HTTPS和HTTP2

对于HTTPS或HTTP2，分别传递--https或--http2标志。 See the wiki以获得更多配置选项，以及有关如何在浏览器中获取“绿色挂锁”的指南。

$ lws --http2
Listening at https://mba4.local:8000, https://127.0.0.1:8000, https://192.168.0.200:8000

Answer 32

Express函数sendFile完全可以满足您的需求，并且由于您希望从节点获得Web服务器功能，因此Express是自然的选择，然后提供静态文件就变得非常简单：

try this code: 

    .btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; }

    .btn-info:hover{
    color: #fff;
    background: #003366; 

    transition: 0.5s background;}



    <button class="btn-info" href="LINK">New Service Request</button>

在此处了解更多信息：https://expressjs.com/en/api.html#res.sendFile

一个带有节点的Express Web服务器的小例子：

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

运行此命令，然后导航至http://localhost:8080

瞧！

Answer 33

创建一个简单的 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

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

33 个答案:

开发者笔记

编辑：

更新

Node.js Web服务器从头开始

本地网络服务器

简介

静态网站

单页应用

URL重写和代理请求

HTTPS和HTTP2