Google Developersにて(6)

> index.htmlのcssが読み込まれない?
> .tmpフォルダが必要なの?

ということで、直接サーバから出力されるページと、プロキシ経由のページを分ける必要があるみたいなので、調査しました。
で、正解かどうかはわからないですが、解決方法をメモしておきます。

まず、http-proxyなるモジュールをインストールします。

$ npm install –save-dev http-proxy
gulpfile.fsファイルに次の変更を行います。

次のコメント以下のブロックに、

// Include Gulp & tools we’ll use
次の行を追加

var httpProxy = require(‘http-proxy’);

次のブロックを次のように変更

// Watch files for changes & reload
gulp.task(‘serve’, [‘styles’], function () {
  var proxy = httpProxy.createProxyServer({});
  browserSync({
    notify: false,
    // Customize the BrowserSync console logging prefix
    logPrefix: ‘WSK’,
    // Run as an https by uncommenting ‘https: true’
    // Note: this uses an unsigned certificate which on first access
    //       will present a certificate warning in the browser.
    // https: true,
    //server :[‘.tmp’, ‘app’],
    // PHPのページに対応するため、Proxyの設定を行う
    //proxy: “localhost:8888”,
    server: {
    baseDir :[‘.tmp’, ‘app’],
      // THIS IS THE ADDED MIDDLEWARE
    middleware: function (req, res, next) {
        var url = req.url;
        if (!url.match(/^/(styles|fonts|bower_components)//)) {
           proxy.web(req, res, { target: ‘http://localhost:8888’ });
        } else {
           next();
        }
    }
    }
    // external 指定すると、実行時のアクセスURLがIPアドレス指定側で開くことができる
    //external
  });

これで、styles,fonts,bower_componentsの3つのフォルダ以外はプロキシ経由で表示されると。

これで、Web starter kitをPHPに対応出来たと思っていいのか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です