こんにちは、フロントエンドエンジニアのライダーです。
2018年秋、Nuxt 2がリリースされましたね。しかも、イベント中のライブリリースだったとのこと。公式のTwitterアカウントに発表の様子がアップされていました。
Live releasing of Nuxt.js 2.0 at @vue_london 💪🏻 pic.twitter.com/jhasarJkvo
— Nuxt.js (@nuxt_js) 2018年9月21日
すごい……。
さて今回は、そんなNuxtのserverMiddlewareを使った、API サーバっぽいものの設定をご紹介します。
目次
Nuxtの「serverMiddleware」とは?
公式Docs：https://ja.nuxtjs.org/api/configuration-servermiddleware/
serverMiddlewareでは、 Nuxt内にサーバ側固有の処理を持たせることができます。ここにAPIの処理を書いておけば、それをBFF（Backends For Frontends）のように扱うことができるようになります。
フランクな説明をするとこんな感じです。まずは公式ドキュメントを読むことを強くお勧めします。
NuxtにAPIサーバを持たせる手順
create-nuxt-appでインストール
なにはともあれ、まずはプロジェクトを準備しましょう。手元にない場合、下記コマンドで作成することができます。
$ npx create-nuxt-app sample公式Docs: https://ja.nuxtjs.org/guide/installation/
clientとserverのディレクトリ分割
SSRするのみであれば、そのほとんどがクライアント側の処理（ファイル）かと思いますが、その場合は特にディレクトリを分ける必要はありません。しかし、サーバ側のコードを記述していくとなると、プロジェクトルートに相当数のディレクトリができてしまいそうなので、 clientとserverに分割します。
ディレクトリを移動する
(*) のついたディレクトリを、新ディレクトリclientに移動させます。package.jsonやnuxt.config.jsは移動させません。
sample
├── assets (*)
├── components (*)
├── layouts (*)
├── middleware (*)
├── node_modules
├── pages (*)
├── plugins (*)
├── server
├── static (*)
└── store (*)↓ 変更
sample
├── client
│ ├── assets
│ ├── components
│ ├── layouts
│ ├── middleware
│ ├── pages
│ ├── plugins
│ ├── static
│ └── store
├── node_modules
└── servernuxt.config.js を修正
module.exports = {
srcDir: "./client/",
}公式Docs：https://ja.nuxtjs.org/api/configuration-srcdir/
API用のディレクトリを作成する
SPA（SSR）を clientへ移動させましたが、次はAPI用のディレクトリ api/ を作成します。このタイミングでサンプルプログラムも置いておきましょう。
api/index.js
const express = require("express");
const app = express();
app.get("/", function(req, res) {
res.send("HelloWorld");
});
module.exports = {
path: "/api/",
handler: app
};現状のディレクトリ構成（とapi/index.js）
sample
├── api
│ └── index.js
├── client
├── node_modules
└── server各ディレクトリの役割が、このように分かれました（ざっくり）。
| api | APIを構築する |
|---|---|
| client | フロントエンド（SPA）を構築する |
| server | Nuxtサーバを立ち上げる |
一旦、ここで動作確認
$ npm run devhttp://localhost:3000 にアクセスするといつもの Nuxt の画面が表示されます。
一方、 http://localhost:3000/api/ にアクセスすると Page Not Found と表示されるかと思います。
いざ、「serverMiddleware」を設定
/api/ ディレクトリに APIが存在することをNuxtで設定します。
nuxt.config.jsを修正
module.exports = {
serverMiddleware: ["~~/api/"],
}APIの動作確認
$ npm run devでローカルサーバを立ち上げたのち、さきほどは Page Not Found になっていたhttp://localhost:3000/api/にアクセスしてみます。
すると、「HelloWorld」と表示され、 /api/ のルーティングが変更されたことがわかります。
おわりに
これでちょっとしたBFFがほしい！ってなったときも、サーバを新しく作る手間をかけずに手軽に始められますね（言語はNodeに限られてしまいますが……）。
最近はおかげさまで、コーポレートサイトやキャンペーンサイトなどのWebサイト制作以外にも、フロントエンドでロジックをたくさん書いていくような案件が増えてきました。
さまざまな場面に対応しますので、お気軽に問い合わせくださいね！ それでは、ライダーでした。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
