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
とかがルーティングに追加される。
以上!!