始めに
ローカルでの開発でAPIのCORSを回避するためにproxyを通すことがあると思いますが、webpack-dev-serverを使うと簡単に設定することができます。また、検索にも引っ掛かりやすいのでつまづいたら調べることができます。
devServer: {
proxy: {
'/api': {
target: 'https://hogehoge.com',
changeOrigin: true,
},
},
}
しかしbrowser-syncを使ったパターンになると中々記事がない上、browser-syncで使用するパラメータのproxyはwebpack-dev-serverとは違った意味で使われるため中々使い方が分かりませんでした。なのでその辺についてここでまとめたいと思います。
browser-syncで設定するproxyの勘違い
browser-syncで設定するproxyはwebpack-dev-serverと違ってローカルサーバーのhostnameを指定するものになっています。localhostではなくhogehoge.comでアクセスできるようにするとかですね。あんまりどういう目的で使用するのか分かりませんが・・・。
なのでAPIを別なサーバーへproxyしたいときとかには使用できないです😓
browser-syncでAPIをproxyする方法
proxyオプションで設定できないのでどうするかと言うと、proxy用のmiddlewareを差し込みます。
具体的にはhttp-proxy-middlewareを使用して以下のようにしました。
ちなみにwebpack-dev-serverもこのパッケージを使用しているので設定方法は同じになると思います。
https://webpack.js.org/configuration/dev-server/#devserverproxy
const browserSync = require('browser-sync');
const { createProxyMiddleware } = require('http-proxy-middleware');
const bs = browserSync.create();
bs.init({
server: {
baseDir: './src',
middleware: [
createProxyMiddleware('/api', {
target: 'https://qiita.com/',
// Basic認証がある場合はユーザ名とパスワードをコロンでつなげると自動で認証してくれる
// auth: 'username:password',
changeOrigin: true,
}),
],
},
watch: true,
ghostMode: false,
});
あとは普通にbrowser-syncで立ち上げたサーバーにAPIリクエストしたらproxyしてくれます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proxy Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
</head>
<body>
<p>proxy test</p>
<script>
axios.get('/api/v2/items')
.then((response) => {
console.log(response.data);
});
</script>
</body>
</html>
終わりに
以上がbrowser-syncでAPIをproxyする方法でした。普段の開発ではwebpack-dev-serverでproxyするでいいと思いますが、webpackすらいらない場合の開発やビルド済みのファイルでローカルで動作確認する際にbrowser-syncでproxyする方法は役立つかなと思いました。
以下にサンプルのリポジトリも載せますので、興味がある方は見てください。