http-proxy-middlewareを使用して、ローカライズされたフロントエンドプロジェクトのdistディレクトリプレビューを実現します

バックグラウンド

なぜならhttp-proxy、それはサポートしていないpathRewriteだけを介して取得する方法はありませんでしたという議論http-proxy-middlewareプラグインを達成することを。

プロジェクトが依存するもの

• 接続する
• サーブスタティック
• http-proxy-middleware
• http
• 開いた

参照の依存関係

const connect = require('connect');
const serveStatic = require('serve-static');
const http = require('http');
const {createProxyMiddleware} = require('http-proxy-middleware');

基本構成

const config = {
    target: 'http://xx.xx.xx.xx',
    port: 3001,
    host: '0.0.0.0',
    dir: '../dist',
    prefix: '/api',
    publicPath: '/'
};

http-proxy-middleware配置

const proxyConfigMiddleware = {
    target: config.target,
    changeOrigin: true,
    logLevel: 'debug',
    // path rewrite 
    pathRewrite: {
        ['^' + config.prefix]: ''
    }
};

createProxyMiddlewareメソッドを使用すると、proxyMiddlewareが作成されます

const proxyMiddleware = createProxyMiddleware(proxyConfigMiddleware);

ローカルhttpサーバーを構成する

app.use(config.prefix, proxyMiddleware);
app.use(
    config.publicPath,
    serveStatic(config.dir, {
        index: ['index.html', '/']
    })
);

http.createServer(app).listen(config.port, config.host);

呼び出してopenデフォルトのブラウザを開きます

require('open')('http://localhost:' + config.port);

プロジェクトアドレス

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