GRPC x Connect のススメ

syntax = "proto3"; // 使用するProtobufのバージョンを指定します。
package api.v1;

// Go用の生成設定
option go_package = "github.com/xxx/my-playground/project/convert_kicks_video/go/app/grpc_server/api/v1;api_v1";

// example
message Example {
  string name = 10; // アーティスト名
  string debug_message = 20; // デバッグメッセージ
}

syntax = "proto3"; // 使用するProtobufのバージョンを指定します。
package api.v1;

import "api/v1/model_example.proto";

// Go用の生成設定
option go_package = "github.com/xxx/my-playground/project/convert_video/go/app/grpc_server/api/v1;api_v1";

// example
service ExampleService {
  // なんかとる
  rpc Example(ExampleRequest) returns (ExampleResponse) {}
}

// なんかとる
message ExampleRequest {
  string name = 10;
}

// なんかかえす
message ExampleResponse {
  Example example = 10;
}

version: v1
# protoファイルのパスを指定
breaking:
  use:
    - FILE
# リンターの設定。
lint:
  use:
    - DEFAULT
    - COMMENT_ENUM
    - COMMENT_MESSAGE
    - COMMENT_RPC
    - COMMENT_SERVICE

version: v2
plugins:

  # 各protoの型ファイルを生成する (Go)
  - remote: buf.build/protocolbuffers/go:v1.34.1
    out: ./go/app/grpc_server/
    opt: paths=source_relative

  # client/server実装(connect仕様)を生成する (Go)
  - remote: buf.build/connectrpc/go:v1.16.2
    out: ./go/app/grpc_server/
    opt: paths=source_relative

  # 各protoの型ファイルを生成する (Typescript)
  - remote: buf.build/bufbuild/es:v1.9.0
    out: ./app/proto/
    opt:
      - target=ts

# client sdk (connect仕様)を 生成する(Typescript)
  - remote: buf.build/connectrpc/es:v1.4.0
    out: ./app/proto/
    opt:
    - target=ts

# API ドキュメント生成
  - remote: buf.build/community/pseudomuto-doc:v1.5.1
    out: catalogapi
    opt:
      - markdown,README.md

gen_grpc:
    echo "Generating gRPC code..."
    # lint
    buf lint
    # 自動フォーマット
    buf format -w
    # コード生成
    buf generate

package grpc_server

import (
	"connectrpc.com/connect"
	"context"
	v1 "github.com/xxx/my-playground/project/convert_video/go/app/grpc_server/api/v1"
	"github.com/xxx/my-playground/project/convert_video/go/app/grpc_server/api/v1/api_v1connect"
)

func NewExampleHandler() api_v1connect.ExampleServiceHandler {

	return &exampleServiceHandler{}
}

func (e exampleServiceHandler) Example(ctx context.Context, c *connect.Request[v1.ExampleRequest]) (*connect.Response[v1.ExampleResponse], error) {

	resp := v1.ExampleResponse{Example: &v1.Example{Name: `いいい`, DebugMessage: `あああ`}}

	return connect.NewResponse(&resp), nil

}

type exampleServiceHandler struct {
}

import (
	"github.com/labstack/echo/v4"
	"net/http"
)

...
func ConnectHandler(path string, handler http.Handler) (string, echo.HandlerFunc) {
	path = path + "*"
	return path, echo.WrapHandler(handler)
}

exampeHandler := NewExampleHandler()

exampleHandlerPath, httpExampleServiceHandler := api_v1connect.NewExampleServiceHandler(exampeHandler)
// echoのルーティングに GRPC-Connect 追加
e.Any(ConnectHandler(exampleHandlerPath, httpExampleServiceHandler))  

"@connectrpc/connect-node": "^1.4.0",
"@connectrpc/connect-web": "^1.4.0",

import { createPromiseClient, Interceptor } from "@connectrpc/connect";
import { createGrpcTransport } from "@connectrpc/connect-node";
import { ExampleService } from "~/proto/api/v1/service_example_connect";
import {createGrpcWebTransport} from "@connectrpc/connect-web";

const GRPC_BASE_URL = `https://xxxx.com`;

const BACKEND_API_KEY = `dummy-api-key`;

// GRPCサーバーにリクエストを送る前に、APIキーを付与するInterceptor
const addApiKey: Interceptor = (next) => async (req) => {
  req.header.set("x-api-key", BACKEND_API_KEY);
  return await next(req);
};

// webブラウザから叩く場合
const transportWeb = createGrpcWebTransport({
  baseUrl: GRPC_BASE_URL,
  interceptors: [addApiKey],
});

/*
// BFFサーバーから叩く場合
const transport = createGrpcTransport({
  baseUrl: GRPC_BASE_URL,
  interceptors: [addApiKey],
  useBinaryFormat: true, // protobufを使用するように設定
  httpVersion: "1.1", // 2が使える環境なら2も可
});
*/

console.log("GRPC_BASE_URL:", GRPC_BASE_URL);

// APIリクエストする側はこれをimportして使う
export const exampleServiceClient = createPromiseClient(
  ExampleService,
  transportWeb,
);

export type ExampleServiceClientIface = typeof exampleServiceClient;