フロントエンドとバックエンドの連携とデプロイの節を追加

Author: chvmvd

docs/4-advanced/05-deploy/index.mdx

@@ -0,0 +1,188 @@
+---
+title: フロントエンドとバックエンドの連携とデプロイ
+---
+
+## フロントエンドとバックエンドを連携する
+
+Reactによって作成されたブラウザ上で動くアプリケーションと、Node.jsによって作成されたサーバー上で動くアプリケーションを接続する方法について学びましょう。
+
+### 全体構成
+
+フロントエンドとバックエンドの開発用サーバーをそれぞれ起動し、フロントエンドからバックエンドにFetch APIを用いてHTTPリクエストを送信します。
+
+図
+
+### バックエンドを準備する
+
+まずは、バックエンドを作成しましょう。
+
+[データーベースの節](/docs/web-servers/database/)で行ったように、次のコマンドを実行してExpressとPrismaの環境を用意します。
+
+```shell
+$ npm init
+$ npm install express
+$ npx tsc --init
+$ npx prisma init
+```
+
+さらに、次のパッケージをインストールして、TypeScriptの環境を用意します。
+
+```shell
+npm install -D typescript @types/express
+```
+
+また、CORSを設定する必要があるため、次のパッケージをインストールします。
+
+```shell
+npm install cors @types/cors
+```
+
+`main.mts`を次のように用意します。8行目以外は、[データベースの節](/docs/web-servers/database/)の内容と同じです。
+
+フロントエンドとバックエンドが異なるため、CORSの設定を追加する必要があります。ここでは、フロントエンドの開発用サーバーのみからのアクセスのみを許すようにします。バックエンドのURLは開発環境と本番環境で異なるため、環境変数を使用して切り替えられるようにします。`.env`ファイルに`WEB_ORIGIN=http://localhost:5173`と書くことで、環境変数`WEB_ORIGIN`の値をViteの開発用サーバーのURLに設定します。Node.jsでは、`process.env`を使用することで環境変数にアクセスできるため、8行目のように`app.use(cors({ origin: process.env.WEB_ORIGIN }));`とすることで、`WEB_ORIGIN`に設定したURLからのアクセスのみを許可するようにしています。
+
+```tsx showLineNumbers
+import express from "express";
+import cors from "cors";
+import { PrismaClient } from "./generated/prisma/index.js";
+
+const app = express();
+const client = new PrismaClient();
+
+app.use(cors({ origin: process.env.WEB_ORIGIN }));
+
+app.use(express.json());
+
+app.get("/messages", async (request, response) => {
+  response.json(await client.message.findMany());
+});
+
+app.post("/send", async (request, response) => {
+  await client.message.create({ data: { content: request.body.content } });
+  response.send();
+});
+
+app.listen(3000);
+```
+
+Prismaファイルは、[データベースの節](/docs/web-servers/database/)と同様に次のようにします。
+
+```prisma
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
+// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
+
+generator client {
+  provider = "prisma-client-js"
+  output   = "../generated/prisma"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model Message {
+  id      Int    @id @default(autoincrement())
+  content String
+}
+```
+
+`npx prisma db push`コマンドを実行することで、データベースにテーブルを作成するのを忘れないようにしましょう。
+
+今までは、`tsc`コマンドでTypeScriptファイルをJavaScriptファイルにトランスパイルしてから`node`コマンドで実行していましたが、ここでは`tsx`コマンドを使用すると、TypeScriptファイルを直接実行することができ便利です。次のようにして`tsx`をインストールしてください。
+
+```shell
+npm install tsx
+```
+
+`package.json`の`scripts`プロパティに`"dev": "tsx main.mts"`を追加して、`npm run dev`でバックエンドの開発用サーバーを起動できるようにしましょう。
+
+### フロントエンドから通信する
+
+次に、Reactを用いたプロジェクトを作成して、`App.tsx`の中身を次のようにしてください。
+
+データを送信するには、`fetch`関数を使用します。今までは、`fetch`関数の第一引数は`/messages`としていましたが、ここではバックエンドのURLを指定する必要があります。バックエンドのURLは開発環境と本番環境で異なるため、環境変数を使用して切り替えられるようにします。Viteでは、`VITE_`で始まる環境変数を`import.meta.env`から参照できるため、これを利用します。`.env`ファイルを作成し、その中は`VITE_API_ENDPOINT=http://localhost:3000`のように設定することで、環境変数`VITE_API_ENDPOINT`の値をバックエンドのURLに設定します。`App.tsx`では、`fetch`関数の第一引数を`${import.meta.env.VITE_API_ENDPOINT}/send`のようにすることで、環境変数からバックエンドのURLを取得しています。
+
+データを取得する際にも、`fetch`関数を使用します。ただし、これはコンポーネント読み込み時に一度だけ実行したいため、`useEffect`フックを使用して実装します。
+
+```tsx
+import { useEffect, useState } from "react";
+
+const getMessagesApi = `${import.meta.env.VITE_API_ENDPOINT}/messages`;
+const postMessageApi = `${import.meta.env.VITE_API_ENDPOINT}/send`;
+
+type Message = { id: number; content: string };
+
+function App() {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [newMessageContent, setNewMessageContent] = useState("");
+
+  useEffect(() => {
+    const timerId = setInterval(async () => {
+      const response = await fetch(getMessagesApi);
+      setMessages(await response.json());
+    }, 1000 * 5);
+
+    // useEffectフックに指定した関数の戻り値に指定した関数はコンポーネントの破棄時に実行される
+    return () => {
+      clearInterval(timerId);
+    };
+  }, []);
+
+  return (
+    <>
+      <ul>
+        {messages.map((message) => (
+          <li key={message.id}>{message.content}</li>
+        ))}
+      </ul>
+      <input
+        value={newMessageContent}
+        onChange={(e) => {
+          setNewMessageContent(e.target.value);
+        }}
+      />
+      <button
+        type="button"
+        onClick={async () => {
+          await fetch(postMessageApi, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ content: newMessageContent }),
+          });
+        }}
+      >
+        送信
+      </button>
+    </>
+  );
+}
+
+export default App;
+```
+
+### 開発環境で動作を確認する
+
+バックエンドでは、`npm run dev`でWebサーバーを起動します。
+
+フロントエンドでは、`npm run dev`でViteの開発用サーバーを起動します。
+
+これで、フロントエンドとバックエンドが接続されました。メッセージの送信と取得ができることを確認してください。
+
+## デプロイする
+
+### 本番ビルドを確認する
+
+`outDir`オプションを`./dist`にしてトランスパイル結果が`/backend/dist`に入るようにしましょう。`allowJs`オプションを`true`にしてPrismaが生成したJavaScriptファイルをトランスパイル結果に含めるようにしましょう。`npm run build`コマンドと`npm start`コマンドを用意します。`npm run build`と`npm start`コマンドを実行し、ローカル環境でバックエンドが動作することを確認しましょう。
+
+フロントエンドでも`npm run build`コマンドと`npm run preview`コマンドを実行し、ローカル環境でフロントエンドが動作することを確認しましょう。
+
+実際に、メッセージの送信と取得ができることを確認してください。
+
+### Renderにデプロイする
+
+README通り
+