ブラウザーは、Dubbo および gRPC バックエンドマイクロサービスに直接アクセスできます。Dubbo-js の最初のアルファバージョンがここにあります。

Dubbo3 によって定義された Triple プロトコルに基づいて、ブラウザと gRPC 互換の RPC サービスを簡単に作成し、これらのサービスを HTTP/1 と HTTP/2 の両方で実行できます。Dubbo TypeScript SDK [1]は、IDL またはプログラミング言語固有のメソッドを使用したサービスの定義をサポートし、これらのサービスを公開または呼び出すための軽量 API のセットを提供します。

Dubbo-js は、9 月に Dubbo3 プロトコルをサポートする最初のアルファバージョンをリリースしました。そのリリースにより、マイクロサービスのフロントエンドとバックエンドのアーキテクチャと通信モデルが完全に変更され、バックエンドにアクセスできるようになります。ブラウザページまたは Web サーバーで直接ダボ、gRPC サービス。

ブラウザ Web アプリケーションの例

この例では、dubbo-js を使用して、ブラウザ上で実行される Web アプリケーションを開発する方法を示します。Web ページは、dubbo node.js によって開発されたバックエンドサービスを呼び出し、ページコンテンツを生成します。このサンプルデモは、IDL エンコードモードと非 IDL エンコードモードの両方に基づいています。

IDLモード

前提条件

まず、Vite を使用してフロントエンドプロジェクトテンプレートを生成します。このテンプレートには、後で必要になるすべての機能のサポートが組み込まれています。

npm create vite@latest -- dubbo-web-example --template react-ts
cd dubbo-web-example
npm install

プロトコルバッファーを使用するため、最初に @bufbuild/protoc-gen-es、@bufbuild/protobuf、@apachedubbo/protoc-gen-apache-dubbo-es、@apachedubbo/dubbo などの関連コード生成ツールをインストールする必要があります。

npm install @bufbuild/protoc-gen-es @bufbuild/protobuf @apachedubbo/protoc-gen-apache-dubbo-es @apachedubbo/dubbo

Proto を使用してサービスを定義する

ここで、プロトコルバッファー (IDL) を使用して Dubbo サービスを定義します。

src の下に util/proto ディレクトリを作成し、ファイルを生成します。

mkdir -p src/util/proto && touch src/util/proto/example.proto

内容を書きます:

syntax = "proto3";

package apache.dubbo.demo.example.v1;

message SayRequest {
  string sentence = 1;
}

message SayResponse {
  string sentence = 1;
}

service ExampleService {
  rpc Say(SayRequest) returns (SayResponse) {}
}

このファイルは、ExampleService というサービスを宣言し、このサービスの Say メソッドとそのリクエストパラメータ SayRequest および戻り値 SayResponse を定義します。

コードを生成する

生成されたファイルが配置されるターゲットディレクトリとして gen ディレクトリを作成します。

mkdir -p src/util/gen

次のコマンドを実行して、protoc-gen-es、protoc-gen-apache-dubbo-es、およびその他のプラグインを使用して gen ディレクトリにコードファイルを生成します。

PATH=$PATH:$(pwd)/node_modules/.bin \
  protoc -I src/util/proto \
  --es_out src/util/gen \
  --es_opt target=ts \
  --apache-dubbo-es_out src/util/gen \
  --apache-dubbo-es_opt target=ts \
  example.proto

コマンドを実行すると、ターゲットディレクトリに次の生成されたファイルが表示されます。

├── src
│   ├── util
│   │   ├── gen
│   │   │   ├── example_dubbo.ts
│   │   │   └── example_pb.ts
│   │   └── proto
│   │       └── example.proto

アプリの作成

まず @apachedubbo/dubbo-web をダウンロードする必要があります。

npm install @apachedubbo/dubbo-web

これで、パッケージからサービスをインポートし、クライアントをセットアップできるようになりました。次のコンテンツを App.tsx に追加します。

import { useState } from "react";
import "./App.css";

import { createPromiseClient } from "@apachedubbo/dubbo";
import { createDubboTransport } from "@apachedubbo/dubbo-web";

// Import service definition that you want to connect to.
import { ExampleService } from "./util/gen/example_dubbo";

