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

公開日時

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

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

proxy-moduleをインストール。

yarn add @nuxtjs/proxy

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

環境API URL
本番http://{production url}/search
開発http://localhost:3000/search|

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サーバを立てるようにする。

参考


Related #nuxt.js

Nuxt.jsアプリケーションをHerokuにデプロイする

pushするだけでデプロイされるので手軽

Nuxt + TypescriptプロジェクトにSentryを導入する

リリースにコミットハッシュを設定しておくと調査しやすくなる

Github ActionでCloudfrontのキャッシュをクリアする

デプロイ後にキャッシュクリアを行うように設定

NuxtアプリにCloud Functionsを追加したらビルドエラーが発生

CIでのビルドログ抑制を無効化して、functionsディレクトリをビルド対象から外す必要があった

Firebase Hostingで動いているNuxt.jsプロジェクトにAnalyticsを導入する

gaメソッドをinjectするようにした

Nuxt.jsのserverMiddlewareがGAE上だとエラーになる

ディレクトリ位置の問題でserverMiddlewareが動かない現象が発生した