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

LIGブログ

2018/12/6 06:00

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

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でインストール
なにはともあれ、まずはプロジェクトを準備しましょう。手元にない場合、下記コマンドで作成することができます。

公式Docs: https://ja.nuxtjs.org/guide/installation/

clientとserverのディレクトリ分割

SSRするのみであれば、そのほとんどがクライアント側の処理(ファイル)かと思いますが、その場合は特にディレクトリを分ける必要はありません。しかし、サーバ側のコードを記述していくとなると、プロジェクトルートに相当数のディレクトリができてしまいそうなので、 clientとserverに分割します。

ディレクトリを移動する

(*) のついたディレクトリを、新ディレクトリclientに移動させます。package.jsonやnuxt.config.jsは移動させません。
↓ 変更

nuxt.config.js を修正

公式Docs:https://ja.nuxtjs.org/api/configuration-srcdir/

API用のディレクトリを作成する

SPA(SSR)を clientへ移動させましたが、次はAPI用のディレクトリ api/ を作成します。このタイミングでサンプルプログラムも置いておきましょう。

api/index.js

現状のディレクトリ構成(とapi/index.js)
各ディレクトリの役割が、このように分かれました(ざっくり)。
api
APIを構築する
client
フロントエンド(SPA)を構築する
server
Nuxtサーバを立ち上げる

一旦、ここで動作確認

http://localhost:3000 にアクセスするといつもの Nuxt の画面が表示されます。

一方、 http://localhost:3000/api/ にアクセスすると Page Not Found と表示されるかと思います。

いざ、「serverMiddleware」を設定

/api/ ディレクトリに APIが存在することをNuxtで設定します。

nuxt.config.jsを修正

APIの動作確認
でローカルサーバを立ち上げたのち、さきほどは Page Not Found になっていたhttp://localhost:3000/api/にアクセスしてみます。

すると、「HelloWorld」と表示され、 /api/ のルーティングが変更されたことがわかります。

おわりに

これでちょっとしたBFFがほしい!ってなったときも、サーバを新しく作る手間をかけずに手軽に始められますね(言語はNodeに限られてしまいますが……)。

最近はおかげさまで、コーポレートサイトやキャンペーンサイトなどのWebサイト制作以外にも、フロントエンドでロジックをたくさん書いていくような案件が増えてきました。

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

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

あなたにおすすめ

ランキング

もっとよむ

注目ニュース

もっとよむ

あなたにおすすめ