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

chvmvd · chvmvd · commit 3887681861f7 · 2025-10-28T16:29:13.000+09:00
diff --git a/docs/4-advanced/05-deploy/index.mdx b/docs/4-advanced/05-deploy/index.mdx
@@ -0,0 +1,244 @@
+---
+title: フロントエンドとバックエンドの連携とデプロイ
+---
+
+## フロントエンドとバックエンドを連携する
+
+Reactによって作成されたブラウザ上で動くアプリケーションと、Node.jsによって作成されたサーバー上で動くアプリケーションを接続する方法について学びましょう。
+
+### 全体構成
+
+ここでは、フロントエンドとバックエンドを分けて開発します。
+
+フロントエンドとバックエンドの開発用サーバーをそれぞれ起動し、フロントエンドからバックエンドにFetch APIを用いてHTTPリクエストを送信します。
+
+ここに図を埋め込む
+
+### バックエンドを作成する
+
+まずは、バックエンドを作成しましょう。
+
+1. 新しいプロジェクト用のディレクトリを作成し、その中に`backend`ディレクトリを作成して開きます。
+1. [データーベースの節](/docs/web-servers/database/)と同様に、データベースを作成し、Expressを用いてWebサーバーを作成します。
+   1. Supabaseで新しいデータベースを作成します。
+   1. `npm init`コマンドと`npx prisma init`コマンドを実行して、Prismaのセットアップをします。
+   1. `.env`ファイルを編集し、Prismaがデータベースに接続できるようにします。
+   1. `schema.prisma`ファイルを編集し、メッセージを保存するためのテーブルとカラムの定義を次のように記述します。
+
+      ```javascript
+      // 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
+      }
+      ```
+
+   1. `npx prisma db push`コマンドを実行して、テーブルとカラムの定義をデータベースに反映します。
+   1. メッセージのサンプルデータをデータベースに登録します。
+   1. `npm install express`コマンドを実行して、Expressのセットアップを行います。
+   1. `main.mjs`ファイルを作成し、次のように記述します。
+
+      ```js
+      import express from "express";
+      import { PrismaClient } from "./generated/prisma/index.js";
+
+      const app = express();
+      const client = new PrismaClient();
+
+      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);
+      ```
+
+   1. `node main.mjs`コマンドを実行して、Webサーバーを起動し、`http://localhost:3000/messages`にアクセスして、メッセージの一覧が取得できることを確認します。
+
+1. バックエンドでTypeScriptを使用するためのセットアップを行います。
+
+   ここに動画を埋め込む
+   1. `npm install -D typescript`コマンドを実行してTypeScriptをインストールします。
+   1. `npx tsc --init`コマンドを実行して、TypeScriptの設定を記述するための`tsconfig.json`ファイルを生成します。
+   1. 生成された`tsconfig.json`を編集して、`outDir`オプションの値を`./dist`にしてトランスパイル結果が`dist`ディレクトリに入るようにしましょう。また、`declaration`オプションと`declarationMap`オプションを消し、`allowJs`オプションの値を`true`にしてPrismaが生成したJavaScriptファイルをトランスパイル結果に含めるようにしましょう。
+   1. `npm install -D @types/express`コマンドを実行して、Expressの型定義をインストールします。
+   1. `main.mjs`ファイルの拡張子を`.mts`に変更し、TypeScriptで記述できるようにします。
+   1. `package.json`の`scripts`プロパティに`npm run`コマンドを登録しましょう。`npm run build`コマンドと`npm start`コマンドを次のように登録します。これで、`npm run build`コマンドでTypeScriptファイルをJavaScriptファイルにトランスパイルし、`npm start`コマンドでトランスパイルされたJavaScriptファイルを実行できるようになります。
+      ```json title="package.jsonの抜粋"
+      {
+        "scripts": {
+          "dev": "vite",
+          "build": "vite build",
+          "preview": "vite preview"
+        }
+      }
+      ```
+   1. `npm run build`コマンドと`npm start`コマンドを実行して、Webサーバーを起動し、`http://localhost:3000/messages`にアクセスして、メッセージの一覧が取得できることを確認します。
+
+   :::tip[`tsx`]
+
+   `tsx`は、
+
+   `npm install -D tsx`とすることでインストールでき、`tsx main.mts`のようにすることで、TypeScriptファイルを直接実行できます。
+
+   :::
+
+1. 今回はフロントエンドとバックエンドのドメインが異なるため、CORS（Cross-Origin Resource Sharing）を設定する必要があります。
+
+   ここに動画を埋め込む
+   1. `npm install cors @types/cors`コマンドを実行して、CORSミドルウェアとその型定義をインストールします。
+   1. `.env`ファイルに`WEB_ORIGIN=http://localhost:5173`と追記し、環境変数`WEB_ORIGIN`の値をViteの開発用サーバーのURLに設定します。
+   1. `main.mts`ファイルにCORSに関する設定を追加して、次のようにします。8行目のように`app.use(cors({ origin: process.env.WEB_ORIGIN }));`とすることで、`WEB_ORIGIN`に設定したURLからのアクセスのみを許可するようにします。
+
+      ```ts 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);
+      ```
+
+   :::tip[CORS]
+
+   CORS（Cross-Origin Resource Sharing）とは、
+
+   ここでは、フロントエンドの開発用サーバーのみからのアクセスのみを許すようにします。バックエンドのURLは開発環境と本番環境で異なるため、環境変数を使用して切り替えられるようにします。
+
+   :::
+
+### フロントエンドを作成する
+
+1. プロジェクト用のディレクトリをの中に`frontend`ディレクトリを作成して開きます。
+1. `npm create vite@latest`コマンドを実行して、Reactのプロジェクトを作成します。
+1. `.env`ファイルを作成し、`VITE_API_ENDPOINT=http://localhost:3000`と記述し、環境変数`VITE_API_ENDPOINT`の値をバックエンドのURLに設定します。
+1. `App.tsx`ファイルの中身を次のようにします。データを取得する際には、`useEffect`フックを使用して、コンポーネントの読み込み時に一度だけ実行するようにします。また、`fetch`関数の第一引数は今までは`/messages`のようにしていましたが、ここではバックエンドのURLを指定する必要があるため、`${import.meta.env.VITE_API_ENDPOINT}/messages`のようにしています。
+
+   ```tsx
+   import { useEffect, useState } from "react";
+
+   // Viteはトランスパイル時にimport.meta.envのプロパティをVITE_から始まる環境変数に置換する
+   // これを利用して開発環境と本番環境でFetch APIのリクエスト先を切り替えられる
+   // 参考：https://ja.vite.dev/guide/env-and-mode
+   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フックを使う
+     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;
+   ```
+
+   :::tip[Viteでの環境変数の利用]
+
+   Viteでは、`VITE_`で始まる環境変数を`import.meta.env`から参照
+
+   これを利用して、開発環境と本番環境で環境変数を使用してバックエンドのURLを切り替えられるようにします。
+
+   :::
+
+1. `npm run dev`コマンドを実行して、Viteの開発用サーバーを起動し、`http://localhost:5173`にアクセスして、正しく動作することを確認します。
+
+## デプロイする
+
+1. バックエンドをデプロイするため、`Web Service`を選びます
+   {/* ![](./images/web-service.png) */}
+1. バックエンドは、次のように設定します
+   {/* ![バックエンドの設定](./images/backend-configuration.png) */}
+1. フロントエンドをデプロイするため、`Static Site`を選びます
+   {/* ![](./images/static-site.png) */}
+1. フロントエンドは、次のように設定します
+   {/* ![フロントエンドの設定](./images/frontend-configuration.png) */}
+1. 環境変数`VITE_API_ENDPOINT`に先ほどデプロイしたバックエンドのURLを設定します
+   {/* ![](./images/frontend-environment-variable.png) */}
+1. バックエンドの環境変数の設定を再度開き、環境変数`DATABASE_URL`を設定し、環境変数`WEB_ORIGIN`に先ほどデプロイしたフロントエンドのURLを設定します
+   {/* ![](./images/backend-environment-variable.png) */}
+
+{/* ### 全体構成 */}
+{/* ### 本番ビルドを確認する */}
+{/* ### Renderにデプロイする */}
