Webpack-dev-сервер с обходом прокси

Как получить опцию «прокси» (аналогично grunt-connect-proxy) с помощью веб-пакета -dev-сервер?

Я использую webpack и webpack-dev-server с помощью Grunt. Задача в Gruntfile.js (код ниже) может запустить сервер на порту 8080. Я хочу добавить настройку прокси для всех запросов данных бэкэнда (контекстный URL-адрес /ajax/*).

       "webpack-dev-server": {
        options: {
            webpack: webpackConfig,
            publicPath: "/src/assets"
        },
        start: {
            keepAlive: true,
            watch: true              
        }
    }

webpack node.js javascript gruntjs grunt-connect-proxy
person CoderTR    schedule 06.11.2014    source источник
comment
Не могли бы Вы уточнить? Вы запускаете webpack-dev-server через CLI или API? Что ты подразумеваешь под добром - ты имеешь в виду живую перезагрузку? Трудно ответить с реальными примерами кода, когда вопрос настолько общий.   -  person Johannes Ewald    schedule 07.11.2014

Ответы (4)


arrow_upward
21
arrow_downward

В конфигурации веб-пакета вы можете использовать devServer.proxy следующим образом:

proxy: {
    '/ajax/*': 'http://your.backend/'
}
person Martin Grůber    schedule 12.06.2015
comment
Мне удалось успешно использовать прокси-сервер при использовании Express, но после перехода на koa и использования koa-webpack-dev-derver мне не повезло. Любые идеи? - person walkerrandophsmith; 17.01.2016
comment
Я не могу отладить проблему с настройками devServer.proxy. WebpackDevServer не передает вызовы API в другое место. Но любые прямые вызовы проходят, так что это определенно проблема проксирования webpack-dev-server. Как я могу отладить это? - person boldnik; 11.02.2016

arrow_upward
1
arrow_downward

В итоге я использовал grunt-contrib-connect и grunt-connect-proxy с webpack-dev-middleware. Таким образом, у меня может быть промежуточное ПО прокси для обработки всех моих запросов данных и промежуточное ПО веб-пакета для обработки статических запросов файлов пакетов.

    var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
    var mountFolder = function (connect, dir) {
       return connect.static(require('path').resolve(dir));
    };

    var prepareDevWebpackMiddleware = function() {

        webpackConfig.devtool = "eval-source-map";
        var compiler = webpack(require("./webpack.config.js"));

        return webpackDevMiddleware(compiler, {
            publicPath : "/assets"           
       });
    };

---- ЗАДАЧА НА ГРУНТ ----

        connect: {
            options: {
                port: 8080,
                hostname: 'localhost',
                livereload : true
            },
            proxies: [{
                context: '/api',
                host: 'localhost',
                port: 8000
            }],
            livereload: {
                options: {
                    middleware: function (connect) {
                        return [
                            prepareDevWebpackMiddleware(),
                            proxySnippet,
                            mountFolder(connect, 'src')
                        ];
                    }
                }
            }
      }
person CoderTR    schedule 16.12.2014
comment
что webpackConfig.devtool = "eval-source-map"; делает в prepareDevWebpackMiddleware? Похоже, это неподходящее место для такого побочного эффекта. - person Andy; 14.07.2015

arrow_upward
1
arrow_downward

API-интерфейс прокси-сервера Webpack dev был изменен с версии 1.15.

https://github.com/webpack/webpack-dev-server/issues/562

glob * должен быть ** для проксирования всех запросов

  devServer: {
    proxy: {
      '**': 'http://local.ui.steelhouse.com/'
    },
  }
person zirho6    schedule 01.09.2016

arrow_upward
0
arrow_downward

webpack-dev-server не знал, как обращаться с вашим контентом, поэтому у него есть конфигурация, которая может проксировать весь ваш запрос на конкретный контент обработки сервера.

Например:

вы должны запустить «хрюканье контента», чтобы запустить сервер контента, а затем запустить «хрюканье», чтобы начать разработку

'use strict';

var webpackDistConfig = require('./webpack.dist.config.js'),
    webpackDevConfig = require('./webpack.config.js');

var mountFolder = function (connect, dir) {
   return connect.static(require('path').resolve(dir));
};

module.exports = function (grunt) {
  // Let *load-grunt-tasks* require everything
  require('load-grunt-tasks')(grunt);

  // Read configuration from package.json
  var pkgConfig = grunt.file.readJSON('package.json');

  grunt.initConfig({
    pkg: pkgConfig,

    webpack: {
      options: webpackDistConfig,

      dist: {
        cache: false
      }
    },

    'webpack-dev-server': {
      options: {
        hot: true,
        port: 8000,
        webpack: webpackDevConfig,
        publicPath: '/assets/',
        contentBase: {target : 'http://localhost:13800'},
      },

      start: {
        keepAlive: true,
      }
    },

    connect: {
      options: {
        port: 8000,
        keepalive: true,
      },
      proxies: [
        {
          context: '/',
          host: '127.0.0.1',
          port: 8031,
          https: false,
          xforward: false
        }
      ],
      dev: {
        options: {
          port : 13800,
          middleware: function (connect) {
            return [
              mountFolder(connect, pkgConfig.src),
              require('grunt-connect-proxy/lib/utils').proxyRequest
            ];
          }
        }
      },
      dist: {
        options: {
          middleware: function (connect) {
            return [
              mountFolder(connect, pkgConfig.dist),
              require('grunt-connect-proxy/lib/utils').proxyRequest
            ];
          }
        }
      }
    },

    open: {
      options: {
        delay: 500
      },
      dev: {
        path: 'http://localhost:<%= connect.options.port %>/webpack-dev-server/'
      },
      dist: {
        path: 'http://localhost:<%= connect.options.port %>/'
      }
    },

    karma: {
      unit: {
        configFile: 'karma.conf.js'
      }
    },

    copy: {
      dist: {
        files: [
          // includes files within path
          {
            flatten: true,
            expand: true,
            src: ['<%= pkg.src %>/*'],
            dest: '<%= pkg.dist %>/',
            filter: 'isFile'
          },
          {
            flatten: true,
            expand: true,
            src: ['<%= pkg.src %>/styles/*'],
            dest: '<%= pkg.dist %>/styles/'
          },
          {
            flatten: true,
            expand: true,
            src: ['<%= pkg.src %>/images/*'],
            dest: '<%= pkg.dist %>/images/'
          },
        ]
      }
    },

    clean: {
      dist: {
        files: [{
          dot: true,
          src: [
            '<%= pkg.dist %>'
          ]
        }]
      }
    }
  });

  grunt.registerTask('serve', function (target) {
    if (target === 'dist') {
      return grunt.task.run(['configureProxies', 'build', 'open:dist', 'connect:dist']);
    }

    grunt.task.run([
      'open:dev',
      'webpack-dev-server'
    ]);
  });

  grunt.registerTask('content', ['configureProxies', 'connect:dev']);

  grunt.registerTask('test', ['karma']);

  grunt.registerTask('build', ['clean', 'copy', 'webpack']);

  grunt.registerTask('default', []);
};

person Daniel Shih    schedule 27.12.2014