nodejs의 koa-static 미들웨어에 대한 심층 분석

이 글에서는 node의 정적 파일 미들웨어 koa-static을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

관련 권장사항: "nodejs tutorial"

koa-static 사용에 대해 자세히 설명하세요

app.js에서 현재 디렉터리를 호스팅 디렉터리로 지정하려는 경우 일반적으로 다음과 같이 합니다.

const static=require('koa-static')
const Koa=require('koa')
const app=new Koa()

app.use(static('.'))
app.listen(8081)

koa -static은 Koa(노드 프레임워크)에서 가장 일반적으로 사용되며 비교적 성숙한 정적 웹 호스팅 서비스 미들웨어입니다. 외부 링크 정적 리소스(예: CSS 파일)와 같이 Koa에서 자주 사용됩니다.

//下载
npm install koa-static --save

//引入
const server=require('koa-static')

//使用
app.use(server('static'))//或：app.use(server(__dirname+'/static'))

간단히 말하면 서버에 뭔가가 있을 겁니다. 바로 정적 템플릿(상대) 경로

그런 다음 정적 디렉터리의 css 폴더에 있는 xxx.css 파일을 다음과 같이 사용할 수 있습니다.

<link rel="stylesheet" href="css/xxx.css" />

Is 그렇게 간단해요? 그렇다면 그 원리는 무엇입니까?

브라우저 렌더링과 일치하도록 파일 확장자 이름에 따라 요청 헤더 "Content-Type" 값을 설정하세요!

위에 언급된 정적을 살펴보겠습니다.

• static/css/xxx.css를 찾아 존재하는지 확인합니다. static/css/xxx.css 是否存在

• （若存在）设置 Content-Type: text/css;charset=utf-8;

• 通过response返回给浏览器

前面说了koa-static作用是 ☞静态文件托管☜ ，那肯定不只是对于CSS、JavaScript这类资源文件。

事实上，对于图片，koa-static同样可以用于设置 图片缓存 ！就像这样

const server=require('koa-static')
const path=require('path')   //path模块：设置路径信息

const staticPath=path.resolve(__dirname,'static')
const staticServer=server(staticPath,{
	setHeadears:(res,path,stats)=>{
		if(path.indexOf(/[jpg|png|gif|jpeg]/)>-1){
			res.setHeader('Cache-Control',['private','max-age=60'])
		}
	}
})
app.use(staticServer);

——如果对应路径中是jpg/GIF/png/jpeg格式的图片，那么就将其缓存60s。

我们都知道，在express（node框架）中有一个关于静态服务的“便捷方式”：

app.use('/teacher',express.static('/public'))

它可以指定静态服务的“请求前缀” —— 就是指定加载相对于哪个url的静态资源。

很明显，这是非常实用的。我们突然想到，本文上面我们所说的koa-static都是相对于“全局 ”作用的？

如何在koa中实现这个功能呢？koa为开发者提供了另一个（辅助）模块 —— koa-mount

const Koa=require('koa')
const server=require('koa-static')
const mount=require('koa-mount')

const app=new Koa()
app.use(mount('/teacher',server('/public')))

koa-mount是一个将中间件挂载到指定路径的Koa中间件。它可以挂载任意Koa中间件！
前面说过，koa-static是一个中间件，所以koa-mount可以和koa-static结合，以实现和express一样的静态服务请求前缀的功能。

static原理探究

学习了上面神奇的使用方式，你有没有想过它是怎么实现的？
通过 npm info koa-static ，你会发现 koa-static 依赖两个模块，分别是 debug 和 koa-send 。
找到 koa-static 源码的index文件，其核心实现如下：

const send = require('koa-send');
//...
function serve (root, opts) {
	//...
	return async function serve (ctx, next) {
		await next()
		if (ctx.method !== 'HEAD' && ctx.method !== 'GET') return
		if (ctx.body !== null && ctx.status !== 404) return // eslint-disable-line
		try {
			await send(ctx, ctx.path, opts)
		}catch (err) {
			if (err.status !== 404) {
				throw err
			}
		}
	}
}

而经过这段代码，我们发现其中实现核心是 send() 方法，而这是由模块 koa-send 提供的！

找到koa-send的源码，发现其核心实现原理也是很简单的：

if (!ctx.type) ctx.type = type(path, encodingExt)
ctx.body = fs.createReadStream(path)

其中type方法是根据文件后缀来设置 Content-Type ！很实用，但是我们这里更要关注的是另一个比较有趣的事 —— koa-send的原理：

• 设置 Content-Type ，可通过文件后缀进行设置；

• 以Stream形式为ctx.body赋值

