gulp-webserverで開発用Webサーバーを立ち上げる

こんばんは、ゆあさです。

今日はgulp-webserverを使った開発用のWebサーバー立ち上げの方法と、Web APIサーバーへのプロキシを実現する方法を紹介したいと思います。

gulp-webserverとは

gulp-webserverとは簡単に開発用のWebサーバーを立ち上げることができるgulp用のプラグインです。
ファイルの変更があった際に自動でブラウザを再読み込みしてくれるライブリロード機能や、別で起動しているhttpサーバーへのプロキシ機能などをデフォルトで備えています。

gulp-webserverのインストール

まずは下記コマンドgulp-webserverをインストールします(gulpはすでにインストール済みの前提)

npm install --save-dev gulp-webserver

gulpタスクの追加

gulpfile.jsに下記の用にサーバー立ち上げ用のタスクを追加します。

const gulp = require('gulp');
const webserver = require('gulp-webserver');

gulp.task('webserver', function () {
    gulp.src('dist') // 公開したい静的ファイルを配置したディレクトリを指定する
        .pipe(webserver({
            host: 'localhost',
            port: 8000,
            livereload: true
        }));
});

サーバーの立ち上げ

タスク追加後、ターミナル上で

gulp webserver

を実行することでdistディレクトリをルートとしたWebサーバーが立ち上がります。この状態でブラウザからhttp://localhost:8000にアクセスすると、dist/index.htmlが表示されます。

Web APIサーバーのプロキシを設定する

gulp-webserverにはプロキシ機能が備わっており、下記の用にproxiesオプションを設定すれば http://localhost:8000/api配下へのリクエストが http://localhost:9000 へプロキシされるようになります。

gulp.task('webserver', function () {
    gulp.src('dist')
        .pipe(webserver({
            host: 'localhost',
            port: 8000,
            livereload: true,
            proxies: [
                {
                    source: '/api',
                    target: 'http://localhost:9000'
                }
            ]
        }));
});

このように設定することでproxies.targetに設定したポートで開発用のAPIサーバーを立ち上げておけば、Webサーバーと同じポートでAPIサーバーへと接続できるようになりました。

Web APIサーバーが別ホストを想定したプロキシ

上記の設定をすれば簡単にAPIサーバーへのプロキシを実現できましたが、 Webサーバーがexample.com、APIサーバーがapi.example.comとなっているなどWebサーバーとAPIサーバーが別ホストになっている場合に、開発環境でも同じようにWebサーバーとAPIサーバーを別のアドレスでアクセスさせたい場合などはproxiesオプションでは対応できません。

ここではhttp-proxyを利用して別ホストを想定したプロキシを実現する方法を説明していきます。

http-proxyを使えば名前ベースでアクセスを振り分ける、いわゆるバーチャルホスト機能を実現することができます。

まず下記コマンドでhttp-proxyをインストール

npm install --save-dev http-proxy

gulpfile.jsに新しくプロキシ立ちあげ用のタスクを追加します、

const httpProxy = require('http-proxy');
const http = require('http');

gulp.task('proxyserver', function () {
    const proxy = httpProxy.createProxyServer();
    http.createServer(function (req, res) {
        if (req.headers.host.startsWith('api')) { //hostが`api`で始まるかどうかでアクセスを振り分け
            proxy.web(req, res, {target: 'http://localhost:9000'});
        } else {
            proxy.web(req, res, {target: 'http://localhost:8000'});
        }
    }).listen(8080);
});

//webserverとproxyserverを両方立ち上げるタスクを追加
gulp.task('server', ['webserver', 'proxyserver']);

example.localとapi.example.localを名前解決できるように/etc/hostsに追記

127.0.0.1 example.local
127.0.0.1 api.example.local

これで

gulp server

を実行すれば
http://example.local:8080でWebサーバー、
http://api.example.local:8080でAPIサーバー
にアクセスできるようになりました。

また、このままだとAPIサーバーが立ち上がっていない場合にアクセスするとエラーが発生しproxyserverのタスクが終了してしまうので下記のようにエラーハンドリングを追加することでを回避することができます。

gulp.task('proxyserver', function () {
    const proxy = httpProxy.createProxyServer();
    proxy.on('error', function (err, req, res) {
        console.error('Proxy error:', err);
        res.statusCode = 500;
        res.end();
    });
....