parcelの開発環境でプロキシを設定する
parcelで開発を行う上でAPIサーバなどへの一部のリクエストをプロキシさせたい場合の方法。
webpackの場合はwebpack-dev-serverにproxyがあるが、parcelは単純なバンドラーなのでそういった機能は用意されていない。
なので、expressなどでサーバを立ててparcelへのリクエストとプロキシさせたいリクエストを振り分けるようにする。
パッケージの追加
$ npm install -D express http-proxy-middleware
# もしくは
$ yarn add -D express http-proxy-middleware
以下のようなコードをdev.jsとして用意する。
この場合 /api へのリクエストを http://localhost:8080/api にプロキシさせている。
const proxy = require('http-proxy-middleware');
const Bundler = require('parcel-bundler');
const express = require('express');
const bundler = new Bundler('./index.html');
const app = express();
app.use(
'/api',
proxy({
target: 'http://localhost:8080',
}),
);
app.use(bundler.middleware());
app.listen(Number(process.env.PORT || 1234));
package.jsonのscriptsは以下のようにすればよい。
{
"scripts": {
"dev": "node dev.js",
"build": "parcel build ./index.html"
}
}
参考
https://github.com/parcel-bundler/parcel/issues/55#issuecomment-357327211