为什么说它有趣呢？
除了它竟然也是以设置content-type为目标外，stream流的方式一直受到业界大拿们的推崇：因为它比 fs.readFileSync

은 response

앞서 언급했듯이 koa-static의 기능은 ☞정적 파일 호스팅☜입니다. 확실히 CSS와 JavaScript에만 해당되는 것은 아닙니다.

• 실제로 이미지의 경우 koa-static을 사용하여

  이미지 캐시
를 설정할 수도 있습니다! 이렇게

• app.use(function(ctx){
  	const fs=require('fs')
  	const result=fs.readFileSync('xxx')
  	ctx.type=type(result, encodingExt)
  	ctx.body=result
  })

  로그인 후 복사

  - 해당 경로가 jpg/GIF/png/jpeg 형식의 이미지인 경우 60초 동안 캐시됩니다.

  우리는 모두 Express(노드 프레임워크)의 정적 서비스에 대한 "편리한 방법"이 있다는 것을 알고 있습니다.

  rrreee

  정적 서비스의 "요청 접두사"를 지정할 수 있습니다. 즉, 로드할 URL을 지정합니다. 에 상대적인 정적 리소스입니다. 분명히 이것은 매우 실용적입니다. 이 글에서 위에서 언급한 koa-static이 모두 "
  global
  "과 관련하여 작동한다고 갑자기 생각하게 되었나요?
  
  koa에서 이 기능을 어떻게 구현하나요? koa는 개발자를 위한 또 다른 (보조) 모듈을 제공합니다 -

  koa-mount

  rrreeekoa-mount는 미들웨어를 지정된 경로에 마운트하는 Koa 미들웨어입니다. 모든 Koa 미들웨어를 마운트할 수 있습니다!

  앞서 언급했듯이 koa-static은 미들웨어이므로 koa-mount를 koa-static과 결합하여 express와 동일한 정적 서비스 요청 접두사 기능을 구현할 수 있습니다. 🎜🎜🎜🎜정적 원리 조사🎜🎜위의 마법 사용법을 배운 후, 그것이 어떻게 구현되는지 생각해 본 적이 있나요? 🎜 npm info koa-static을 통해 koa-static이 debug와 koa-send라는 두 모듈에 의존한다는 것을 알 수 있습니다. 🎜 koa-static 소스 코드의 인덱스 파일을 찾으세요. 핵심 구현은 다음과 같습니다. 🎜rrreee🎜 이 코드 이후에 제공되는 send() 메서드가 핵심 구현이라는 것을 알 수 있습니다. 🎜koa-send🎜 모듈을 통해 제공됩니다! 🎜🎜koa-send의 소스 코드를 찾아 핵심 구현 원리도 매우 간단하다는 것을 확인했습니다. 🎜rrreee🎜유형 방법은 파일 접미사 🎜Content-Type🎜에 따라 설정됩니다! 매우 실용적이지만 여기서 더 주목해야 할 것은 또 다른 흥미로운 점입니다. koa-send의 원리는 다음과 같습니다. 🎜🎜🎜🎜Set Content-Type은 스트림 형식에서 파일 접미사 🎜🎜🎜🎜를 통해 설정할 수 있습니다. ctx .body 할당🎜🎜🎜🎜왜 흥미로운가요? 🎜 스트림 방식은 콘텐츠 유형 설정을 목표로 한다는 사실 외에도 fs.readFileSync보다 더 효율적이기 때문에 업계 전문가들로부터 항상 칭찬을 받아왔습니다! 🎜🎜다음 코드를 위의 koa-send 소스 코드와 비교해 보겠습니다. 🎜rrreee🎜🎜Koa review🎜🎜사실 koa에서 ctx.body의 작동 원리는 실제로 koa-static, koa-와 동일합니다. 이 기사에서 언급한 전송 미들웨어는 비슷합니다. 🎜할당 유형에 따라 다양한 Content-type을 처리합니다🎜🎜🎜🎜🎜본문 유형에 따라 해당 Content-type을 설정합니다.🎜🎜🎜🎜res.write 또는 res.end를 호출합니다. 데이터를 전송하기 위해 콘텐츠 유형에 쓰기 🎜🎜🎜🎜🎜🎜콘텐츠 유형 값🎜 정보: 🎜 문자열 - "text/html"과 "text/plain"(다름)의 두 가지 유형으로 나뉩니다. Buffer / Stream 유형; 🎜 위 유형이 아닌 경우 JSON 객체여야 합니다🎜 (소스 코드는 유형을 결정하기 위해 typeof를 사용합니다. 이 기술은 매우 실용적입니다! 🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 , 방문해주세요: 🎜프로그래밍 비디오🎜!!🎜

  위 내용은 nodejs의 koa-static 미들웨어에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!