使用Node.js和Express创建基本的Web服务器，用于提供HTML文件和资源。

Question

我正在进行一些前端实验，希望有一个非常基本的Web服务器来快速启动项目并提供文件（一个index.html文件+一些css/js/img文件）。因此，我正在尝试使用node.js和express构建某些内容，我已经玩过这两个工具了，但是这一次我不想使用渲染引擎，因为我只有一个静态文件。使用这段代码，我可以得到HTML文件，但无法获取资源文件（错误404）：

var express = require('express'),
    app = express.createServer();

app.configure(function(){
  app.use(express.static(__dirname + '/static'));
});

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

app.listen(3000);

有没有一种简单的方式来实现这个功能（如果可能的话只在一个文件中），或者说Express要求使用视图和渲染引擎吗？

- djevg

Answer 1

我遇到了类似的情况，因此发现了这个。我不需要也不喜欢模板。在 Express 中，任何您放置在 public/ 目录下的内容都被视为静态内容（就像 Apache 一样）。 因此，我将我的 index.html 放置在那里，并使用 sendfile 来处理没有文件的请求（例如：GET http://mysite/）：

app.get('/', function(req,res) {
  res.sendfile('public/index.html');
});

- ajventi

---

使用 app.get(/^(.+)$/, function(req, res) { res.sendfile('public/' + req.params[0]); }); 来提供其他文件的服务。 - guzart

有时候，我们只是想要一个简单的东西来进行快速而不太正式的测试...我们不需要超级通用和复杂的答案...我们只需要那个一行代码，可以证明或否定你可能拥有的理论...这就是为什么我发现这个答案非常有用 +1。 - Clint Eastwood

在 Express 4.14.3 中：express deprecated res.sendfile: Use res.sendFile instead - Wolfgang

除非您正在构建单页应用程序（SPA），否则index.html是您唯一需要提供的文件，这就是为什么我在寻找这个答案。 - PDN

@PDN 我猜问题出在 index.html 文件中有 JavaScript 和 CSS 文件以及其他静态内容需要提供服务。 - Xavier Egea

Answer 2

以下代码对我有效。

var express = require('express'),
  app = express(),
  http = require('http'),
  httpServer = http.Server(app);

app.use(express.static(__dirname + '/folder_containing_assets_OR_scripts'));

app.get('/', function(req, res) {
  res.sendfile(__dirname + '/index.html');
});
app.listen(3000);

这会加载带有资源的页面

- vinesh

---

请查看我的更新答案，截至2020年6月5日。感谢原帖作者，但现在做起来要容易得多。 - Dan Zuzevich

Answer 3

你可以使用 这种类似于Node.js的解决方案（链接已失效），就像我之前写过的博客中所述。

简而言之，使用npm install connect来安装连接(connect)。

然后将此代码粘贴到名为server.js的文件中，该文件与您的HTML/CSS/JS文件位于同一文件夹中。

var util = require('util'),
    connect = require('connect'),
    port = 1337;

connect.createServer(connect.static(__dirname)).listen(port);
util.puts('Listening on ' + port + '...');
util.puts('Press Ctrl + C to stop.');

现在在终端中导航到该文件夹并运行node server.js，这将在http://localhost:1337上为您提供一个临时的Web服务器。

- isNaN1247

---

太好了，谢谢 :) 以前从来没有单独使用过Connect，我不知道会这么简单... - djevg

嘿， 使用这段代码时，我遇到了以下错误： XMLHttpRequest不能加载http://SomeExternalUrl。起源http://localhost:8888未被Access-Control-Allow-Origin允许。当我尝试跨站脚本时。您能否指导我需要在哪里做出更改以允许此跨站脚本运行？ - Guy

@Guy，这不是关于代码的问题，而是关于浏览器策略的问题。通常情况下，您应该在Web服务器和REST服务器上使用相同的域名，或者您可以在浏览器中关闭跨域策略。在Chrome中 - 通过安装CORS扩展程序或使用特殊标志运行Chrome（请谷歌）。 - S Panfilov

我认为这是旧的，我得到了“has no method 'static'”错误。 - Doug Molineux

获取 connect.static 不是一个函数。 - teg_brightly

请查看我的更新答案，截至2020年6月5日。感谢原帖作者，但现在做起来更容易了。 - Dan Zuzevich

Answer 4

感谢原作者的帖子，但他们的答案现在有点过时了。这很简单。基本设置如下：

const express = require("express");
const app = express();
const dir = `${__dirname}/public/`;

app.get("/", (req, res) => {
  res.sendFile(dir + "index.html");
});

app.get("/contact", (req, res) => {
  res.sendFile(dir + "contact.html");
});

// Serve a 404 page on all other accessed routes, or redirect to specific page
app.get("*", (req, res) => {
  //   res.sendFile(dir + "404.html");
  //   res.redirect("/");
});

app.listen(3000);

以上示例是如果您想提供单个HTML文件。 如果您正在提供单个页面JS应用程序，则可以使用此方法。

const express = require("express");
const app = express();
const dir = `${__dirname}/public/`;

app.get("*", (req, res) => {
  res.sendFile(dir + "index.html");
});

app.listen(3000);

如果您需要从文件夹中提供其他静态资源，您可以在开始定义路由之前添加类似于以下内容的代码：

app.use(express.static('public'))

假设您在公共文件夹中有一个名为js的文件夹，如：public/js。您可以使用相对路径在html文件中包含这些文件中的任何一个。例如，假设/contact需要一个contact.js文件。在您的contact.html文件中，您可以轻松地包含脚本，如下所示：

<script src="./js/contact.js"></script>

借鉴这个例子，你可以对 CSS、图片等进行同样的操作。

<img src="./images/rofl-waffle.png" />
<link rel="stylesheet" href="./css/o-rly-owl.css" />

希望这能帮助未来的每个人。

- Dan Zuzevich

---

当然，根据您的应用程序目录结构更改路径和文件名。 - Dan Zuzevich