来源：Node.js

动静分离

什么是动静分离

动静分离是一种在Web服务器架构中常用的优化技术，旨在提高网站的性能和可伸缩性

它基于一个简单的原则：将动态生成的内容（如动态网页、API请求）与静态资源（如HTML、CSS、JavaScript、图像文件）分开处理和分发

通过将动态内容和静态资源存储在不同的服务器或服务上，并使用不同的处理机制，可以提高网站的处理效率和响应速度，这种分离的好处包括：

  • 性能优化：由于静态资源往往是不变的，可以使用缓存机制将其存储在CDN（内容分发网络）或浏览器缓存中，从而减少网络请求和数据传输的开销
  • 负载均衡：通过将动态请求分发到不同的服务器或服务上，可以平衡服务器的负载，提高整个系统的可伸缩性和容错性
  • 安全性：静态资源通常是公开可访问的，而动态请求可能涉及敏感数据或需要特定的身份验证和授权，动静分离可以更好地管理访问控制和安全策略

如何实现动静分离

  • 使用反向代理服务器（如Nginx、Apache）将静态请求和动态请求转发到不同的后端服务器或服务。
  • 将静态资源部署到CDN上，通过CDN分发静态资源，减轻源服务器的负载
  • 使用专门的静态文件服务器（如Amazon S3、Google Cloud Storage）存储和提供静态资源，而将动态请求交给应用服务器处理

mime类型

不同资源有着不同的mime类型，如果怕麻烦，可以安装库

1
pnpm i mime

它可以自动分析文件的mime类型

文本文件

  • text/plain：纯文本文件
  • text/html：HTML 文件
  • text/css：CSS 样式表文件
  • text/javascript：JavaScript 文件
  • application/json：JSON 数据

图像文件

  • image/jpeg：JPEG 图像
  • image/png：PNG 图像
  • image/gif：GIF 图像
  • image/svg+xml：SVG 图像

音频文件

  • audio/mpeg：MPEG 音频
  • audio/wav：WAV 音频
  • audio/midi：MIDI 音频

视频文件

  • video/mp4：MP4 视频
  • video/mpeg：MPEG 视频
  • video/quicktime：QuickTime 视频

应用程序文件

  • application/pdf：PDF 文件
  • application/zip：ZIP 压缩文件
  • application/x-www-form-urlencoded：表单提交数据
  • multipart/form-data：多部分表单数据

使用

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
import http from 'node:http'
import fs from 'node:fs'
import path from 'node:path'
import mime from 'mime'

http.createServer((req, res) => {
  const { method, url } = req

  // 处理静态资源
  // 路径以/static开头，说明获取的是静态资源
  if(method === 'GET' && url.startsWith('/static')) {

    // 获取静态资源的绝对路径
    const staticPath = path.join(process.cwd(), url)
    fs.readFile(staticPath, (err, data) => {
      if(err) {
        res.writeHead(404, {
          'Content-Type': 'text/plain'
        })
        res.end('Not Found')
      } else {
        // 获取文件的mimetype
        const type = mime.getType(staticPath)
        console.log('我真的获取了')
        res.writeHead(200, {
          'Content-Type': type,  // mimetype
          // 缓存控制头  https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control
          // public:强缓存，在浏览器内缓存，分为memory cache（内存缓存）和disk cache（硬盘缓存），浏览器会自动调整缓存策略
          // max-age:最大缓存时间（秒）
          'Cache-Control': 'public, max-age=3600'
        })
        res.end(data)
      }
    })
  }

  // 处理动态资源
  if((method === 'GET' || method === 'POST') && url.startsWith('/api')) {
    // ...各种接口逻辑
    res.writeHead(200, {
      'Content-Type': 'text/plain'
    })
    res.end('我是动态资源')
  }

}).listen(11451, () => console.log('Server running on port 11451'))