web-dev-qa-db-ja.com

Gulp browser-sync-プロキシ経由でAPIリクエストをリダイレクト

私はgulpとbrowser-syncでこのようなAPIリクエストをリダイレクトしようとしています：

gulp.task('browser-sync', function () {

   var files = [
      '../index.html',
      '../views/**/*.html',
      '../assets/css/**/*.css',
      '../assets/js/**/*.js'
   ];

   var url = require('url'),
   proxy = require('proxy-middleware');
   var proxyOptions = url.parse('http://localhost:8000/api');
   proxyOptions.route = '/api';

   browserSync.init(files, {
      server: {
         baseDir: '..',
         middleware: [proxy(proxyOptions)]
      }
   });

});

しかし、呼び出しがAPIに送信されると、この応答を受け取ります。

Error: connect ECONNREFUSED
    at errnoException (net.js:904:11)
    at Object.afterConnect [as oncomplete] (net.js:895:19)

私が間違っていることについてのアイデアはありますか？

apiproxygulpmiddlewarebrowser-sync
27
alskaa

GulpでのBrowserSyncの使用に関する公式ドキュメント を確認してください。 /apiのプロキシを使用してBrowserSyncを問題なく起動し、実行することができました。

ポート8000を使用しているものが他にないことを確認してください。 BrowserSyncの初期化時に portオプションを使用して、BrowserSyncが使用するポートを変更できます 。

gulpfile.jsは次のとおりです。

npm install gulp url proxy-middleware browser-sync --save-dev

// Include gulp
var gulp = require('gulp');

var url = require('url');
var proxy = require('proxy-middleware');
var browserSync = require('browser-sync'); 

var paths =  {
    css: ['./**/*.css', '!./node_modules/**/*']
};


// browser-sync task for starting the server.
gulp.task('browser-sync', function() {
    var proxyOptions = url.parse('http://localhost:3000/secret-api');
    proxyOptions.route = '/api';
    // requests to `/api/x/y/z` are proxied to `http://localhost:3000/secret-api/x/y/z`

    browserSync({
        open: true,
        port: 3000,
        server: {
            baseDir: "./",
            middleware: [proxy(proxyOptions)]
        }
    });
});

// Stream the style changes to the page
gulp.task('reload-css', function() {
    gulp.src(paths.css)
        .pipe(browserSync.reload({stream: true}));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch(paths.css, ['reload-css']);
});

// Default Task
gulp.task('default', ['browser-sync', 'watch']);

変更をリロード/ストリーミングするために別のgulpタスクを作成したくない場合は、 filesオプション を使用できます。

browserSync({
    open: true,
    port: 3000,
    server: {
        baseDir: "./",
        middleware: [proxy(proxyOptions)]
    },
    files: paths.css
});
48
MLM

Grunt + browser-sync + proxy-middlewareのセットアップで同じ問題に遭遇しましたが、うなり声からgulpに移行しました。

Error: connect ECONNREFUSED
    at errnoException (net.js:904:11)
    at Object.afterConnect [as oncomplete] (net.js:895:19)

私の場合、プロキシミドルウェアの動作を許可しなかった企業ネットワーク内の何か。パブリックネットワークに接続すると、問題はなくなりました。

Grunt-connect + grunt-connect-proxyを使用すると、企業ネットワーク内のファイルを問題なくプロキシできます。

proxy-middlewareは独自のプロキシ機能を実装しますが、grunt-connect-proxyはhttp-proxyを使用して実際のプロキシ機能を実行します。

最終的に、http-proxyの周りに小さなミドルウェアラッパーを記述して、ブラウザの同期と接続で使用し、企業ネットワークのプロキシの問題を解決しました。

https://www.npmjs.com/package/http-proxy-middleware

var browserSync = require('browser-sync');
var proxyMiddleware = require('http-proxy-middleware');

var proxy = proxyMiddleware('/ajax', {target: 'http://cdnjs.cloudflare.com'});

browserSync({
    server: {
        baseDir: "./",
        port: 3000,
        middleware: [proxy]
    }
});
12
chimurai