静态文件服务 - 搭建服务 - 用 Express 提供静态服务

在现代 Web 开发中，静态文件（如 HTML、CSS、JavaScript、图片等）的处理是非常重要的一环。Node.js 作为一个强大的服务器端 JavaScript 运行环境，为我们提供了很多便捷的工具来搭建静态文件服务。其中，Express 框架是一个非常流行的选择，它简洁、灵活，能够帮助我们快速搭建起高效的静态文件服务。

为什么选择 Express 提供静态服务

Express 是一个基于 Node.js 的 Web 应用框架，具有以下优点：

简单易用：Express 的 API 设计简洁明了，即使是初学者也能快速上手。
灵活性高：可以根据需求灵活配置中间件、路由等，满足不同场景的需求。
性能出色：经过优化，能够高效地处理大量请求。

搭建 Express 静态文件服务的步骤

步骤 1：安装 Node.js 和 npm

首先，你需要在你的计算机上安装 Node.js 和 npm（Node 包管理器）。你可以从 Node.js 官方网站下载适合你操作系统的安装包，然后按照安装向导进行安装。安装完成后，你可以在命令行中输入以下命令来验证安装是否成功：

node -v
npm -v

步骤 2：创建项目目录并初始化项目

打开命令行工具，创建一个新的项目目录，并进入该目录：

mkdir express-static-server
cd express-static-server

然后，使用 npm init -y 命令初始化项目，这将生成一个 package.json 文件，用于管理项目的依赖和配置信息：

npm init -y

步骤 3：安装 Express

在项目目录下，使用 npm 安装 Express：

npm install express

步骤 4：创建静态文件目录和文件

在项目目录下创建一个名为 public 的目录，用于存放静态文件。在 public 目录下创建一个 index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Express Static Server</title>
</head>
<body>
    <h1>Welcome to the Express Static Server!</h1>
</body>
</html>

步骤 5：创建 Express 服务器

在项目根目录下创建一个名为 app.js 的文件，编写以下代码：

const express = require('express');
const app = express();
const port = 3000;
// 使用 express.static 中间件提供静态文件服务
app.use(express.static('public'));
// 启动服务器
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

步骤 6：启动服务器

在命令行中运行以下命令启动服务器：

node app.js

步骤 7：访问静态文件

打开浏览器，访问 http://localhost:3000，你将看到 index.html 文件的内容。

代码解释

const express = require('express');：引入 Express 模块。
const app = express();：创建一个 Express 应用实例。
const port = 3000;：指定服务器监听的端口号。
app.use(express.static('public'));：使用 express.static 中间件来提供静态文件服务。express.static 接受一个参数，即静态文件所在的目录。
app.listen(port, () => {... });：启动服务器并监听指定的端口，当服务器启动成功后，会在控制台输出相应的信息。

高级用法

多个静态文件目录

如果你有多个静态文件目录，可以多次使用 express.static 中间件：

const express = require('express');
const app = express();
const port = 3000;
// 提供多个静态文件目录
app.use(express.static('public'));
app.use(express.static('uploads'));
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

自定义静态文件路径前缀

你可以为静态文件服务指定一个路径前缀，这样访问静态文件时需要加上该前缀：

const express = require('express');
const app = express();
const port = 3000;
// 自定义静态文件路径前缀
app.use('/static', express.static('public'));
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

现在，访问 http://localhost:3000/static/index.html 才能看到 index.html 文件的内容。

总结

功能	代码示例	说明
基本静态文件服务	`app.use(express.static('public'));`	提供 `public` 目录下的静态文件服务
多个静态文件目录	`app.use(express.static('public')); app.use(express.static('uploads'));`	提供多个目录下的静态文件服务
自定义路径前缀	`app.use('/static', express.static('public'));`	为静态文件服务添加路径前缀

通过以上步骤和示例，你可以轻松地使用 Express 搭建一个高效的静态文件服务。Express 的灵活性和易用性使得它成为处理静态文件的首选框架之一。希望本文能帮助你更好地理解和使用 Express 提供静态文件服务。