Node.js 정적 리소스 서버 구현(코드 포함)-JS 튜토리얼-php.cn

이 기사의 내용은 Node.js의 정적 리소스 서버 구현(코드 포함)에 대한 내용입니다. 필요한 친구가 참고할 수 있기를 바랍니다.

이 글에서는 Node.js 초보자에게 도움이 되길 바라며 간단한 정적 리소스 서버 예제 프로젝트를 소개합니다. 이 프로젝트에는 http, fs, url, path, zlib, process, child_process 및 기타 모듈이 포함되어 있으며 일반적으로 사용되는 수많은 API를 포함합니다. 또한 http 프로토콜, gzip 압축 최적화 등을 기반으로 한 캐싱 전략도 포함됩니다. 이를 npm에 게시하고 전 세계적으로 설치하고 사용할 수 있는 작은 도구로 만들 것입니다. 참새는 작지만 내장이 다 들어있다고 생각하면 좀 설레지 않나요? 더 이상 고민하지 말고 속도를 높여 보겠습니다.

기사에 나온 소스코드 주소는 최종 부록에 있습니다.
프로젝트 효과를 미리 경험할 수 있습니다:
설치: npm i -g here11
임의의 폴더 주소에 명령을 입력하세요: here

step1 새 프로젝트 만들기

#🎜 🎜#npm에 게시하고 싶기 때문에 먼저 국제 관행을 따르고 npm init, 가자! 명령줄에서 Enter 키를 계속 누를 수 있으며 일부 구성은 최종 게시 단계에서 자세히 설명됩니다.

디렉터리 구조는 다음과 같습니다.

Node.js 정적 리소스 서버 구현(코드 포함)

bin 폴더에는 실행 코드가 저장되며, 웹은 다음과 같은 폴더로 사용됩니다. 테스트 폴더.

step2 code

step2.1 Prototype

정적 리소스 서버는 일반인의 용어로 "http: //도메인 이름/ test/index.html", 서버는 루트 디렉터리의 해당 폴더에서 index.html을 찾아 파일 내용을 읽어 브라우저에 반환하고, 브라우저는 이를 사용자에게 렌더링합니다.

const http = require("http");
const url = require("url");
const fs = require("fs");
const path = require("path");

const item = (name, parentPath) => {
    let path = parentPath = `${parentPath}/${name}`.slice(1);
    return `<p><a>${name}</a></p>`;
}

const list = (arr, parentPath) => {
    return arr.map(name => item(name, parentPath)).join("");
}

const server = http.createServer((req, res) => {
    let _path = url.parse(req.url).pathname;//去掉search
    let parentPath = _path;
    _path = path.join(__dirname, _path);
    try {
        //拿到路径所对应的文件描述对象
        let stats = fs.statSync(_path);
        if (stats.isFile()) {
            //是文件，返回文件内容
            let file = fs.readFileSync(_path);
            res.end(file);
        } else if (stats.isDirectory()) {
            //是目录，返回目录列表，让用户可以继续点击
            let dirArray = fs.readdirSync(_path);
            res.end(list(dirArray, parentPath));
        } else {
            res.end();
        }
    } catch (err) {
        res.writeHead(404, "Not Found");
        res.end();
    }
});

const port = 2234;
const hostname = "127.0.0.1";
server.listen(port, hostname, () => {
    console.log(`server is running on http://${hostname}:${port}`);
});

로그인 후 복사

위 코드는 핵심 기능이 구현된 코드입니다. 로컬로 실행하면 파일 이름을 클릭하여 해당 웹 페이지를 탐색할 수 있습니다. , 사진, 텍스트 라.

step2.2 최적화

기능이 구현되었지만 실용성을 높이고 더 많은 API(가장 기술)를 배우기 위해 일부 측면에서 최적화할 수 있습니다.

1.stream

파일을 읽고 브라우저에 반환하는 현재 작업은 파일을 한 번 읽고 readFile을 통해 한 번 반환하는 것입니다. 함수이지만 더 나은 방법이 있습니다. 스트림을 사용하여 IO 작업을 수행하는 것입니다. 스트림은 node.js만의 고유한 개념이 아니라 운영 체제의 가장 기본적인 동작 형태이므로 이론적으로 모든 서버 측 언어가 스트림 API를 구현합니다.

스트림을 사용하는 것이 더 좋은 방법인 이유는 무엇인가요? 대용량 파일을 한번에 읽고 운영하는 것은 메모리와 네트워크를 소모하기 때문에 특히 스트림의 도움으로 사용자 방문 수가 상대적으로 많은 경우 데이터가 비트 단위로 흐르고 운영될 수 있어 성능이 향상됩니다. 코드 수정은 다음과 같습니다:

if (stats.isFile()) {
    //是文件，返回文件内容
    //在createServer时传入的回调函数被添加到了"request"事件上，回调函数的两个形参req和res
    //分别为http.IncomingMessage对象和http.ServerResponse对象
    //并且它们都实现了流接口
    let readStream = fs.createReadStream(_path);
    readStream.pipe(res);
}

로그인 후 복사

코딩 구현은 매우 간단합니다. 파일 내용을 반환해야 할 때 읽을 수 있는 스트림을 생성하고 이를 res 객체로 보냅니다.

2.gzip 압축

