Utilice http-proxy para realizar una vista previa del directorio dist del proyecto front-end localizado

antecedentes

Proyecto separado de los extremos delantero y trasero, el extremo distal está dispuesto para liberar sustancialmente un servidor de directorio, luego el modo proxy nginx, escuchando /para saltar a la ruta del directorio distal index.html dist almacenado.

server{
    location / {
        gzip  on;
        add_header Cache-control no-cache;
        root 前端dist目录存放的路径;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

Los servicios básicos de front-end back-end están patrocinados a pie de /apiruta, por lo que debemos configurar una /apidistancia de escucha

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服务器
    }

solución

Si desea configurar un entorno similar a un servidor localmente.

var config = {
  target: '服务器端的地址',
  port: 3001, // 本地server 的port
  host: '0.0.0.0', // 本地server 的host
  dir: '../dist', // 监听dist 目录
  prefix: '/api', // 服务器端的api 接口 前缀
  debug: true // 是否开启本地日志。
};

El medio principal de http-proxyesta biblioteca implementa la interfaz de servicio de reenvío.

Por http.createServerla creación de un servicio local

Analizando la ruta de la URL de la solicitud y luego haciendo coincidir de acuerdo con config.prefix, si se incluye el prefijo, si la coincidencia es exitosa, llamará directamente a http-proxy para reenviarlo.

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;
  }
    
})

De lo contrario, si los recursos estáticos interceptan la ruta staticSi no, salte directamente a index.html

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

Primero pase para fs.existsverificar si el archivo existe, si no existe, devuelva 404.

  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;
      }
      
  })

Los recursos estáticos posteriores se obtienen mediante la lectura de archivos y se fs.readFiledevuelven al navegador.

Tipos de archivos básicos

var requestType = {
  "css": "text/css",
  "js": "text/javascript",
  "html": "text/html"
};

Lectura de archivos.

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();
    }
});

A través de esta configuración, la función de vista previa del directorio dist se puede realizar localmente.

github

https://github.com/bosscheng/dist-local-preview