• 最简单的静态资源服务器（超级详细）

    提示：本文有参考其他前端部署相关资源，侵权请联系作者删除

    目录

    一、前言

    二、基础知识

    三、入手部署最简单的静态资源服务器

    1.手写最简单的静态资源服务器：响应字符串

    2.手写简单静态资源服务器: 响应文件

    四：对部署的理解

    一、前言

    例如：随着前端技术的不断发展，前端部署这门技术也越来越重要，很多人都开启了学习前端部署。本文我们学习如何创建最基本的静态资源服务器

    提示：以下是本篇文章正文内容，下面案例可供参考

    二、基础知识

    首先我们要了解一下什么是HTTP报文

    http是互联网当中进行数据交互的协议，通过该协议我们可以拿到文档、页面、图片等互联网资源

    而最简部署可看做，你向服务器发送一个获取 HTML 资源的请求，而服务端将响应一段 HTML 资源。我们在请求资源的过程中将发送一段请求报文，而服务端返回的 HTML 资源为响应报文。在这里的响应报文就是我们这个小节要讲的重点。

    就举一个非常简单例子，例如我们现在先展示一段非常简单的http报文

    我们在这里就拿localhost:3000来举例

    1. //请求报文
    2. GET / HTTP/1.1
    3. Host: localhost:3000
    4. User-Agent: curl/7.83.1
    5. Accept: */*
    6.  
    7. //响应报文
    8. HTTP/1.1 200 OK
    9. Date: Wed, 09 Nov 2022 12:17:02 GMT
    10. Connection: keep-alive
    11. Keep-Alive: timeout=5
    12. Content-Length: 285
    13.  
    14.  
    15. //响应体
    16. <!DOCTYPE html>
    17. <html lang="en">
    18. <head>
    19.     <meta charset="UTF-8">
    20.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    21.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    22.     <title>server-response</title>
    23. </head>
    24. <body>
    25.     hello!!!world
    26. </body>
    27. </html>

    我们获得localhost:3000的信息可以使用以下命令行来获取

    curl -vvv localhost:3000

    三、入手部署最简单的静态资源服务器

    1.手写最简单的静态资源服务器：响应字符串

    我们在这里写字符串响应的时候，要用到node当中的http内置模块

    在服务端响应当中最重要的内置模块就是node:http，通过书写前缀:http:可以指明这是一个内置的模块，避免了node:http模块和第三方模块命名发生冲突

    引入node:http

    const http = require('node:http')

    通过 http.createServer 可对外提供 HTTP 服务，而 res.end() 可设置 HTTP 报文的响应体。以下是一段 hello 版本的 nodejs 服务。

    1. const server=http.createServer((req,res)=>res.end(html))
    2. server.listen(3000,()=>{
    3.     console.log("listening 3000");
    4. })

    最后我们将hello!world代码显示如下

    1. //引入node:http模块
    2. const http=require('node:http');
    3.  
    4. //设置响应体
    5. const html=`
    6. <!DOCTYPE html>
    7. <html lang="en">
    8. <head>
    9.     <meta charset="UTF-8">
    10.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    11.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    12.     <title>server-response</title>
    13. </head>
    14. <body>
    15.     hello!!!world
    16. </body>
    17. </html>
    18. `
    19.  
    20. const server=http.createServer((req,res)=>res.end(html))
    21. server.listen(3000,()=>{
    22.     console.log("listening 3000");
    23. })

    最后使用以下命令行开启服务

    $ node server.js

    启动服务后，在浏览器端打开 localhost:3000，可查看到响应头及响应体 hello, world

    然后我们在cmd命令窗口当中输入

    curl -v localhost:3000

    那么就可以看到以下信息：

     在这里就可以说我们已经创建了一个简单的响应字符串的静态资源服务器

    2.手写简单静态资源服务器: 响应文件

    例如上文我们在创建一个响应字符串的静态服务器的时候，在实际开发当中我们不可能会使用这种模板字符串的形式，所以这个时候我们就要使用一个node内置的文件系统了

    那么这个http内置模块就是node:fs,可以使用fs.readFileSync进行文件的写和读取

    下面是引入http当中的fs内置模块和使用文件系统代码示例

    1. // fs 为内置模块，
    2. const fs = require('node:fs')
    3.  
    4. // 通过 fs.readFileSync 可读取文件内容
    5. const html = fs.readFileSync('./index.html')

    对比我们前面讲的模板字符串引入方式，在这里我们就可以使用文件系统进行代码编辑了

    下面是使用两个内置模块引入index.html的过程

    1. const http = require('node:http')
    2. const fs = require('node:fs')
    3.  
    4. // 上段代码这里是一段字符串，而这里通过读取文件获取内容
    5. const html = fs.readFileSync('./index.html')
    6.  
    7. const server = http.createServer((req, res) => res.end(html))
    8. server.listen(3000, () => {
    9.   console.log('Listening 3000')
    10. })

    最后再使用以下代码启动服务

    $ node server.js

    四：对部署的理解

    通过以上两个最简服务的成功运行，我们可以说已经自己部署好了简单的静态资源服务器。我们再回头看，什么是部署呢，为什么说你刚才部署成功？

    假设此时你有一台拥有公共 IP 地址的服务器，在这台服务器使用 nodejs 运行刚才的代码，则外网的人可通过 IP:3000 访问该页面。那这可理解为部署，使得所有人都可以访问。

    假设你将该服务器作为你的工作环境，通过 npm start 运行代码并通过，所有人都可访问他，即可视为部署成功。看来你离所有人都可访问的部署只差一台拥有公共 IP 的服务器。

    实际上，有极少数小微企业在生产环境中就是直接 ssh 进生产环境服务器，并通过 npm start 部署成功后，通过 IP 与端口号的方式进行访问。当然通过 IP 地址访问的项目一般也非公开项目，如果公开使用域名的话，则用 nginx 配置域名加一层反向代理。

  • 相关阅读:
    渗透测试nginx增加400,500报错页面
    Java NIO原理 （Selector、Channel、Buffer、零拷贝、IO多路复用）
    pytorch（11）-- crnn 车牌端到端识别
    基于h5的风云网球网站的设计
    部署MES系统的实际作用和意义是什么？这篇文章总结得很全面
    玩转Mysql系列 - 第16篇：变量详解
    @requestmapping注解的作用及用法
    Mysql数据库索引
    Java面向对象编程
    一次搞定：借助Hutool封装代码快速解决webservice调用烦恼
  • 原文地址：https://blog.csdn.net/m0_68997646/article/details/127775886