webpack-dev-server+firebase-toolsでローカルのFunctionを呼び出す

やりたいこと

Firebase Functions を使った Web アプリケーションをローカルで動かしたい。 ただ、Firebase CLIのfirebase serveだと Hosting は HMR どころかホットリロードすらされないので webpack-dev-server を使いたい。

TL;DR

// firebase.json
{
  "hosting": {
    "rewrites": [{
      "source": "/api/foo",
      "function": "foo"
    }]
  }
}

// webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      "/api": "http://localhost:8081",
    },
  },
};

firebase serve --port 8081

何をやっているのか

webpack のdevServer.proxyを設定して、該当パスへのリクエストをローカルで起動している Firebase Hosting へ流す。 Firebase Hosting は渡ってきたリクエストをrewritesセクションの設定にしたがって Firebase Functions へ流す。

/api/fooとしているのはエンドポイントを追加した際に/api以下に生やしていけばwebpack側にプロキシの設定を追加する必要がなくなるため。

注意点

あくまでも一部のパスをプロキシしているだけなので、他のリライトルールは適用されない。 そこらへんも全部 Hosting の設定どおりにしたい場合はFirebase CLI の設定と superstatic を使ってリクエストを書き換える必要がある。