提示:本文有参考其他前端部署相关资源,侵权请联系作者删除
目录
一、前言
例如:随着前端技术的不断发展,前端部署这门技术也越来越重要,很多人都开启了学习前端部署。本文我们学习如何创建最基本的静态资源服务器
提示:以下是本篇文章正文内容,下面案例可供参考
二、基础知识
首先我们要了解一下什么是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 配置域名加一层反向代理。