こんばんは、ゆあさです。
今日は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(); }); ....
まとめ
上記のようにして開発サーバーをgulpのタスクだけで立ち上げることができました。 nginxやapacheなどを使わずに開発サーバーをサクッと立ち上げられるのは便利ですね。
それではまた。