利用http-proxy實現本地化前端項目dist目錄預覽

時間 2020-05-20

標籤利用 http proxy 實現本地化前端項目 dist 目錄預覽欄目 HTTP/TCP 简体版

原文原文鏈接

背景

先後端分離項目，前端發佈基本是在服務器放置一個目錄，而後經過 nginx 代理方式，經過監聽 / 跳轉到前端dist目錄存放的路徑下的index.html。javascript

server{
    location / {
        gzip  on;
        add_header Cache-control no-cache;
        root 前端dist目錄存放的路徑;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}
複製代碼

前端發起的後端服務基本都是走 /api 路徑走的，因此還須要配置一個監聽/api距離css

location /api {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_pass http://api.test.cn; // 跳轉到後臺的api服務器
    }
複製代碼

解決方案

若是想在本地配置一套相似服務器端的環境。html

var config = {
  target: '服務器端的地址',
  port: 3001, // 本地server 的port
  host: '0.0.0.0', // 本地server 的host
  dir: '../dist', // 監聽dist 目錄
  prefix: '/api', // 服務器端的api 接口 前綴
  debug: true // 是否開啓本地日誌。
};

複製代碼

主要藉助於 http-proxy 這個庫實現接口的轉發服務。前端

經過 http.createServer 建立本地服務java

經過解析請求URL的路徑，而後根據config.prefix 進行匹配，若是包含prefix ，若是匹配成功了，就直接調用 http-proxy 走轉發走。nginx

http.createServer(function (request, response) {
 // 獲取請求url 的 path
  var pathName = url.parse(request.url).pathname;

    // 走轉發走
  if (pathName.indexOf(config.prefix) === 0) {
    config.debug && console.log(`Rewriting path from "${pathName}" =====> to "${proxyConfig.target}${pathName}"`);
    proxy.web(request, response, proxyConfig);
    return;
  }
    
})
複製代碼

不然經過攔截是否靜態資源路徑 static 若是不是，則直接跳轉到 index.htmlgit

if (pathName.indexOf('static') === -1) {
    pathName = '/index.html';
  }
複製代碼

先經過fs.exists 查看文件是否存在，若是不存在，就返回404.github

realName = path.join(__dirname, config.dir, pathName);
  // 判斷文件是否存在。
  fs.exists(realName,function(exists){
    // 不存在直接返回 404
      if(!exists){
          response.writeHead(404, {'Context-type': 'text/plain'});
          response.write('this request url ' + pathName + ' was not found on this server.');
          response.end();
          return;
      }
      
  })
複製代碼

後續的靜態資源就經過文件讀取的方式獲取fs.readFile 返回給瀏覽器端就好了。web

基本的文件類型後端

var requestType = {
  "css": "text/css",
  "js": "text/javascript",
  "html": "text/html"
};
複製代碼

文件讀取。

fs.readFile(realName, 'binary', function (err, file) {
    if (err) {
      response.writeHead(500, {'Context-type': 'text/plain'});
      response.end(err);
    } else {
      var contentType = requestType[ext] || "text/plain";
      response.writeHead(200, {'Context-type': contentType});
      response.write(file, 'binary');
      response.end();
    }
});
複製代碼

經過這樣的配置就能夠在本地實現dist目錄的預覽功能了。