// The transport defines what type of endpoint we're hitting.
// In our example we'll be communicating with a Dubbo endpoint.
const transport = createDubboTransport({
  baseUrl: "http://localhost:8080",
});

// Here we make the client itself, combining the service
// definition with the transport.
const client = createPromiseClient(ExampleService, transport, { serviceGroup: 'dubbo', serviceVersion: '1.0.0' });

function App() {
  const [inputValue, setInputValue] = useState("");
  const [messages, setMessages] = useState<
    {
      fromMe: boolean;
      message: string;
    }[]
  >([]);
  return (
    <>
      <ol>
        {messages.map((msg, index) => (
          <li key={index}>{`${msg.fromMe ? "ME:" : "Dubbo Server:"} ${msg.message}`}</li>
        ))}
      </ol>
      <form
        onSubmit={async (e) => {
          e.preventDefault();
          // Clear inputValue since the user has submitted.
          setInputValue("");
          // Store the inputValue in the chain of messages and
          // mark this message as coming from "me"
          setMessages((prev) => [
            ...prev,
            {
              fromMe: true,
              message: inputValue,
            },
          ]);
          const response = await client.say({
            sentence: inputValue,
          });
          setMessages((prev) => [
            ...prev,
            {
              fromMe: false,
              message: response.sentence,
            },
          ]);
        }}
      >
        <input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
        <button type="submit">Send</button>
      </form>
    </>
  );
}

export default App;

以下のコマンドを実行してサンプルページを取得します。

npm run dev

サーバーの起動

次に、サーバーを起動する必要があります。サーバーは、Java、Go、Node.js など、Dubbo でサポートされている言語を使用して開発できます。ここでは、Dubbo サービスに埋め込まれた Node.js サーバーを使用します。詳細については、 Node.js で Dubbo バックエンドサービスを開発する手順を参照してください[2] 。

ただし、Node.js の例をさらに変更する必要があることに注意してください。フロントエンドリクエストのクロスドメイン問題を解決するために @fastify/cors を導入します。

npm install @fastify/cors

server.ts ファイルを変更する必要があります。

...
import cors from "@fastify/cors";

...
async function main() {
  const server = fastify();
  ...
  await server.register(cors, {
    origin: true,
  });
  ...
  await server.listen({ host: "localhost", port: 8080 });
  ...
}

void main();

最後に、コードを実行してサービスを開始します。

npx tsx server.ts

IDLモードなし

次のバージョンでも、引き続き IDL フリーモードでの通信サポートを提供し、IDL フリーバックエンドサービスにさらに便利にアクセスできるようにする予定です。ここで、IDLフリーモードの使い方を簡単に見てみましょう。

最初に @apachedubbo/dubbo と @apachedubbo/dubbo-web をインストールする必要もあります。

npm install @apachedubbo/dubbo @apachedubbo/dubbo-web

これで、クライアントを起動して電話をかけることができます。App.tsx のコードは基本的に IDL パターンと同じですが、次のような違いがあります。

// ...
// set backend server to connect
const transport = createDubboTransport({
  baseUrl: "http://localhost:8080",
});
// init client
const client = createPromiseClient(transport);

function App() {
  // ...
  // call remote Dubbo service
  const response = await client.call(
    "apache.dubbo.demo.example.v1.ExampleService", 
    "say", 
    {
      sentence: inputValue,
    });
}

以下のコマンドを実行してサンプルページを取得します。

npm run dev

要約する

ブラウザページまたは Web サーバーでバックエンド Dubbo RPC サービスに直接アクセスします。Dubbo Triple プロトコルのアップグレードと Dubbo JavaScript SDK のリリースは、マイクロサービスシステム全体に対する非常に強力な補足であり、将来的にはマイクロサービスアーキテクチャ全体とフロントエンドおよびバックエンドの通信モデルが変わることを楽しみにしています。

関連リンク：

[1] Dubbo TypeScript SDK

https://github.com/apache/dubbo-js/

[2] Node.js が Dubbo バックエンドサービスを開発

https://github.com/apache/dubbo-js/tree/dubbo3/example/dubbo-node-example

著者: 蔡建儀

クリックして今すぐクラウド製品を無料で試し、クラウドでの実践的な取り組みを始めましょう!

元のリンク

この記事は Alibaba Cloud のオリジナルコンテンツであり、許可なく複製することはできません。