概要

クライアントがNuxt、WEB+APIサーバーがその他（実際にはFlask）のアプリを作るにあたって、Nuxtはnpm run devで起動しておきながら、APIサーバーにも自由にアクセスをさせたいという場合があり、そのためのproxyをできるだけ簡単に構成します。
ここでWEB+APIサーバーと書いたサーバーは、本番ではNuxtのビルド済のファイルを返すWEBサーバーとAPIサーバーを兼ねるものです。

そのような事をしたい理由

要件としては、最終的に返却するドメインがNuxtのファイルもAPIも同一になるような環境を作る事です。（ポートも同じ）

このような構成のNuxtのアプリを開発するには、おそらく概念的には２通りの考え方があって、

Nuxtのビルドをwatchにする
Nuxtはdevで立ち上げて、そこからAPIサーバーの内容をproxyで返す（今回の構成）

このうち、もともとは前者の方法を考えていたのですが、この辺はnuxt自体の課題でもあるらしく、npm run generate --watchというのがあまりうまく機能しなかったのと、仮にできたとしてもなんだかんだビルドの時間等がかかるな？ということになり、後者の方法を検討して、実現した物の基礎的な部分について記述します。

なお、初版ではcookieを通していなかったのですが、cookieをそのまま素通しするようにしました。
その他のヘッダーも、同様にやればできると思います。

やること

nuxt.config.jsを編集して、以下のようなjsを作成します。

nuxt.config.js(の一部)

import bodyParser from 'body-parser'

export default {
  // 略
  serverMiddleware: [
    bodyParser.json(),
    { path: '/api/path/dayo', handler: '~/api/proxy.js' },
    { path: '/api/path/desu', handler: '~/api/proxy.js' }
  ],
  // 略
}

※apiフォルダを作って、api/proxy.jsとします。APIサーバーはlocalhost:5000で動いているものとします。
（ほかでも書き換えれば動きます）
やりとりはすべてJSONなので注意してください。

proxy.js

import axios from 'axios'

export default function (req, res, next) {
  axios({
    method: req.method,
    url: 'http://localhost:5000' + req.originalUrl,
    headers: req.headers,
    data: req.body
  }).then(otherRes => {
    if (otherRes.headers && otherRes.headers['set-cookie']) {
      res.setHeader('Set-Cookie', otherRes.headers['set-cookie'])
    }
    res.write(JSON.stringify(otherRes.data))
    res.end()
  })
  // next()
}

結果

APIのやりとり形式がJSONである前提で、メソッドとbodyを維持してproxyしてくれます。

Nuxt.jsでAPIサーバーへのproxyをつくる（serverMiddlewareだけで）

概要

そのような事をしたい理由

やること

結果