当我们在构建 Web 应用程序时，通常需要提供静态资源文件，例如 JavaScript、CSS 和图像等。Express.js 是一个非常流行的 Node.js 网络应用程序框架，它提供了一个方便的中间件来服务静态文件。但是，有时候我们需要更多的控制和安全性，让我们来看看在 Express.js 中静态文件服务的最佳实践。
Express.js 默认的静态文件服务
在 Express.js 中，我们可以使用 express.static 中间件来提供静态文件服务。默认情况下，它会将静态文件放置在项目根目录下的 public 文件夹中，并将其暴露在应用程序的根路径下。例如，我们可以将 index.html 文件放在 public 文件夹中，通过以下代码访问它：
const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(3000, () => {
console.log('Server is running on port 3000');
});当我们访问 http://localhost:3000/index.html 时，Express.js 会自动将其服务出来。这是一种方便的方式，适用于大多数情况。但是，在某些情况下，我们需要更多的控制。
指定静态资源路径
默认情况下，Express.js 会将静态文件的根目录设置为应用程序根目录的 public 文件夹，但是有时候我们需要将其设置为其他目录。例如，我们可以将 public 目录移动到 assets 目录中，并将其暴露在应用程序的 /static 路径下：
app.use('/static', express.static('assets'));这里我们使用 app.use 而不是 app.get，这是因为 /static 下的任何资源都可以通过 HTTP GET 请求访问。例如，我们可以在 assets 目录中创建 js/app.js 文件，并通过访问 http://localhost:3000/static/js/app.js 来访问它。
添加缓存控制
当我们访问静态文件时，常常需要添加缓存控制，以减轻服务器负载。Express.js 的 express.static 中间件提供了一个 maxAge 选项来设置缓存时间。例如，我们可以将静态资源的缓存时间设置为一天：
app.use(express.static('public', { maxAge: '1d' }));这意味着浏览器会缓存静态资源，并在 24 小时内再次访问它时不会向服务器发送请求。当然，如果我们需要更细粒度的控制，可以使用其他的缓存技术，例如 Redis 或 Memcached。
使用 HTTPS 协议服务静态资源
由于 HTTPS 协议提供了更好的安全性，推荐我们使用它来服务静态资源。在 Express.js 中，我们可以使用 express-sslify 中间件来强制使用 HTTPS 协议。例如，我们可以将静态资源的根目录设置为 public 文件夹，并在其中添加一张名为 logo.png 的图片：
-- -------------------- ---- -------
----- --- - --------------------------
----- -- - --------------
------------------- ----------------- ---- ----
----------------------------------
------------ ----- ---- -- -
----- ---- - ------------------------------------ ---------
---------------
---
---------------- -- -- -
------------------- -- ------- -- ---- -------
---注意，我们将 ssl.HTTPS 的 trustProtoHeader 选项设置为 true。这是因为我们的应用程序可能在另一个服务器后面运行（例如，我们可能使用了 Heroku 等云平台），并且当访问时，协议和端口可能已经被代理。因此，我们需要告诉 express-sslify 使用正确的协议。
结论
在 Express.js 中服务静态资源是非常容易和方便的，但是这里介绍的最佳实践可以让我们更好地控制和维护我们的应用程序。我们可以指定静态资源路径、添加缓存控制、使用 HTTPS 协议等。不同的应用程序可能需要不同的配置，我们需要根据应用程序的需要选择最佳实践。
示例代码
完整的示例代码可以访问我的 GitHub 仓库：https://github.com/stigmatazh/express-static-files-example。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6727f2b92e7021665e1ea067