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

一、前言

二、基础知识

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

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

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

四：对部署的理解

一、前言

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

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

二、基础知识

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

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

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

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

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

//请求报文
GET / HTTP/1.1
Host: localhost:3000
User-Agent: curl/7.83.1
Accept: */*//响应报文
HTTP/1.1 200 OK
Date: Wed, 09 Nov 2022 12:17:02 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Content-Length: 285//响应体
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>server-response</title>
</head>
<body>hello!!!world
</body>
</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 服务。

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

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

//引入node:http模块
const http=require('node:http');//设置响应体
const html=`
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>server-response</title>
</head>
<body>hello!!!world
</body>
</html>
`const server=http.createServer((req,res)=>res.end(html))
server.listen(3000,()=>{console.log("listening 3000");
})

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

$ node server.js

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

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

curl -v localhost:3000

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

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

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

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

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

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

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

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

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

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

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

$ node server.js

四：对部署的理解

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

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

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

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

最简单的静态资源服务器（超级详细）相关推荐

自己动手搭建一个简单的静态资源服务器
文章目录自己动手搭建一个简单的静态资源服务器介绍一.设计到的模块备注: 二.代码结构三.具体代码自己动手搭建一个简单的静态资源服务器介绍通过此文章的学习,可以自己使用NodeJs搭 ...
【原创】分布式之缓存击穿【原创】自己动手实现静态资源服务器【原创】自己动手实现JDK动态代理...
[原创]分布式之缓存击穿什么是缓存击穿在谈论缓存击穿之前,我们先来回忆下从缓存中加载数据的逻辑,如下图所示因此,如果黑客每次故意查询一个在缓存内必然不存在的数据,导致每次请求都要去存储层去查询, ...
nginx静态资源服务器简单配置
传统的web项目,一般都将静态资源存放在 webroot的目录下,这样做很方便获取静态资源,但是如果说web项目很大,用户很多,静态资源也很多时,服务器的性能或许就会很低下了.这种情况下一般都会需要 ...
Linux-CentOS 7 nginx静态资源服务器简单配置
nginx静态资源服务器简单配置在nginx的server中可以拥有多个location,但location 后面那部分不能一样. 进入nginx安装目录的conf目录下,修改nginx.conf文 ...
php静态资源服务器,Node实现静态资源服务器
这次给大家带来Node实现静态资源服务器,Node实现静态资源服务器的注意事项有哪些,下面就是实战案例,一起来看一下. http的原理是对请求和响应进行了包装,当客户端连接上来之后先触发connect ...
nodejs从服务器返回静态文件,nodejs静态资源服务器
nodejs静态资源服务器内容精选换一换 WebSdk需要客户结合自身业务需求搭建web服务器并集成sdk使用.自行搭建一个web服务器,将wwwroot下的文件拷贝到web服务器的静态资源目录下 ...
NodeJS 创建静态资源服务器
最近,学习了一下 NodeJS 自己研究了一个静态资源服务器写的不好,希望高手多多指教目录结构文件详解 .gitignore 文件这个文件主要是我们将本地项目上传到 GitHub 上时,忽略的文 ...
入门Nginx之-静态资源服务器及跨域配置
简介这里静态资源就以之前的一个项目文章地址为例,源码 Github,项目本身很简单,只是分别对第三方的服务端.自己的服务端发起请求. 不论是调用第三方服务端接口,还是自己的后端服务,如果跨域未在服务 ...
Node搭建静态资源服务器时后缀名与响应头映射关系的Json文件
场景使用Node搭建一个静态资源服务器,使其根据请求不同的文件类型设置不同的响应头. 比如: ".png":"image/png" , ".png& ...

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

一、前言

二、基础知识

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

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

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

四：对部署的理解

最简单的静态资源服务器（超级详细）相关推荐

最新文章

热门文章