Nodejs 第二十七章(动静分离)

什么是动静分离?

动静分离是一种在Web服务器架构中常用的优化技术,旨在提高网站的性能和可伸缩性。它基于一个简单的原则:将动态生成的内容(如动态网页、API请求)与静态资源(如HTML、CSS、JavaScript、图像文件)分开处理和分发。

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

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

实现动静分离的方法

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

代码编写

下面是一个使用Node.js编写的示例代码,演示了如何处理动静分离的请求:

js 复制代码
import http from 'node:http' // 导入http模块
import fs from 'node:fs' // 导入文件系统模块
import path from 'node:path' // 导入路径处理模块
import mime from 'mime' // 导入mime模块

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

    // 处理静态资源
    if (method === 'GET' && url.startsWith('/static')) {
        const filePath = path.join(process.cwd(), url) // 获取文件路径
        const mimeType = mime.getType(filePath) // 获取文件的MIME类型
        console.log(mimeType) // 打印MIME类型

        fs.readFile(filePath, (err, data) => { // 读取文件内容
            if (err) {
                res.writeHead(404, {
                    "Content-Type": "text/plain" // 设置响应头为纯文本类型
                })
                res.end('not found') // 返回404 Not Found
            } else {
                res.writeHead(200, {
                    "Content-Type": mimeType, // 设置响应头为对应的MIME类型
                    "Cache-Control": "public, max-age=3600" // 设置缓存控制头
                })
                res.end(data) // 返回文件内容
            }
        })
    }

    // 处理动态资源
    if ((method === 'GET' || method === 'POST') && url.startsWith('/api')) {
        // ...处理动态资源的逻辑
    }
})

server.listen(80) // 监听端口80

因为每个文件所对应的mime类型都不一样,如果手写的话有很多,不过强大的nodejs社区提供了mime库,可以帮我们通过后缀直接分析出 所对应的mime类型,然后我们通过强缓存让浏览器缓存静态资源

常见的mime类型展示

txt 复制代码
-   文本文件:

    -   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:多部分表单数据
相关推荐
2401_882726481 小时前
BY组态-低代码web可视化组件
前端·物联网·低代码·前端框架·web
万维——组态1 小时前
BY组态-低代码web可视化组件
前端·物联网·低代码·编辑器·流程图·组态
小黄编程快乐屋1 小时前
npm操作大全:从入门到精通
前端·npm·node.js
OpenTiny社区1 小时前
TinyEngine v2.1版本发布:全新的区块方案和画布通信方案,打造更强力的可拓展低代码引擎
前端·低代码·开源·opentiny
用户380235599002 小时前
[快速入门:利用LangChain与百度千帆平台进行对话模型集成]
前端
黑客老陈3 小时前
基于 Electron 应用的安全测试基础 — 提取和分析 .asar 文件
运维·服务器·前端·javascript·网络·electron·xss
yqcoder3 小时前
electron 获取本机 ip 地址
前端·javascript·electron
唐某霖4 小时前
el-dialog弹窗的@open方法中,第一次引用ref发现undefined问题,第二次后面又正常了
前端·javascript·vue.js
cdcdhj4 小时前
nodejs后端ws与http结合共享一个服务器,前端websocket发送信息后端ws接收信息,使用Map定型数组设置ID
服务器·前端·http
珹洺5 小时前
音乐播放器实现:前端HTML,CSS,JavaScript综合大项目
开发语言·前端·javascript·css·gitee·bootstrap·html