事前調査

nuxt axios apiなどで検索

Nuxtのチュートリアル的記事ではaxiosを使うものまではいくつか見つけられるものの、その多くは外部のテストデータ用のAPIだったりで、
「自分自身にAPIリクエストを投げる」
ものが見つけにくいなと思いました。

たとえば
5分で分かる！ Nuxt.js + axiosでAPIを使ってみる。 | ネクストページブログ

npm install --save axios

インストールが完了したら、簡単なサンプルを作成して動きを見てみましょう。
APIは下記サイトからデータを取得してみます。
http://zipcloud.ibsnet.co.jp/api/search?zipcode=1040032&callback=jsonData

のような。
他にも私は過去に
Nuxt.js 入門 #1 – Nuxt.js によるブログアプリ制作 – chatbox blog
で少し勉強しましたが、こちらも

axios による APIデータの取得処理

最後に実際に API 通信を行って記事のデータを取得してみましょう。

今回は、JSON Placeholder というサイトで公開されている POST API を使用します。

http://jsonplaceholder.typicode.com/posts

と外部データを使うので、今回困ったように知見が溜まってなかったのですね。

見つけたけど使わなかった2つの方法

自サーバーでAPIを使う方法をなんとか調べた結果、2つ方法がありそうでした。

どちらもexpressを使う点は同じですが、

「expressのミドルウェアとしてnuxtを使う」
か
「Nuxtのサーバーミドルウェアとしてexpressを使う」
かの違いがありそうでした。

expressの一部としてNuxtを使うような例
マイクロサービスを作るのに、nuxt.jsが最高だった話 - Qiita

また、nuxtはexpressのミドルウェアとしてrendererをモジュールインポートして噛ませることができるので、APIサーバ+コンテンツプロバイダの構成を簡単に作ることができます。以下はテンプレートの初期設定例です。

実際Nuxt.jsとExpressでどうやってSSRやるか理解してましたか？自分はよくわかってなかったです【解説】 - Qiita

ExpressとNuxt.jsの連携
ポイント1. Nuxt.jsはExpressの中でミドルウェア的に使う

Nuxt.js でバックもフロントもこれ一本 - Qiita?
(この記事はちょっとどういった関係か読み取れませんでした)

Nuxtのサーバーミドルウェアの例
nuxt.js と serverMiddleware(express) で Twitterログインを実装した話 - Qiita

expressが必須というわけではないと思います。
他のものでもできそうですが、別途webサーバー機能がなんらかの形で必要という気配でした。

直感的にシンプルでなく構成が低レベルなプログラマには複雑にすぎる気がしたので、どうしてもexpress導入には及び腰でした。

手動で作れるserverMiddleware

しかし今ひとつドンピシャな記事が見つからず、expressもやむなしかと
nuxt-community/express-template: Starter template for Nuxt.js with Express.
を読んでいると、どうにもexpress部分が薄すぎる。

改めてまずは公式を読み直しました。

API: serverMiddleware プロパティ - Nuxt.js

Nuxt は内部で connect のインスタンスを作ります。それはミドルウェアをスタックに登録したり、 外部サーバーを必要とせず に API などのルートを増やす事を可能にしてれくます。 connect 自体はミドルウェアで、登録されたミドルウェアは nuxt start と express-template のようなプログラム的な使用法を持つミドルウェアとして使用されます。 Nuxt モジュールもまた this.addServerMiddleware() を使用して serverMiddleware を提供できます。

む、難しい…
もうそれぞれの用語がよくわからなかったのですが、
その下のカスタムサーバーミドルウェアのコードを読むと、なんとなくできそうに思えました。

module.exports = function (req, res, next) {
    // req は Node.js の HTTPリクエストオブジェクトです
    console.log(req.path)


    // res は Node.js の HTTPレスポンスオブジェクトです

    // next は 次のミドルウェアを呼び出すための関数です。
    // あなたのミドルウェアが最後でない場合、関数の最後で next を呼び出すのを忘れないでください！
    next()
}

Nuxt Config (nuxt.config.js):

serverMiddleware: [
    '~/api/logger'
]

お話としてはこのfunctionを実装したことでうまくいったよ。
で終わってしまうのですが。

ごくごく簡単なAPI機能ならばexpressなどは不要で自前でNodeの標準のHTTP.responseを書ければNuxt単体の機能で両立できる。
ということです。

余談

serverMiddleware
を知る前に、「Nuxtがサーバー側で動かすスクリプト」として探しているときにNuxtのMiddlewareという機能を見つけました。
Middlewareはサーバー側で動くものの、レンダリング前の機能で、Authなどに使うらしく思っていた機能と違っていました。

結果、serverMiddlewareという文字列を幾度か見かけてもスルーしていた気がするんですが、公式にも書かれている通り別物なのです。
が、初心者はこのようにやはり混同しがちなんだなあと思いました。

タイトルは必要ないと締めていますが、結局はexpressが必要になったりしました。悲しい。

Nuxt.jsで自分に外部APIを立てるのにexpressなどは必要がない

事前調査

見つけたけど使わなかった2つの方法

手動で作れるserverMiddleware

余談

参考