이 글에서는 node의 정적 파일 미들웨어 koa-static을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
관련 권장사항: "nodejs tutorial"
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一样的静态服务请求前缀的功能。
学习了上面神奇的使用方式,你有没有想过它是怎么实现的?
通过 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
Content-를 설정합니다. 유형: text /css;charset=utf-8;
은 response
실제로 이미지의 경우 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초 동안 캐시됩니다.
rrreee정적 서비스의 "요청 접두사"를 지정할 수 있습니다. 즉, 로드할 URL을 지정합니다. 에 상대적인 정적 리소스입니다. 분명히 이것은 매우 실용적입니다. 이 글에서 위에서 언급한 koa-static이 모두 "
koa-mount
global
"과 관련하여 작동한다고 갑자기 생각하게 되었나요?
koa에서 이 기능을 어떻게 구현하나요? koa는 개발자를 위한 또 다른 (보조) 모듈을 제공합니다 -
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!