「gRPC」の記事 - Crieit

connect-webを試そうとしたらCORSまわりでちょっとはまった話

2022-08-20T12:35:05+09:00

背景

gRPCがフロントエンド通信の第一の選択肢になる時代がやってきたかも？ | フューチャー技術ブログを読んで、「HTTP/1.1で動いてcurlで投げたJSONも処理できるgRPC（もどき）って最強じゃん！」と思ったのでチュートリアルを試してみた。

connect-go のほうのチュートリアルは自分で書いたprotocol bufferからサーバーとクライアントを両方作る方法の解説だったのだけれど、connect-web のほうのチュートリアルは既存のWebサービスにつなぐためのクライアントの作り方の解説であったため、チュートリアルを参考にしつつ connect-go で作ったサーバーに接続する connect-web のクライアントを作ろうとした。

本文

やろうとしたこと

まずは Getting started | Connect のPrepareの節を行い、プロジェクトをつくる。

次に、protocol bufferからTypeScriptのコードを生成。Generating code | Connect にある通りの buf.gen.yaml を作った後、

ln -s ../connect-go-example/greet greet
buf generate

で gen 以下にTypeScriptのコードを生成する。

そして、App.tsx を以下のようにした。

import {
  createConnectTransport,
  createPromiseClient,
} from "@bufbuild/connect-web";
import React, { useState } from "react";
import { GreetService } from "../gen/greet/v1/greet_connectweb";
import './App.css'

const transport = createConnectTransport({
  baseUrl: "http://localhost:8080",
})

const client = createPromiseClient(GreetService, transport)

function App() {
  const [userName, setUserName] = useState("");
  const [message, setMessage] = useState("ここにメッセージが入ります");
  const sendName = async (e: React.FormEvent) => {
    e.preventDefault();
    const res = await client.greet({
      name: userName,
    })
    setMessage(res.greeting)
  }
  return (
    
      {message}
      
         setUserName(e.target.value)} />
        
      
    
  )
}

export default App

これで npm run dev して表示されたブラウザで「送信」ボタンを押すといいかんじに名前が表示されるはず……だが、何も出ない。ブラウザの開発者コンソールを見ると、405 Method Not Allowed のエラーが返ってきている。

原因

このエラーの意味は「POSTしか受け付けないサーバーにOPTIONSのリクエストを送っている」というものである。が、OPTIONSなんて聞いたこともないようなHTTPリクエストを送っているつもりはない。それでしばらく調べたのだが、これはCORSプリフライトというやつらしい。「単純リクエスト」以外のリクエストを送りたい時は予めOPTIONSで宛先サーバーの様子を調べるのである。

オリジン間リソース共有 (CORS) - HTTP | MDN

対処

というわけで、このOPTIONSをちゃんと処理できるような処理をサーバー側に足せば良いということになる。Goの net/http の場合は rs/cors: Go net/http configurable handler to handle CORS requests という定番ライブラリがあるようなので、これを噛ませてみることにする。

package main

import (
    "context"
    greetv1 "example/gen/greet/v1"
    "example/gen/greet/v1/greetv1connect"
    "fmt"
    "log"
    "net/http"

    "golang.org/x/net/http2"
    "golang.org/x/net/http2/h2c"

    "github.com/bufbuild/connect-go"
    "github.com/rs/cors"
)

type GreetServer struct{}

func (s *GreetServer) Greet(
    ctx context.Context,
    req *connect.Request[greetv1.GreetRequest],
) (*connect.Response[greetv1.GreetResponse], error) {
    log.Println("Request headers: ", req.Header())
    res := connect.NewResponse(&greetv1.GreetResponse{
        Greeting: fmt.Sprintf("Hello, %s!", req.Msg.Name),
    })
    res.Header().Set("Greet-Version", "v1")
    return res, nil
}

func main() {
    greeter := &GreetServer{}
    mux := http.NewServeMux()
    path, handler := greetv1connect.NewGreetServiceHandler(greeter)
    mux.Handle(path, handler)
    corsHandler := cors.Default().Handler(h2c.NewHandler(mux, &http2.Server{})) // corsのハンドラを追加した
    // corsHandler := h2c.NewHandler(mux, &http2.Server{}) // もとの実装はこれ
    http.ListenAndServe(
        "localhost:8080",
        corsHandler,
    )
}

これでサーバーを立て直すと、無事リクエストが処理されるようになった。

感想

Connect自体とは関係ない現代の基本的なWeb技術のところではまってしまった。そろそろちゃんとCORSを理解しないといけないと思った。

tonicを使ってgRPCサーバーを立ててみる

2021-11-27T13:51:05+09:00

gRPCサーバー＋grpc-webをバックエンドにしてWiki的なのをつくろうという気持ちがあるので、そのための実験をしています。今回はgRPCサーバーをRustでつくれるかの調査です。

ライブラリ選定

Rustで、Hello Worldを卒業した？次は、gRPCだよね！ | by FUJITA Tomonori | nttlabs | Medium というRust教な記事があり、ここで tonic が推されています。

