使用node搭建静态资源服务器(2)

在上一篇使用node搭建静态资源服务器(1)中,我们已经实现了基本的功能,下面继续实现进阶功能。

静态资源的压缩

//compress.js
module.exports = (rs,req,res) => {
   const acceptEncoding = req.headers[‘accept-encoding‘];
   if(!acceptEncoding || !acceptEncoding.match(/\b(gzip|defalte)\b/)) {
       return  rs;
   }else if(acceptEncoding.match(/\bgzip\b/)){
       res.setHeader(‘Content-Encoding‘,‘gzip‘)
       return rs.pipe(createGzip())
   }else if(acceptEncoding.match(/\defalte\b/)){
       res.setHeader(‘Content-Encoding‘,‘gzip‘)
       return rs.pipe(creatDeflate())
   }
}

对压缩文件的调用前首先要声明服务器支持对哪些文件类型进行压缩。

//服务器支持的压缩类型,config.js
module.exports = {
    root:process.cwd(),
    hostname:"127.0.0.1",
    port:9876,
    compress:/\.(html|js|css| md|png)/,

    }
//对压缩类型进行调用
let rs  =  fs.createReadStream(filePath);
            if(filePath.match(config.compress)){
               rs = compress(rs,req,res)
            }
rs.pipe(res);

对文件类型的判断

我们可以对文件类型进行判断,然后设置对应正确的值,这样可以防止浏览器不能解析引起的乱码等错误。

//mimeType.js
const path = require(‘path‘);

const mimeType ={
    ‘css‘:‘text/css‘,
    ‘js‘:‘text/javascript‘,
    ‘html‘:‘text/html‘,
    ‘json‘:‘application/json‘,
    ‘jpeg‘:‘image/jpeg‘,
    ‘png‘:‘image/png‘

}
module.exports = (filePath) => {
  let ext = path.extname(filePath).split(‘.‘).pop().toLocaleLowerCase();

  if(!ext) {
      ext = filePath
  }

  return mimeType[ext] || mimeType[‘html‘]
}
//对类型判断方法的调用
const contentType = mimeType(filePath);
 res.setHeader(‘Content-Type‘, contentType);

自定义端口等

我们在自定义的配置文件里实现了默认的端口,但我们也可以从命令行直接读取配置,这里需要用到node的yargs模块。

//index.js
const yargs = require(‘yargs‘);
const Server = require(‘./app‘);
const chalk = require(‘chalk‘);
const argv = yargs
    .usage(‘anydoor [options]‘)
    .option(‘p‘,{
        alias:‘port‘,
        describe:‘端口号‘,
        default:9876
    })
    .option(‘h‘,{
        alias:‘hostname‘,
        describe:‘host‘,
        default:‘127.0.0.1‘
    })
    .option(‘d‘,{
        alias:‘root‘,
        describe:‘root path‘,
        default:process.cwd()
    })
    .version()
    .alias(‘v‘,‘version‘)
    .help()
    .argv;

    const server = new Server(argv);
    console.log(chalk.red(argv));
    server.start();

由于要把接收的参数作为配置传递给server,所以我们要对app.js做下修改,让它合并参数,并对外暴露一个server。

const http = require("http");
const chalk = require("chalk");
const path = require(‘path‘);
const route = require(‘./helper/route‘)
const conf = require(‘./config/config‘)

class Server {
    constructor(config) {
        this.config = Object.assign({},conf,config)
    }

    start() {
            const server = http.createServer((req, res) => {
            const filePath = path.join(this.config.root, req.url);
            route(req, res, filePath, this.config);

        });

        server.listen(this.config.port, this.config.hostname, () => {
            const addr = `http://${this.config.hostname}:${this.config.port}`;
            console.log(`Server started at ${chalk.green(addr)}`);
        });

    }
}

module.exports = Server;

开发完成我们就可以使用“node src/index.js -p 9999”命令来启动我们的server了,当然你也可以自定义其它信息。

原文地址:https://www.cnblogs.com/JessicaIsEvolving/p/9463625.html

时间: 2024-11-05 16:07:08

使用node搭建静态资源服务器(2)的相关文章

web站点优化之使用tengine搭建静态资源服务器和静态资源合并加载案例剖析

