メインコンテンツまでスキップ

Frourio の導入

前のページで、クライアントの型安全 は実現しました。

しかしながら、このプロジェクトにはまだ 型安全でない 部分が存在します。それはなんでしょう？

サーバー です。

それでは、frourio をサーバーに導入し、型安全な 「１つの TypeScript」 を構築しましょう。

1. Frourio サーバーのセットアップ​

1.1. API 定義を移動する​

Frourio において、サーバーは前述の API 定義の延長として実装されます。

したがって、まずは、API 定義ファイルをサーバーのディレクトリに移動します。

Terminal
cd server
yarn add -D frourio aspida
mkdir api
yarn frourio --watch

別のターミナルセッションで、

Terminal
mkdir api/hi

次に、src/api にある API 型定義を server/api にコピーします。

Terminal
cp ../src/api/index.ts api
cp ../src/api/hi/index.ts api/hi

1.2. コントローラーを実装する​

デフォルトでは、body は文字列として生成されており、api/controller.ts に型エラーが発生しています。

続いて、body に { hello: 'world' } を指定することで、型エラーが解消されます。

server/api/controller.ts
 import {defineController} from './$relay';

 export default defineController(() => ({
-  get: () => ({ status: 200, body: 'Hello' }),
+  get: () => ({ status: 200, body: { hello: 'world' } }),
 }));

また、api/hi の body も { hello: 'how are you?' } に置き換える必要があります。

1.3. Frourio サーバーを起動する​

server ディレクトリに $server.ts が生成されていることを確認してください。

index.ts を編集し、これを用いてサーバーを起動します。

server/index.ts
 import Fastify from 'fastify';
 import FastifyCors from '@fastify/cors';
+import server from './$server';

 const fastify = Fastify();

 fastify.register(FastifyCors, {});

-fastify.get('/', (req, reply) => {
-  reply.send({ hello: 'world' });
-});
-
-fastify.get('/hi', (req, reply) => {
-  reply.send({ hello: 'how are you?' });
-});
+server(fastify);

 fastify.listen({ port: 8888, host: '0.0.0.0' });

さて、frourio サーバーを起動しましょう！

Terminal
yarn ts-node index.ts

念のため、サーバーが以前と同じように動いているか確認しましょう。

Terminal
curl http://localhost:8888
curl http://localhost:8888/hi
Browser Console
const response = await fetch('http://localhost:8888');
await response.json();

1.4. クライアントを変更する​

api ディレクトリを移動したので、クライアントから参照するパスも変更する必要があります。

aspida.config.js
 module.exports = {
-  input: "src/api",
+  input: "server/api",
   baseURL: "http://localhost:8888",
 };
src/apiClient.ts
-import $api from "./api/$api";
+import $api from "../server/api/$api";

さらに、API 定義ファイルも再生成しておきましょう。

Terminal
yarn aspida

1.5. 最終的な結果​

以前のページと同じように見えます。

しかしながら、その裏には 「１つの TypeScript」が実現されている という大きな違いがあるのです。

How are you?

http://localhost:3000
うまくいきませんでしたか？

次の事項を確認してみてください。

  1. バックエンドサーバーを起動していますか？（frourio-tutorial/server ディレクトリで yarn ts-node index.ts を実行）
  2. フロントエンドサーバーを起動していますか？（frourio-tutorial ディレクトリで yarn start を実行）
  3. サーバーファイルを生成しましたか？（frourio-tutorial/server ディレクトリで yarn frourio を実行）
  4. API ファイルを生成しましたか？（frourio-tutorial ディレクトリで yarn aspida を実行）

2. Frourio のその他の機能​

フックやバリデーションのように、このチュートリアルには frourio の機能がすべて含まれているわけではありません。 これらについての情報は、ドキュメント を参照してください。