私は別にRust教信者ではないですが、Rustだけで完結していると環境構築が楽そうなので、とりあえずtonicを試してみることにしました。‘grpc’ search // Lib.rs でもtonicが一番人気っぽいですし、まあたぶんよくできているのでしょう。

Hello world

tonic/helloworld-tutorial.md at master · hyperium/tonicに従ってHelloWorldします。

環境準備

Rust 2021 Editionに依存しているのでRust 1.56以降が必要というのはなかなか面白いですね。

エディタにはVSCode、補完にはrust-analyzerを使います。ここで注意点なのですが、READMEには

If you're using rust-analyzer we recommend you set "rust-analyzer.cargo.loadOutDirsFromCheck": true to correctly load the generated code.

とあるものの、この通りにやると "unknown configuration setting" とVSCodeに言われてしまいます。rust-analyzerのIssueによると、この rust-analyzer.cargo.loadOutDirsFromCheck 設定は rust-analyzer.cargo.runBuildScripts に改名された上に既定でオンになるようになったらしいです。つまり、特に何の設定もしなくてもよいということですね。

proto/sinanoki.proto

protocol bufferでAPI定義を書きます。なお、このsinanokiというのは単なる（私が作ろうとしているものの）プロジェクト名なので意味は無いです。

syntax = "proto3";
package sinanoki;

service PageManager {
    rpc GetPage(GetPageRequest) returns (GetPageResponce);
}

message GetPageRequest {
    string path = 1;
}

message GetPageResponce {
    string markdown = 1;
}

cargo.toml

[package]
name = "sinanoki-backend"
version = "0.1.0"
authors = ["suzusime <***@gmail.com>"]
edition = "2018"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
tonic = "0.6"
prost = "0.9"
tokio = { version = "1.0", features = ["macros", "rt-multi-thread"] }

[build-dependencies]
tonic-build = "0.6"

言われる通りにdependenciesの設定を追加します。今回はサーバーだけ（複数の実行ファイルはいらない）なので、binまわりの設定は飛ばしてserver.rsの代わりにmain.rsに書くことにします。

build.rs

ビルドに対して特殊な処理が必要になるので、ルートフォルダにbuild.rsを置きます。

fn main() -> Result<(), Box> {
    tonic_build::compile_protos("./proto/sinanoki.proto")?;
    Ok(())
}

src/main.rs

今までの設定をしてcargo buildすると、protocol bufferに書いたものに対応したサーバー／クライアントの雛型となるRustのコードがtarget以下に生成されるようになります。これを利用してサーバーを実装します。

例えば私の場合は target/debug/build/sinanoki-backend-1664b6d9540c1c9f/out/sinanoki.rs に雛型コードが吐かれました。この雛型コードの中に

    #[async_trait]
    pub trait PageManager: Send + Sync + 'static {
        async fn get_page(
            &self,
            request: tonic::Request,
        ) -> Result, tonic::Status>;
    }

というのがあるので、これをコピペしたものを使い、以下のようなコードをsrc/main.rsに書きます。

use sinanoki::page_manager_server::{PageManager, PageManagerServer};
use sinanoki::{GetPageRequest, GetPageResponce};
use tonic::{transport::Server, Request, Response, Status};

pub mod sinanoki {
    tonic::include_proto!("sinanoki"); // The string specified here must match the proto package name
}

#[derive(Debug, Default)]
pub struct MyPageManager {}

#[tonic::async_trait]
impl PageManager for MyPageManager {
    async fn get_page(
        &self,
        request: Request,
    ) -> Result, Status> {
        println!("Got a request: {:?}", request);

        let reply = GetPageResponce {
            markdown: format!("you requested a file of {}", request.into_inner().path).into(), // We must use .into_inner() as the fields of gRPC requests and responses are private
        };

        Ok(Response::new(reply))
    }
}

#[tokio::main]
async fn main() -> Result<(), Box> {
    let addr = "[::1]:50051".parse()?;
    let manager = MyPageManager::default();

    Server::builder()
        .add_service(PageManagerServer::new(manager))
        .serve(addr)
        .await?;

    Ok(())
}

実行

あとは

$ cargo run

して、

$ grpcurl -plaintext -import-path ./proto -proto ./proto/sinanoki.proto -d '{"path": "/index.md"}' localhost:50051 sinanoki.PageManager/GetPage
{
  "markdown": "you requested a file of /index.md"
}

で動作が確認できました。

所感

どうせ何かハマるだろうと思っていましたが、すんなり動きました。

困ったところを挙げるならば、（tonicに限らず）Rustの補完があまり気持ちよく動いてくれないことでしょうか。単にバグっぽいところ（implしようとしたときに勝手に出してくれるコードが明らかにおかしい）を除いても適切な補完候補がなかなか出てくれなくて、少し厳しいです。おそらく私の設定が悪いんだろうなと思っているのですが……。

C#(.Net 6)でgRPCサーバー on Mac

