nuxt-community/proxy-moduleを使ってスタブAPIに切り替える

ローカルで開発を行う際に、本番環境のAPIにアクセスするのは避けたかったのでproxy-moduleを使ってスタブAPIに切り替えるようにした。

事前にcurlでAPIレスポンスをファイルに保存してstatic/stubs以下に配置しておく。

proxy-moduleをインストール。

yarn add @nuxtjs/proxy

例としてAPI URLが以下の場合、

nuxt.config.jsに以下のproxy設定を記述する。

なお、クライアントからは/api/searchでアクセスする想定なのでpathRewriteを使ってAPIへのリクエスト時は/apiを除外するようにしている。

// nuxt.config.js
{
  modules: [
    '@nuxtjs/proxy'
  ],
  proxy: {
    '/api':
      process.env.NODE_ENV !== 'production'
        ? {
            target: 'http://localhost:3000/stubs',
            pathRewrite: { '^/api/search/.+': 'search.json' }
          }
        : {
            target: 'http://{production url}',
            pathRewrite: { '^/api': '' }
          }
  }
}

これでNuxtからは以下のようにしてAPIにアクセスでき、開発環境の場合はスタブAPIのレスポンスが返る。

const { data } = await this.$axios.get(`/api/search/${keyword}`)

今回は手軽に利用するためにstatic以下に配置したが、そのままだとスタブファイルもデプロイされてしまうのでデプロイ時に除外する必要がある。

もしくはroot直下にstubsを配置して、serverMiddlewareでstubサーバを立てるようにする。

参考

• http-proxy-middleware を使用してダミーの API を用意 - Qiita