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

Author: chvmvd

docs/4-advanced/05-deploy/backend-configuration.png

@@ -0,0 +1,251 @@
+---
+title: フロントエンドとバックエンドの連携とデプロイ
+---
+
+## フロントエンドとバックエンドを連携する
+
+Reactによって作成されたブラウザ上で動くフロントエンドと、Node.jsによって作成されたサーバー上で動くバックエンドを接続する方法について学びましょう。
+
+### 全体構成
+
+{/* ここでは、フロントエンドとバックエンドを分けて開発します。 */}
+
+{/* フロントエンドとバックエンドの開発用サーバーをそれぞれ起動し、フロントエンドからバックエンドにFetch APIを用いてHTTPリクエストを送信します。 */}
+
+ここに図を埋め込む
+
+### バックエンドを作成する
+
+まずは、バックエンドを作成しましょう。
+
+1. 新しいプロジェクト用のディレクトリを作成し、その中に`backend`ディレクトリを作成して開きます。
+1. バックエンドでTypeScriptを使用するためのセットアップを行います。
+
+   ここに動画を埋め込む
+   1. `npm init`コマンドを実行して`package.json`ファイルを作成した後、`type`フィールドの値を`module`にします。
+   1. `npm install -D typescript`コマンドを実行して、必要なパッケージをインストールします。
+   1. `npx tsc --init`コマンドを実行してTypeScriptの設定を記述するための`tsconfig.json`ファイルを作成します。作成された`tsconfig.json`の[`outDir`オプション](https://www.typescriptlang.org/tsconfig/#outDir)の値を`"./dist"`にして、トランスパイル結果が`dist`ディレクトリに入るようにします。また、`.gitignore`ファイルに`/dist`を追加して、`dist`ディレクトリがGitの管理下に入らないようにします。
+   1. `package.json`の`scripts`プロパティに開発によく使うコマンドを登録します。次のように記載して、`npm run build`コマンドと`npm start`コマンドが使えるようにしましょう。`npm run build`コマンドでTypeScriptファイルをJavaScriptファイルにトランスパイルし、`npm start`コマンドで出力されたJavaScriptファイルを実行できるようになります。
+
+      ```json title="package.jsonの抜粋"
+      {
+        "scripts": {
+          "build": "npx prisma generate --no-engine && tsc",
+          "start": "node --env-file=.env dist/main.js"
+        }
+      }
+      ```
+
+   :::tip[`prisma generate`]
+
+   :::
+
+   :::tip[`tsx`]
+
+   {/* `tsx`は、 */}
+
+   {/* `npm install -D tsx`とすることでインストールでき、`tsx main.mts`のようにすることで、TypeScriptファイルを直接実行できます。 */}
+
+   :::
+
+1. [データーベース](/docs/web-servers/database/)の節と同じように、データベースを作成し、Expressを用いてWebサーバーを作成します。
+   1. Supabaseで新しいデータベースを作成します。
+   1. `npm install @prisma/client dotenv`コマンドと`npm install -D prisma`コマンドを実行して、必要なパッケージをインストールします。
+   1. `npx prisma init`コマンドを実行してPrismaのセットアップに必要なファイルを作成します。作成された`prisma.config.ts`ファイルを編集し、`.env`ファイルの内容が読み込まれるようにします。
+   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"
+        output   = "../generated/prisma"
+      }
+
+      datasource db {
+        provider = "postgresql"
+        url      = env("DATABASE_URL")
+      }
+
+      model Post {
+        id      Int    @id @default(autoincrement())
+        message String
+      }
+      ```
+
+   1. `npx prisma db push`コマンドを実行して、テーブルとカラムの定義をデータベースに反映します。
+   1. 掲示板への投稿のサンプルデータをデータベースに登録します。
+   1. `npm install express`コマンドと`npm install -D @types/express`コマンドを実行して、Expressとその型定義をインストールします。
+   1. `main.ts`ファイルを作成し、次のように記述します。
+
+      ```ts
+      import express from "express";
+      import { PrismaClient } from "./generated/prisma/client.js";
+
+      const app = express();
+      const client = new PrismaClient();
+
+      app.use(express.json());
+
+      app.get("/posts", async (request, response) => {
+        response.json(await client.post.findMany());
+      });
+
+      app.post("/send", async (request, response) => {
+        await client.post.create({ data: { message: request.body.message } });
+        response.send();
+      });
+
+      app.listen(3000);
+      ```
+
+   1. `npm run build`コマンドと`npm start`コマンドを実行してWebサーバーを起動し、`http://localhost:3000/posts`にアクセスして、掲示板への投稿の一覧が取得できることを確認します。
+
+1. フロントエンドとバックエンドで別のサーバーを起動しており、これらのオリジンが異なることから、CORS（Cross-Origin Resource Sharing）を設定する必要があります。
+
+   ここに動画を埋め込む
+   1. `npm install cors`コマンドと`npm install -D @types/cors`コマンドを実行して、CORSとその型定義をインストールします。
+   1. `.env`ファイルを編集し、環境変数`WEB_ORIGIN`の値をViteの開発用サーバーのオリジンである`http://localhost:5173`に設定します。
+   1. `main.ts`ファイルを編集し、CORSに関する設定を行います。8行目の`app.use(cors({ origin: process.env.WEB_ORIGIN }));`により、`WEB_ORIGIN`に設定したオリジンからのリクエストのみを許可するようにします。
+
+      ```ts showLineNumbers
+      import express from "express";
+      import cors from "cors";
+      import { PrismaClient } from "./generated/prisma/client.js";
+
+      const app = express();
+      const client = new PrismaClient();
+
+      app.use(cors({ origin: process.env.WEB_ORIGIN }));
+      app.use(express.json());
+
+      app.get("/posts", async (request, response) => {
+        response.json(await client.post.findMany());
+      });
+
+      app.post("/send", async (request, response) => {
+        await client.post.create({ data: { message: request.body.message } });
+        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`の値をバックエンドのURLである`http://localhost:3000`に設定します。
+1. `App.tsx`ファイルを編集し、次のようにします。掲示板への投稿の取得や、新しい投稿の送信には、`fetch`関数を使用します。`fetch`関数の第1引数は今までは`/posts`のようにしていましたが、ここでは環境変数`VITE_API_ENDPOINT`に設定したバックエンドのURLを利用して、`${import.meta.env.VITE_API_ENDPOINT}/posts`のようにしています。
+
+   ```tsx
+   import { useEffect, useState } from "react";
+
+   const getPostsApi = `${import.meta.env.VITE_API_ENDPOINT}/posts`;
+   const postPostApi = `${import.meta.env.VITE_API_ENDPOINT}/send`;
+
+   type Post = { id: number; message: string };
+
+   function App() {
+     const [posts, setPosts] = useState<Post[]>([]);
+     const [newPostContent, setNewPostContent] = useState("");
+
+     useEffect(() => {
+       const timerId = setInterval(async () => {
+         const response = await fetch(getPostsApi);
+         setPosts(await response.json());
+       }, 1000 * 5);
+
+       return () => {
+         clearInterval(timerId);
+       };
+     }, []);
+
+     return (
+       <>
+         <ul>
+           {posts.map((post) => (
+             <li key={post.id}>{post.message}</li>
+           ))}
+         </ul>
+         <input
+           value={newPostContent}
+           onChange={(e) => {
+             setNewPostContent(e.target.value);
+           }}
+         />
+         <button
+           type="button"
+           onClick={async () => {
+             await fetch(postPostApi, {
+               method: "POST",
+               headers: { "Content-Type": "application/json" },
+               body: JSON.stringify({ message: newPostContent }),
+             });
+           }}
+         >
+           送信
+         </button>
+       </>
+     );
+   }
+
+   export default App;
+   ```
+
+   :::tip[Viteでの環境変数の利用]
+
+   {/* Viteでは、`VITE_`で始まる環境変数を`import.meta.env`から参照 */}
+
+   {/* これを利用して、開発環境と本番環境で環境変数を使用してバックエンドのURLを切り替えられるようにします。 */}
+
+   :::
+
+1. `npm run dev`コマンドを実行してViteの開発用サーバーを起動し、`http://localhost:5173/`にアクセスして、正しく動作することを確認します。
+
+## デプロイする
+
+{/* ### 全体構成 */}
+{/* ### 本番ビルドを確認する */}
+{/* ### Renderにデプロイする */}
+
+1. バックエンドをデプロイするため、`Web Service`を選びます。
+
+   ![](./web-service.png)
+
+1. バックエンドは、次のように設定します。
+
+   ![バックエンドの設定](./backend-configuration.png)
+
+1. フロントエンドをデプロイするため、`Static Site`を選びます。
+
+   ![](./static-site.png)
+
+1. フロントエンドは、次のように設定します。
+
+   ![フロントエンドの設定](./frontend-configuration.png)
+
+1. 環境変数`VITE_API_ENDPOINT`に先ほどデプロイしたバックエンドのURLを設定します。
+
+   ![](./frontend-environment-variable.png)
+
+1. バックエンドの環境変数の設定を再度開き、環境変数`DATABASE_URL`を設定し、環境変数`WEB_ORIGIN`に先ほどデプロイしたフロントエンドのオリジンを設定します。
+
+   ![](./backend-environment-variable.png)