2021-11-12T01:52:27+09:00

.Net 6 も出たし……と思い、C# で gRPC のサンプルをMacで動かそうとしたらエラーで落ちてちょっと戸惑ったので、手順を書いておきます。

手順

テンプレートからプロジェクトを作る

gRPCのテンプレからプロジェクトを作ります。

$ dotnet new grpc -o GrpcGreeter

実行（落ちる）

普通に実行します。するとMacでは落ちます。

$ cd GrpcGreeter
$ dotnet run
ビルドしています...
Unhandled exception. System.IO.IOException: Failed to bind to address https://localhost:7229.
 ---> System.AggregateException: One or more errors occurred. (HTTP/2 over TLS is not supported on macOS due to missing ALPN support.) (HTTP/2 over TLS is not supported on macOS due to missing ALPN support.)

対処：TLSを使わない

落ちる理由はエラーメッセージにもチュートリアルにも書いてあって、Macや古いWindowsではHTTP2 on TLSがサポートされていないからです。よってTLSを使わないようにすれば解決です。

で、.NET Core での gRPC のトラブルシューティング | Microsoft DocsにはProgram.csに書き足せという旨が書かれているわけですが、これが正直よくわからない。たぶんテンプレートの形式が変わってしまったのだろうなと思われます。

というわけで、次のようにして雑に解決しました。

Properties/launchSettings.json には

{
  "profiles": {
    "GrpcGreeter": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": false,
      "applicationUrl": "http://localhost:5142;https://localhost:7229",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

とありますが、これの applicationUrl からhttpsのほうのURLを削り、

{
  "profiles": {
    "GrpcGreeter": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": false,
      "applicationUrl": "http://localhost:5142",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

として保存します。

実行

これで実行できます。

$ dotnet run
ビルドしています...
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5142
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: /Users/suzusime/sandbox/GrpcGreeter/

grpcurlでテスト

これでサーバーが立つことがわかったので、grpcurlでAPIを叩いてみます。

reflectionを追加

grpcurlで叩くにはサーバーにreflection機能を追加する必要があるので、追加します（Goでやったときは不要だった気がするので本当は不要なのかも）。

まずは

$ dotnet add package Grpc.AspNetCore.Server.Reflection --version 2.40.0

でプロジェクトを追加します。

次に、Program.csを

using GrpcGreeter.Services;

var builder = WebApplication.CreateBuilder(args);

// Additional configuration is required to successfully run gRPC on macOS.
// For instructions on how to configure Kestrel and gRPC clients on macOS, visit https://go.microsoft.com/fwlink/?linkid=2099682

// Add services to the container.
builder.Services.AddGrpc();
builder.Services.AddGrpcReflection(); // 追加

var app = builder.Build();

// Configure the HTTP request pipeline.
app.MapGrpcService();
app.MapGrpcReflectionService(); // 追加
app.MapGet("/", () => "Communication with gRPC endpoints must be made through a gRPC client. To learn how to create a client, visit: https://go.microsoft.com/fwlink/?linkid=2086909");

app.Run();

のように編集します。

grpcurlのインストール

homebrewで入ります。

$ brew install grpcurl

grpcurlで叩く

サーバーを立てます。

$ dotnet run

別のコンソールを開いてgrpcurlでサーバーを叩きましょう。まずは describe でAPIの使い方を調べてみます。

# 機能の一覧を出す
$ grpcurl -plaintext localhost:5142 describe
greet.Greeter is a service:
service Greeter {
  rpc SayHello ( .greet.HelloRequest ) returns ( .greet.HelloReply );
}
grpc.reflection.v1alpha.ServerReflection is a service:
service ServerReflection {
  rpc ServerReflectionInfo ( stream .grpc.reflection.v1alpha.ServerReflectionRequest ) returns ( stream .grpc.reflection.v1alpha.ServerReflectionResponse );
}

# 型の詳細を見る
$ grpcurl -plaintext localhost:5142 describe greet.HelloRequest
greet.HelloRequest is a message:
message HelloRequest {
  string name = 1;
}

これでAPIの叩き方がわかったので、リクエストを送ってみます。

$ grpcurl -plaintext -d '{ "name": "世界" }' localhost:5142 greet.Greeter/SayHello
{
  "message": "Hello 世界"
}

gRPCのサーバーが動いていることが確かめられました。

その他

protobufのパスは GrpcGreeter.csproj で指定できるようになっています。protobufを変更しても、dotnet runしたときにいいかんじにC#のファイルも生成してくれるようです。
サーバーの実装は Services/GreeterService.cs にあります（見れば分かりますが）。Greeter.GreeterBaseという自動生成される基底クラスを継承してオーバーライドしていく方式みたいです。

所感

テンプレに従うだけで動かせるので、とりあえずgRPCを試してみたいという需要ならGoでやる以上に楽ですね。

あと、Visual Studio for Mac 2022 Previewも入れてみたのですが、重くて正直微妙でした。VS Codeの出来が良すぎる……。