gzip 압축으로 인한 성능(사용자 액세스 경험) 개선은 특히 gzip 압축을 사용하는 인기 있는 스파 애플리케이션 시대에 매우 분명합니다. , js, css 등 파일 리소스의 크기를 대폭 줄이고 사용자 액세스 속도를 향상시킬 수 있습니다. 정적 리소스 서버로서 당연히 이 기능을 추가해야 합니다.

노드에는 압축 관련 API를 많이 제공하는 zlib 모듈이 있습니다. 우리는 이를 사용하여 다음을 구현합니다.

const zlib = require("zlib");

if (stats.isFile()) {
    //是文件，返回文件内容

    res.setHeader("content-encoding", "gzip");
    
    const gzip = zlib.createGzip();
    let readStream = fs.createReadStream(_path);
    readStream.pipe(gzip).pipe(res);
}

로그인 후 복사

스트림 사용 경험을 바탕으로 살펴보기 이 코드는 이해하기 훨씬 쉽습니다. 파일 스트림을 먼저 gzip 개체로 보낸 다음 res 개체로 보냅니다. 또한, gzip 압축을 사용할 때 한 가지 주의할 점은 응답 헤더의 콘텐츠 인코딩을 gzip으로 설정해야 한다는 것입니다. 그렇지 않으면 브라우저에 잘못된 문자가 많이 표시됩니다.

3. http 캐시

캐싱은 잘 사용하면 사용자 경험을 향상시키고 잘못 사용하면 서버 부담을 줄일 수 있습니다. 당신은 온갖 이상한 문제에 직면하게 될 것입니다. 일반적으로 브라우저 http 캐시는 강력한 캐시(비검증 캐시)와 협상 캐시(검증 캐시)로 구분됩니다.

강력캐싱이란 무엇인가요? 강력한 캐싱은 캐시 제어(cache-control)와 만료(expired)라는 두 가지 헤더 필드로 제어됩니다. 예를 들어, 우리는 캐시 제어의 응답 헤더를 설정합니다: max-age=31536000, 이는 이 리소스의 캐시 기간이 1년임을 브라우저에 알려줍니다. 1년 이내에는 서버에 요청을 보낼 필요가 없습니다. 리소스는 캐시에서 직접 읽혀집니다. No -cache), 서버에 요청을 보내고 리소스의 유효성을 확인한 다음 캐시에서 읽을지 아니면 새 리소스를 반환할지 결정합니다.

위 개념을 사용하여 캐싱 전략을 공식화할 수 있습니다.

if (stats.isFile()) {
    //是文件，返回文件内容
    
    //增加判断文件是否有改动，没有改动返回304的逻辑
    
    //从请求头获取modified时间
    let IfModifiedSince = req.headers["if-modified-since"];
    //获取文件的修改日期——时间戳格式
    let mtime = stats.mtime;
    //如果服务器上的文件修改时间小于等于请求头携带的修改时间，则认定文件没有变化
    if (IfModifiedSince && mtime <p>这样一套缓存策略在现代前端项目体系下还是比较合适的，尤其是对于spa应用来讲。我们希望index.html能够保证每次向服务器验证是否有更新，而其余的文件统一本地缓存一个月（自己定）；通过webpack打包或其他工程化方式构建之后，js、css内容如果发生变化，文件名相应更新，index.html插入的manifest（或script链接、link链接等）清单会更新，保证用户能够实时得到最新的资源。</p><p>当然，缓存之路千万条，适合业务才重要，大家可以灵活制定。</p><h4>4. 命令行参数</h4><p>作为一个在命令行执行的工具，怎么能不象征性的支持几个参数呢？</p><pre class="brush:php;toolbar:false">const config = {
    //从命令行中获取端口号，如果未设置采用默认
    port: process.argv[2] || 2234,
    hostname: "127.0.0.1"
}
server.listen(config.port, config.hostname, () => {
    console.log(`server is running on http://${config.hostname}:${config.port}`);
});

로그인 후 복사

这里就简单的举个栗子啦，大家可以自由发挥！

5. 自动打开浏览器

虽然没太大卵用，但还是要加。我就是要让你们知道，我加完之后什么样，你们就是什么样 :-( duang~

const exec = require("child_process").exec;
server.listen(config.port, config.hostname, () => {
    console.log(`server is running on http://${config.hostname}:${config.port}`);
    exec(`open http://${config.hostname}:${config.port}`);
});

로그인 후 복사

6. process.cwd()

用process.cwd()代替__dirname。
我们最终要做成一个全局并且可以在任意目录下调用的命令，所以拼接path的代码修改如下：

//__dirname是当前文件的目录地址，process.cwd()返回的是脚本执行的路径
_path = path.join(process.cwd(), _path);

로그인 후 복사

step3 发布

基本上我们的代码都写完了，可以考虑发布了！（不发布到npm上何以显示逼格？）

step3.1 package.json

得到一个配置类似下面所示的json文件：

{
    "name": "here11",
    "version": "0.0.13",
    "private": false,
    "description": "a node static assets server",
    "bin": {
        "here": "./bin/index.js"
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/gww666/here.git"
    },
    "scripts": {
        "test": "node bin/index.js"
    },
    "keywords": [
        "node"
    ],
    "author": "gw666",
    "license": "ISC"
}

로그인 후 복사

其中bin和private较为重要，其余的按照自己的项目情况填写。
bin这个配置代表的是npm i -g xxx之后，我们运行here命令所执行的文件，“here”这个名字可以随意起。