在本小节中，我们将学习如何使用Node.js建立一个简单的静态文件服务，以便为客户端提供HTML、CSS、JavaScript等静态文件。
环境准备
首先，请确保你已经安装了Node.js。可以通过以下命令检查Node.js和npm（Node包管理器）是否已正确安装：
创建项目
我们将创建一个简单的项目来提供静态文件服务。首先，创建一个新目录并进入其中：
1
2
| mkdir static-server
cd static-server
|
然后，初始化一个新的Node.js项目：
这将生成一个package.json文件，其中包含项目的基本信息。
安装所需模块
我们将使用内置的http和fs模块，因此无需额外安装。如果你希望使用更方便的静态文件服务，可以选择使用serve或express等库。但为了学习的目的，这里我们将手动创建一个基础的静态文件服务。
创建静态文件
在项目目录中，创建一个名为public的文件夹，用于存放静态文件：
在public文件夹中，创建一个简单的index.html文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Static File Server</title>
</head>
<body>
<h1>欢迎来到静态文件服务</h1>
<p>这是一个简单的示例页面。</p>
</body>
</html>
|
编写静态文件服务代码
在项目根目录下，创建一个名为server.js的文件。然后，添加以下代码来设置一个简单的HTTP服务器并提供静态文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
const http = require('http');
const fs = require('fs');
const path = require('path');
const server = http.createServer((req, res) => {
let filePath = path.join(__dirname, 'public', req.url === '/' ? 'index.html' : req.url);
const extname = String(path.extname(filePath)).toLowerCase();
const mimeTypes = {
'.html': 'text/html',
'.js': 'text/javascript',
'.css': 'text/css',
'.json': 'application/json',
'.png': 'image/png',
'.jpg': 'image/jpg',
'.gif': 'image/gif',
'.svg': 'image/svg+xml',
'.wav': 'audio/wav',
'.mp4': 'video/mp4',
'.woff': 'application/font-woff',
'.ttf': 'application/font-ttf',
'.eot': 'application/vnd.ms-fontobject',
'.otf': 'application/font-sfnt',
'.css.map': 'text/css',
};
const contentType = mimeTypes[extname] || 'application/octet-stream';
fs.readFile(filePath, (error, content) => {
if (error) {
if (error.code == 'ENOENT') {
res.writeHead(404, { 'Content-Type': 'text/html' });
res.end('<h1>404 Not Found</h1>', 'utf-8');
} else {
res.writeHead(500);
res.end('Sorry, there was an error: ' + error.code + ' ..\n');
}
} else {
res.writeHead(200, { 'Content-Type': contentType });
res.end(content, 'utf-8');
}
});
});
const PORT = 3000;
server.listen(PORT, () => {
console.log(`静态文件服务器已启动，访问 http://localhost:${PORT}`);
});
|
启动服务器
在终端中运行以下命令以启动服务器：
你应该会看到如下输出：
1
| 静态文件服务器已启动，访问 http://localhost:3000
|
访问静态文件
打开你的浏览器，访问http://localhost:3000。如果你成功，应该会看到index.html中的内容。
此外，你还可以向public文件夹添加其他静态文件（例如CSS、JS等），并通过URL访问它们，例如http://localhost:3000/style.css。确保在filePath中提供正确的文件名。
总结
至此，我们已经实现了一个简单的静态文件服务。它能够根据客户端的请求提供相应的静态文件。通过这个例子，你可以了解到Node.js的http和fs模块的基本使用，以及如何处理请求和提供文件内容。在实际应用中，可以使用更高级的框架如Express进行类似的功能扩展。