在一个项目还是单体架构的时候,所有的js,css,image都会在一个web网站上,看起来并没有什么问题,比如下面这样: 但是当web网站流量起来的时候,这个单体架构必须要进行横向扩展,而在原来的架构中静态资源这羊毛是出在单体架构这头羊身上,所以横向多少 个单体,就有多少个静态资源文件夹,比如下面这样的架构. 那这种架构有什么问题呢? 总的来说会有如下二个问题: 1.   浏览器对单一域名的请求有并发限制. 在同一个域名下,一般来说有js,css,img,media,html等等静态资源,如果资

nginx搭建静态资源服务器遇到403 Forbidden

1.在nginx中配置静态服务器 server { listen 91; server_name localhost; location / { root /root/software/qingfeng; index index.html; } } 这是我放静态资源的/root/software/qingfeng目录(注意:我这放在/root目录下) 我启动nginx时访问   ip地址:91时,访问不了,报403 Forbidden错误 2.我又从新在nginx中配置静态服务器 server

linux使用Nginx搭建静态资源服务器

最近公司需要做一个宣传片播放  视频有点大 好几百M 就想到使用Nginx来代理静态资源,在过程中出现了一些问题,比如端口没开.访问是403等,没有成功,后面慢慢查找问题,才发现大部分博客资料的都不全,所以在这里记录一下. 安装过程本文就不提了 网上都有很多 本文主要说明 nginx.conf 的配置 如下: 进入编辑nginx.conf 文件 输入密码 配置nginx.conf 上传文件到配置的路径 在网页地址栏输入对应的地址 如果出现 nginx静态资源文件无法访问,403 forbidde

nginx搭建静态资源服务器

nginx配置访问前端工程 1.前端工程目录 crm-view |-- view |-- user.html 2.工程位置 C:\Users\Administrator\Desktop\CRM系统\crm-view 3.配置nginx 找到nginx安装目录打开conf/nginx.conf添加如下节点配置 #vue工程跳转 server { #访问端口 listen 8081; server_name localhost; ? ? error_page 500 502 503 504 /50x

Nginx——静态资源服务器(一)

java web的项目中,我们经常将项目部署到Tomcat或者jetty上,可以通过Tomcat或者jetty启动的服务来访问静态资源.但是随着Nginx的普及,用Nginx来作为静态资源服务器,似乎有着更高的性能.接下来的Nginx--静态资源服务器系列随笔,我想探讨以下几个问题: Nginx作为静态资源服务器,有什么优势? Nginx如何和tomcat结合起来使用? Nginx如何搭建CDN? 等等 静态资源是指非服务器运行动态生成的文件,主要包括浏览器端渲染(html.css.js).图片

【学习Koa】原生koa2 静态资源服务器例子

实现思路 首先读取当前路径下所有的文件和文件夹 当去点击某个列表项时判断其实文件还是文件夹,文件的话直接读取,文件夹则再次利用上一个步骤读取并展示 文件结构 代码 index.js 入口文件 const Koa = require('koa') const path = require('path') const getContent = require('./util/content') const mimes = require('./util/mimes') const app = new

静态资源服务器功能

/** * 静态服务器功能:核心模块HTTP * 初步实现服务器功能 */ const http = require('http'); //创建服务器实例对象 let server = http.createServer(); //绑定请求事件 server.on('request',(req,res) => { res.end('hello'); }); //监听端口 访问地址:localhost:3000 server.listen(3000); //====================

HTTP静态资源服务器搭建

1.搭建服务器原因 前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构.多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础.这个步骤是系统架构从猿进化成人的必经之路. 核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互. 在互联网架构中: Web服务器:一般指像nginx

图片等静态资源服务器的设计和应用

最近网站需要上传一些图片,于是考虑做一个专门管理静态资源的服务: 归纳的实现有几点: 1,使用jsonp或http跨域上传(文件流传输): 2,本地上传并服务器之间同步: 3,本地上传,做目录映射(IIS?) 后来看到阿里云的OSS,小手一抖便注册使用了,只需要上传就可以访问了,不需要额外部署应用服务器,有java sdk,于是乎...(未完待续) 相关链接: http://www.aliyun.com/ http://free.aliyun.com/?tracelog=ECSmokuai#OS