NuxtでserverMiddlewareを使ってAPIをつくってみる

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)まで♪

参考にしたサイト

Originally published at www.memory-lovers.blog
ツイッターでシェア
みんなに共有、忘れないようにメモ

きらぷか@i18n補助ツール『トランスノート』開発者

フリーエンジニア/今はNuxt.js/いつかFlutter 受託&アプリ/Webサービス/ゲームを #個人開発 CS修士→SIer/R&D→フリー #paiza はAランクで満足/AtCoderしたい 仕事依頼やご相談はDMまで Kotlin/Python/Swift/Unity/Java/Haskell/DDD

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント