現代のアプリケーションにおけるWeb APIの実装形式(1) gRPC

syntax = "proto3";

package hello;

service Greeter {
    rpc SayHello (HelloRequest) returns (HelloReply) {}
}

message HelloRequest {
    string name = 1;
}

message HelloReply {
    string message = 1;
}

import type { sendUnaryData, ServerUnaryCall, UntypedHandleCall } from "@grpc/grpc-js";
import { IGreeterServer } from "../services/hello/hello_grpc_pb";
import { HelloReply, HelloRequest } from "../services/hello/hello_pb";

export class GreeterServer implements IGreeterServer {
  [name: string]: UntypedHandleCall;

  public sayHello(call: ServerUnaryCall<HelloRequest, HelloReply>, callback: sendUnaryData<HelloReply>): void {
    const reply = new HelloReply();
    reply.setMessage(call.request.getName());

    callback(null, reply);
  }
}

import { Server, ServerCredentials } from "@grpc/grpc-js";
import { GreeterService } from "../services/hello/hello_grpc_pb";
import { GreeterServer } from "./hello";

const bootstrap = async () => {
  // サーバーのインスタンスを作成
  const server = new Server();

  // サービスの実装
  server.addService(GreeterService, new GreeterServer());

  // サーバーの起動
  server.bindAsync("0.0.0.0:9000", ServerCredentials.createInsecure(), (err, port) => {
    if (err) {
      console.error(err);
      return;
    }

    console.log(`Server is running on ${port}`);
  });
};

bootstrap();

import { Hono } from "hono";
import { html } from "hono/html";
import { credentials } from "@grpc/grpc-js";
import { GreeterClient } from "../services/hello/hello_grpc_pb";
import { HelloRequest, HelloReply } from "../services/hello/hello_pb";

const app = new Hono();

app
  // 名前を入力するフォームを表示
  .get("/", async (ctx) => {
    ctx.header("Content-Type", "text/html");
    ctx.status(200);
    return ctx.html(
      html`<h1>Hello, ...?</h1>
        <form action="/hello" method="post">
          <input type="text" name="name" />
          <button type="submit">Submit</button>
        </form>
      `
    ),
  })
  // gRPCサーバーにリクエストを送信
  .post("/", async (ctx) => {
    // gRPCクライアントの作成
    const client = new GreeterClient("localhost:9000", credentials.createInsecure());

    // リクエストの作成
    const request = new HelloRequest();
    request.setName(ctx.body.name as string);

    // リクエストの送信
    const response = await new Promise<HelloReply>((resolve, reject) => {
      client.sayHello(request, (err, res) => {
        if (err) {
          reject(err);
          return;
        }

        resolve(res);
      });
    });

    ctx.header("Content-Type", "text/html");
    ctx.status(200);
    return ctx.html(
      html`<h1>${response.getMessage()}</h1>
        <form action="/hello" method="post">
          <input type="text" name="name" />
          <button type="submit">Submit</button>
        </form>
      `
    );
  });

export const hello = app;

import { Hono } from "hono";
import { serve } from "@hono/node-server";
import { hello } from "./hello";

const app = new Hono();

app.route("/hello", hello);

serve(app, (info) => {
  console.log(`Server is running on http://localhost:${info.port}`);
});

import { defineConfig } from "drizzle-kit";

export default defineConfig({
  dialect: "sqlite",
  schema: "./db/schema.ts",
  out: "./db/migrations",
  dbCredentials: {
    url: process.env.DB_FILE_NAME!,
  },
});

DB_FILE_NAME="file:local.db"

import { int, sqliteTable, text } from "drizzle-orm/sqlite-core";

export const tasks = sqliteTable("tasks", {
  id: int("id").primaryKey({ autoIncrement: true }),
  title: text("title").notNull(),
  description: text("description").notNull(),
  completed: int("completed", { mode: "boolean" }).notNull().default(false),
  created: int("created", { mode: "timestamp" }).notNull(),
  updated: int("updated", { mode: "timestamp" }),
});

export type TaskSchema = typeof tasks.$inferSelect;

syntax = "proto3";

syntax = "proto3";

package tasks;

service TaskManager {
    // タスクの作成
    rpc CreateTask (CreateTaskRequest) returns (Task) {}
    // タスクの取得
    rpc GetTask (GetTaskRequest) returns (Task) {}
    // タスクの一覧取得
    rpc ListTasks (ListTasksRequest) returns (ListTasksResponse) {}
    // タスクの更新
    rpc UpdateTask (UpdateTaskRequest) returns (Task) {}
    // タスクの削除
    rpc DeleteTask (DeleteTaskRequest) returns (Task) {}
}

message CreateTaskRequest {
    string title = 1;
    string description = 2;
}

message GetTaskRequest {
    int32 id = 1;
}

message ListTasksRequest {
    int32 page = 1;
    int32 pageSize = 2;
}

message ListTasksResponse {
    repeated Task tasks = 1;
}

message UpdateTaskRequest {
    int32 id = 1;
    string title = 2;
    string description = 3;
    bool completed = 4;
}

message DeleteTaskRequest {
    int32 id = 1;
}

message Task {
    int32 id = 1;
    string title = 2;
    string description = 3;
    bool completed = 4;
    int64 created = 5;
    optional int64 updated = 6;
}

import { eq } from "drizzle-orm";
import { LibSQLDatabase } from "drizzle-orm/libsql";
import type { sendUnaryData, ServerUnaryCall, UntypedHandleCall } from "@grpc/grpc-js";
import type { ITaskManagerServer } from "../services/tasks/tasks_grpc_pb";
import {
  CreateTaskRequest,
  DeleteTaskRequest,
  GetTaskRequest,
  ListTasksRequest,
  ListTasksResponse,
  Task,
  UpdateTaskRequest,
} from "../services/tasks/tasks_pb";
import { tasks, TaskSchema } from "../db/schema";

export class TaskManagerServer implements ITaskManagerServer {
  // @ts-ignore
  private db: LibSQLDatabase;

  [name: string]: UntypedHandleCall;

  // コンストラクタでデータベースのインスタンスを受け取る
  constructor(db: LibSQLDatabase) {
    this.db = db;
  }

  // タスクの作成
  public async createTask(
    call: ServerUnaryCall<CreateTaskRequest, Task>,
    callback: sendUnaryData<Task>,
  ): Promise<void> {
    const [task] = await this.db
      .insert(tasks)
      .values({
        title: call.request.getTitle(),
        description: call.request.getDescription(),
        created: new Date(),
      })
      .returning();

    if (!task) {
      callback(new Error("Failed to create task"));
      return;
    }

    const reply = new Task();
    reply.setId(task.id);
    reply.setTitle(task.title);
    reply.setDescription(task.description);
    reply.setCompleted(task.completed);
    reply.setCreated(task.created.getTime());
    callback(null, reply);
  }

  // タスクの取得
  public async getTask(call: ServerUnaryCall<GetTaskRequest, Task>, callback: sendUnaryData<Task>): Promise<void> {
    const [task] = await this.db.select().from(tasks).where(eq(tasks.id, call.request.getId())).limit(1);

    if (!task) {
      callback(new Error("Task not found"));
      return;
    }

    const reply = new Task();
    reply.setId(task.id);
    reply.setTitle(task.title);
    reply.setDescription(task.description);
    reply.setCompleted(task.completed);
    reply.setCreated(task.created.getTime());
    callback(null, reply);
  }

  // タスクの一覧取得
  public async listTasks(
    call: ServerUnaryCall<ListTasksRequest, ListTasksResponse>,
    callback: sendUnaryData<ListTasksResponse>,
  ): Promise<void> {
    const page = call.request.getPage();
    const pageSize = call.request.getPagesize();

    let taskList: TaskSchema[];
    if (page && pageSize) {
      taskList = await this.db
        .select()
        .from(tasks)
        .limit(pageSize)
        .offset(page - 1 * pageSize);
    } else {
      taskList = await this.db.select().from(tasks).all();
    }

    const reply = new ListTasksResponse();
    reply.setTasksList(
      taskList.map((task) => {
        const reply = new Task();
        reply.setId(task.id);
        reply.setTitle(task.title);
        reply.setDescription(task.description);
        reply.setCompleted(task.completed);
        reply.setCreated(task.created.getTime());
        return reply;
      }),
    );

    callback(null, reply);
  }

  // タスクの更新
  public async updateTask(
    call: ServerUnaryCall<UpdateTaskRequest, Task>,
    callback: sendUnaryData<Task>,
  ): Promise<void> {
    const [task] = await this.db
      .update(tasks)
      .set({
        title: call.request.getTitle(),
        description: call.request.getDescription(),
        completed: call.request.getCompleted(),
        updated: new Date(),
      })
      .where(eq(tasks.id, call.request.getId()))
      .returning();

    if (!task) {
      callback(new Error("Task not found"));
      return;
    }

    const reply = new Task();
    reply.setId(task.id);
    reply.setTitle(task.title);
    reply.setDescription(task.description);
    reply.setCompleted(task.completed);
    reply.setCreated(task.created.getTime());
    callback(null, reply);
  }

  // タスクの削除
  public async deleteTask(
    call: ServerUnaryCall<DeleteTaskRequest, Task>,
    callback: sendUnaryData<Task>,
  ): Promise<void> {
    const [task] = await this.db.delete(tasks).where(eq(tasks.id, call.request.getId())).returning();

    if (!task) {
      callback(new Error("Task not found"));
      return;
    }

    const reply = new Task();
    reply.setId(task.id);
    reply.setTitle(task.title);
    reply.setDescription(task.description);
    reply.setCompleted(task.completed);
    reply.setCreated(task.created.getTime());
    callback(null, reply);
  }
}

import "dotenv/config";
import { Server, ServerCredentials } from "@grpc/grpc-js";
import { drizzle } from "drizzle-orm/libsql";
import { createClient } from "@libsql/client";
import { GreeterService } from "../services/hello/hello_grpc_pb";
import { TaskManagerService } from "../services/tasks/tasks_grpc_pb";
import { TaskManagerServer } from "./tasks";
import { GreeterServer } from "./hello";

const bootstrap = async () => {
  // データベースのインスタンスを作成
  const client = createClient({ url: process.env.DB_FILE_NAME! });
  const db = drizzle(client);
  
  const server = new Server();

  server.addService(GreeterService, new GreeterServer());
  // タスク管理サービスの実装、データベースのインスタンスを渡す
  server.addService(TaskManagerService, new TaskManagerServer(db));

  server.bindAsync("0.0.0.0:9000", ServerCredentials.createInsecure(), (err, port) => {
    if (err) {
      console.error(err);
      return;
    }

    console.log(`Server listening on ${port}`);
  });
};

bootstrap();

import { Hono } from "hono";
import { html } from "hono/html";
import { credentials } from "@grpc/grpc-js";
import { TaskManagerClient } from "../services/tasks/tasks_grpc_pb";
import { layout } from "./layout";
import {
  CreateTaskRequest,
  DeleteTaskRequest,
  ListTasksRequest,
  ListTasksResponse,
  Task,
  UpdateTaskRequest,
} from "../services/tasks/tasks_pb";

const createClient = () => {
  return new TaskManagerClient("localhost:9000", credentials.createInsecure());
};

const app = new Hono();

function int(value: any, def: number): number {
  if (typeof value === "number") {
    return value;
  }

  if (typeof value !== "string") {
    return def;
  }

  if (Number.isNaN(Number.parseInt(value))) {
    return def;
  }

  return Number.parseInt(value);
}

app
  // タスクの一覧表示と作成フォーム
  .get("/", async (ctx) => {
    const client = createClient();
    const request = new ListTasksRequest();
    const page = int(ctx.req.query("page"), 1);

    request.setPage(page);
    request.setPagesize(10);

    const response = await new Promise<ListTasksResponse>((resolve, reject) => {
      client.listTasks(request, (err, response) => {
        if (err) {
          reject(err);
        } else {
          resolve(response);
        }
      });
    });

    ctx.header("Content-Type", "text/html");
    ctx.status(200);
    return ctx.html(
      html`<h1>Tasks</h1>
        <ul>
          ${response.getTasksList().map(
            (task) =>
              html`<li>
                <form id="delete-${task.getId()}" action="/tasks/${task.getId()}/delete" method="get"></form>
                <form action="/tasks/${task.getId()}" method="post">
                  <div style="display: flex;">
                    <input type="checkbox" name="completed" ${task.getCompleted() ? "checked" : ""} />
                    <input type="hidden" name="title" value="${task.getTitle()}" />
                    <input type="hidden" name="description" value="${task.getDescription()}" />
                    <div style="flex-grow: 1;">
                      <h2>${task.getTitle()}</h2>
                      <p>${task.getDescription()}</p>
                    </div>
                    <button type="submit">Update</button>
                    <button form="delete-${task.getId()}" type="submit">Delete</button>
                  </div>
                </form>
              </li>`,
          )}
        </ul>
        <form action="/tasks" method="post">
          <div>
            <label for="title">Title</label>
            <input type="text" name="title" id="title" />
          </div>
          <div>
            <label for="description">Description</label>
            <textarea name="description" id="description"></textarea>
          </div>
          <button type="submit">Submit</button>
        </form>`,
    );
  })
  // タスクの作成、作成後は一覧にリダイレクト
  .post("/", async (ctx) => {
    const payload = await ctx.req.parseBody();

    const client = createClient();
    const request = new CreateTaskRequest();
    request.setTitle(payload.title as string);
    request.setDescription(payload.description as string);

    const task = await new Promise<Task>((resolve, reject) => {
      client.createTask(request, (err, response) => {
        if (err) {
          reject(err);
        } else {
          resolve(response);
        }
      });
    });

    ctx.status(302);
    return ctx.redirect("/tasks");
  })
  // タスクの更新、更新後は一覧にリダイレクト
  .post("/:id", async (ctx) => {
    const id = ctx.req.param("id");
    const payload = await ctx.req.parseBody();

    const client = createClient();
    const request = new UpdateTaskRequest();
    request.setId(int(id, 0));
    request.setTitle(payload.title as string);
    request.setDescription(payload.description as string);
    request.setCompleted(payload.completed === "on");

    await new Promise<void>((resolve, reject) => {
      client.updateTask(request, (err, response) => {
        if (err) {
          reject(err);
        } else {
          resolve();
        }
      });
    });

    ctx.status(302);
    return ctx.redirect("/tasks");
  })
  // タスクの削除、削除後は一覧にリダイレクト
  .get("/:id/delete", async (ctx) => {
    const id = ctx.req.param("id");

    const client = createClient();
    const request = new DeleteTaskRequest();
    request.setId(int(id, 0));

    await new Promise<void>((resolve, reject) => {
      client.deleteTask(request, (err, response) => {
        if (err) {
          reject(err);
        } else {
          resolve();
        }
      });
    });

    ctx.status(302);
    return ctx.redirect("/tasks");
  });

export const tasks = app;

import { Hono } from "hono";
import { serve } from "@hono/node-server";
import { hello } from "./hello";
import { layout } from "./layout";
import { html } from "hono/html";
import { tasks } from "./tasks";

const app = new Hono();

app.route("/hello", hello);
// タスク管理アプリのルーティング
app.route("/tasks", tasks);

app.get("/", async (ctx) => {
  return ctx.html(
    layout(
      html`<h1>gRPC App</h1>
        <a href="/hello">Hello</a>
        <a href="/tasks">Tasks</a>`,
    ),
  );
});

serve(app, (info) => {
  console.log(`Client server listening on http://localhost:${info.port}`);
});