Web事業部_クリエイティブ
Web事業部_クリエイティブ
2018.12.06

Nuxtに「serverMiddleware」を設定して、API サーバ的な動きをさせてみた

ライダー

こんにちは、フロントエンドエンジニアのライダーです。

2018年秋、Nuxt 2がリリースされましたね。しかも、イベント中のライブリリースだったとのこと。公式のTwitterアカウントに発表の様子がアップされていました。

すごい……。

さて今回は、そんな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
└── server

nuxt.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 dev

http://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サイト制作以外にも、フロントエンドでロジックをたくさん書いていくような案件が増えてきました。

Web制作事業部へのお問い合わせはこちら!

さまざまな場面に対応しますので、お気軽に問い合わせくださいね! それでは、ライダーでした。