Nuxt.js、SSRで実行すると外部サーバなしでAPIを簡単に追加できるらしい。
serverMiddlewareを使ってルートを追加するとAPIが作れたので、その時の備忘録。

つかってみる

APIをつくる

// ~/server/echo.ts

import { IncomingMessage, ServerResponse } from "http";

/**
 * 「?name=AAA」で呼び出すと、AAAを返すechoなAPI
 */
export default async function(req: IncomingMessage, res: ServerResponse) {
  try {
    // req は Node.jsのHTTPリクエストオブジェクト
    console.log(`req.url=${req.url}`);

    // URLをパースして、クエリを取得する
    const url = require("url").parse(req.url, true);
    const name = url.query.name;
    res.end(name);
  } catch (error) {
    console.error(error);
    res.end(null);
  }
}

設定をする

// nuxt.config.ts
import { Configuration } from "@nuxt/types";

const config: Configuration = {
  // ...略

  serverMiddleware: [
    // パスと対応するファイルを設定する
    { path: "/api/echo", handler: "~/server/echo.ts" },
  ],
};

export default config;

APIを呼びだす

APIが作れたので、あとはaxiosなどで呼び出せばOK！

import axios from "axios";

const res = axios.get(`${process.env.BASE_URL}/api/echo`, {
  params: { name: "AAA" }
});

console.log(res.data);
// => AAA

つかってみる: express版

Node.jsのHTTPリクエストオブジェクトは扱いが若干めんどくさいので、
Express使って楽したい..

serverMiddlewareはExpressを使えるので、
ルーティング含めてExpress側で設定できるので楽(´ω｀)

APIをつくる

// ~/server/index.ts
import { Request, Response } from "express";
import * as HttpStatus from "http-status-codes";

import bodyParser from "body-parser";
import express from "express";

const app = express();

// setup body-parser
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());


// select
app.post("/api/select", async (req: Request, res: Response) => {
   // ...
});

// update
app.post("/api/update", async (req: Request, res: Response) => {
   // ...
});

// delete
app.post("/api/delete", async (req: Request, res: Response) => {
  // ...
});

export default app;

設定をする

// nuxt.config.ts
import { Configuration } from "@nuxt/types";

const config: Configuration = {
  // ...略

  serverMiddleware: [
    serverMiddleware: ["~/server"],
  ],
};

export default config;

これで、~/server/index.tsで設定した/api/selectとかがルーティングに追加される。

以上!!

こんなのつくってます!!

積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト

• API: serverMiddleware プロパティ - NuxtJS
• Nuxt.jsのserverMiddlewareを使って、apiを叩く |
• （Node.js）リクエスト情報を取得するサンプル - フロントサイドエンジニアという選択肢