Vue-cli 3 の SPA アプリでサードパーティの API にアクセスするときの webpack と nginx の proxy の設定。

前提

• @vue/cli を使って vue-cli 3 で SPA を作ってる。
• サードパーティの API（以下3rd.com/API?a=b）をマッシュアップしたい。
• 3rd.com からキーをもらってアクセスする（以下KEY=HOGE）。

みたいな場合、たまにあると思います。普通に

// DANGER
fetch( 'http://3rd.com/API?a=b&KEY=HOGE' )

なんてやってしまうと、SPA なのでこの内容は JS にパックされてユーザーの方に渡ってしまいます。ということはもらったキーが世界中に丸見えになってしまいます。
また、CORS でひっかかってしまうことも多いでしょう。

そこで、proxy の出番です。proxy を使ってキーを隠匿して、CORS を回避しましょう。つまり

fetch( '/API?a=b' )

とすれば OK になるように設定します。

標準的？な開発体制であれば、開発と本番の両方の環境に proxy を設定することになるでしょう。

以下、実際に動くパターンを元に /API を 架空の 3rd.com/API にフォワードするように書き直してて実際にチェックできないので、もしかしたら間違ってる可能性があります。もし間違ってたら教えてください。

開発環境

開発時 @vue/cli で作ったアプリは、webpack の devServer の機能を使ってローカルでサービスされます。これに proxy の機能があるので使いましょう。

vue-cli 3 から webpack の設定は、vue.config.js の configureWebpack セクションに書くようになりました。

vue.config.js

module.exports = {
    configureWebpack    : {
        devServer   : {
            proxy   : {
                '/API'  : {
                    target      : 'http://3rd.com'
                ,   pathRewrite : p => p + '&KEY=HOGE'
                }
            }
        }
    }
}

npm run serve をやり直すのをお忘れなく！

本番環境

本番環境は多種多彩ですが、今回は nginx1.15.10 を nginx.conf で設定する場合を説明します。

http / server セクションに以下の内容を記述します。

        location /API {
            set $args $args&KEY=HOGE;
            proxy_pass    http://3rd.com/API;
        }

nginx のリロードをお忘れなく！

終わりに

架空のサーバーの話になってしまうのが心苦しいのですが、実際に動いてるパラメータを乗せるわけにはいかないのでご容赦ください。