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

chvmvd · 2025-10-25T11:58:06Z

この節で書く内容の概略と節構成は #886 を参照してください。
「ここに動画を埋め込む」と記載されているところに、今後動画を掲載します。動画の掲載以外については現在すべて完了しています。
Prismaの使用法については、最新のPrisma 7.1.0の使用法に合わせて記述しています。現在のut.code(); LearnでのPrismaの使用法はPrisma 6.18以前の使用法であることに注意してください。こちらについての情報は #892 にまとめているので、参照してください。

cloudflare-workers-and-pages · 2025-10-25T12:00:35Z

Deploying utcode-learn with Cloudflare Pages

Latest commit:	`eeaf1d7`
Status:	✅ Deploy successful!
Preview URL:	https://a0f964e5.utcode-learn.pages.dev
Branch Preview URL:	https://add-deploy-chapter.utcode-learn.pages.dev

View logs

chvmvd · 2025-11-15T08:21:54Z

ボツとなった画像

docs/4-advanced/05-integration-and-deployment/_samples/fullstack-app/frontend/src/App.tsx

Copilot

Pull Request Overview

This PR adds a comprehensive new section on "Frontend and Backend Integration and Deployment" to the advanced documentation. The changes include term definitions for key concepts like tsx (TypeScript Execute), origins, and CORS, along with supporting visual materials and sample code for a fullstack application.

Key Changes

Added three new technical term definitions (tsx, origin, CORS) with Japanese descriptions and reference links
Included visual assets (PNG diagram and SVG flowchart) to illustrate web service architecture and data flow
Provided a React component to visually explain the concept of origins
Added frontend boilerplate configuration files (TypeScript configs, Vite setup, package.json)

Reviewed Changes

Copilot reviewed 22 out of 32 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/components/Term/type-map.js	Maps new terms (tsx, オリジン, CORS) to their definition keys
src/components/Term/definitions.js	Defines technical terms with Japanese descriptions and reference pages
docs/4-advanced/05-integration-and-deployment/web-service.png	Binary image file showing web service architecture
docs/4-advanced/05-integration-and-deployment/simple-forum-app-flow.drawio.svg	SVG diagram illustrating application data flow between user, servers, and database
docs/4-advanced/05-integration-and-deployment/origin-explanation.tsx	React component providing interactive explanation of URL origin components
docs/4-advanced/05-integration-and-deployment/_samples/fullstack-app/frontend/*	Frontend sample application configuration files including TypeScript configs, Vite setup, and package.json

Files not reviewed (1)

docs/4-advanced/05-integration-and-deployment/_samples/fullstack-app/backend/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

nakaterm

細かい部分のコラムでの説明も行き届いていてやっぱりさすがだなという感じです ✨
コメントしました！

docs/4-advanced/05-integration-and-deployment/index.mdx

chvmvd · 2025-11-28T02:34:26Z

docs/4-advanced/05-integration-and-deployment/index.mdx

+1. バックエンドでTypeScriptを使用するためのセットアップを行います。
+
+   ここに動画を埋め込む
+   1. `cd backend`コマンドでカレントディレクトリを移動した後、`npm init`コマンドで`package.json`ファイルを作成し、`type`フィールドの値を`"module"`にします。


ここはnpm initコマンドを実行する際にtypeフィールドの値を"module"にした方がいいかもです。

chelproc

見ました！

ちなみに新しい技術の導入ですが、「XX は YYYY です」とすると「その定義あってる？」となりがちなので、「XX を用いると、YYYY できます」とか、「YYYY するには、XX を使用します」とかすると良かったりします。

chelproc · 2025-11-30T07:28:23Z

...4-advanced/05-integration-and-deployment/_samples/fullstack-app/backend/prisma/schema.prisma

+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")


↓のようなエラーが出るのですが大丈夫そうでしょうか？？

The datasource property url is no longer supported in schema files. Move connection URLs for Migrate to prisma.config.ts and pass either adapter for a direct database connection or accelerateUrl for Accelerate to the PrismaClient constructor. See https://pris.ly/d/config-datasource and https://pris.ly/d/prisma7-client-configPrisma

Prisma 7.0.0以降だとそのようになるようです。Prisma 7.1.0に対応したことで、修正されました！

chelproc · 2025-11-30T07:57:26Z

docs/4-advanced/05-integration-and-deployment/_samples/fullstack-app/backend/main.ts

+
+app.post("/send", async (request, response) => {
+  await client.post.create({ data: { message: request.body.message } });
+  response.send();


sendStatus(201); ?

chelproc · 2025-11-30T07:57:49Z

docs/4-advanced/05-integration-and-deployment/_samples/fullstack-app/backend/main.ts

+  response.json(posts);
+});
+
+app.post("/send", async (request, response) => {


RESTful なら POST /posts なのでそうすべき？

chelproc · 2025-11-30T07:59:41Z

docs/4-advanced/05-integration-and-deployment/index.mdx

+
+## フロントエンドとバックエンドを連携する
+
+Reactによって作成されたブラウザ上で動くアプリケーションと、Node.jsによって作成されたサーバー上で動くアプリケーションを接続する方法について学びましょう。


「フロントエンド」「バックエンド」という言葉は導入済みなので使ってしまっても良いのでは？

chelproc · 2025-11-30T08:19:44Z

docs/4-advanced/05-integration-and-deployment/index.mdx

+
+![データベースの節で作成した掲示板サービスの処理の流れ](./simple-forum-app-flow.drawio.svg)
+
+今回作成する掲示板サービスでは、フロントエンドとバックエンドでそれぞれ別のWebサーバーを起動します。バックエンドはNode.jsを用いてWebサーバーを起動し、フロントエンドはViteを用いて開発用サーバーを起動します。処理の流れは、次の図のようになります。


「起動」は運用により過ぎた表現な気がします。また、フロントエンドは開発環境のみ触れられており本番環境がどう動作するのかが分かりづらい気がします。

ここでは簡単のため開発環境のみの場合に絞って説明していたのですが、やはりわかりづらいため、単に「今回作成する掲示板サービスでは、フロントエンドとバックエンドでそれぞれ別のサーバーを構築します。処理の流れは、次の図のようになります。」のような説明にしてみます 👍

chelproc · 2025-11-30T08:53:07Z

docs/4-advanced/05-integration-and-deployment/index.mdx

+
+   Viteでは[`VITE_`で始まる<Term>環境変数</Term>を`import.meta.env`オブジェクトのプロパティとして利用](https://ja.vite.dev/guide/env-and-mode.html#env-variables)できます。例えば、`VITE_API_ENDPOINT`という<Term>環境変数</Term>がある場合、`import.meta.env.VITE_API_ENDPOINT`として参照できます。
+
+   なお、Viteは起動時に`.env`ファイルの内容を自動的に読み込みます。


「Viteは起動時に.envファイルの内容を環境変数として読み込みます。」が先の方が自然かなと。

「Viteでは - できます」の繋がりが若干不正確かなと。「Viteは、VITE_で始まる環境変数を、アプリケーション内でimport.meta.envオブジェクトのプロパティとして利用できるようにします。」

chelproc · 2025-11-30T08:56:12Z

docs/4-advanced/05-integration-and-deployment/index.mdx

+
+## デプロイする
+
+今までは、バックエンドとフロントエンドのそれぞれで`npm run dev`コマンドを実行することで、バックエンドの場合にはTypeScriptファイルを直接実行してWebサーバーを起動し、フロントエンドの場合にはViteの開発用サーバーを起動していました。しかしながら、<Term>デプロイ</Term>する際には、これとは異なる方法を用いる必要があります。バックエンドの場合には、TypeScriptファイルをJavaScriptファイルに<Term>トランスパイル</Term>してから、そのJavaScriptファイルを実行します。フロントエンドの場合には、Viteにより出力されたファイルを配信します。


いずれも別に必須ではないです（バックエンドはtsxで問題なく動きますし、viteの開発用サーバーも本番用としても使えないこともないです）。「本番環境ではxxxすることが一般的です」という表現が妥当かなと！可能であれば、まず本番の説明があり、その後開発用サーバーがその代わりとしてどう動くのかを説明する順序の方が素直かなと思います。

この節の構成が、開発環境を構築してから（開発環境の構成を理解してから）、本番環境を構築するという順番になっているため、先に本番環境の説明をすることは難しそうです。

chelproc · 2025-11-30T08:57:38Z

docs/4-advanced/05-integration-and-deployment/index.mdx

+
+| 環境     | バックエンド                                                                | フロントエンド                     |
+| -------- | --------------------------------------------------------------------------- | ---------------------------------- |
+| 開発環境 | TypeScriptファイルを直接実行してWebサーバーを起動                           | Viteの開発用サーバーを起動         |


「TypeScriptファイルを直接実行」よりは「tsxパッケージを用いて実行」の方がよいかと思います。

フロントエンドではRender自身がWebサーバーとして機能していることを明示した方が良いかもしれません。

chelproc · 2025-11-30T08:59:16Z

docs/4-advanced/05-integration-and-deployment/index.mdx

+
+   :::tip[`prisma generate`コマンド]
+
+   [`prisma generate`コマンド](https://www.prisma.io/docs/orm/reference/prisma-cli-reference#generate)は、`schema.prisma`ファイルの内容に基づいて`Prisma Client`クラスを生成します。通常、`schema.prisma`ファイルを編集するたびにこのコマンドを再度実行して`Prisma Client`クラスを再生成する必要があります。ただし、`prisma db push`コマンドを実行する際にも`Prisma Client`クラスは生成されるため、`prisma db push`コマンドを実行した場合には`prisma generate`コマンドを実行する必要はありません。


「Prisma Clientクラス」は表現として適切でないかもです！
一応正確には「そのテーブル構造に基づいて専用のクライアントを生成します」とかになるのかなと。

すみません...
PrismaClientクラスとPrisma Clientを完全に混同していました。

chelproc · 2025-11-30T09:03:50Z

docs/4-advanced/05-integration-and-deployment/index.mdx

+
+### ビルドの設定をする
+
+フロントエンドの場合には、`npm run build`コマンドを実行することで、Viteにより<Term>トランスパイル</Term>とバンドルの結果が`dist`ディレクトリに格納されるのでした。<Term>デプロイ</Term>の際には、この`dist`ディレクトリを配信すればよいです。


この文脈だとトランスパイルとバンドルを分けて語ることは少ない気がします。「ビルド結果」とかでいいんじゃないでしょうか。

「デプロイ」は本番環境を作る瞬間のことなので、「distディレクトリの配信」は「デプロイ後の状況」であって、「デプロイの際」ではないかなと思います。「本番環境ではdistディレクトリの内容を配信」とかが良いかなと

一応ビルドということばは初出だったためこのように書いたのですが、やはり、「ビルド結果」のように書きます。
本番環境ということばも初出ではありますが、表ですでに使ってしまっているため、ここでも使用しようかと思います。

chvmvd · 2025-12-21T04:39:20Z

今までのレビューの内容をすべて直しました。また、動画なども加え、完成しています。再度レビューをお願いします！

Copilot

Pull request overview

Copilot reviewed 25 out of 51 changed files in this pull request and generated 3 comments.

Files not reviewed (2)

docs/4-advanced/04-react/_samples/todo-database/backend/package-lock.json: Language not supported
docs/4-advanced/05-integration-and-deployment/_samples/fullstack-app/backend/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-21T04:44:13Z

docs/4-advanced/05-integration-and-deployment/_samples/fullstack-app/frontend/.env

@@ -0,0 +1 @@
+VITE_API_ENDPOINT="http://localhost:3000"


環境変数の値がダブルクォートで囲まれていますが、.envファイルでは通常クォートは不要です。VITE_API_ENDPOINT=http://localhost:3000のように記述すべきです。Viteはクォートを値の一部として解釈する可能性があります。

Suggested change

VITE_API_ENDPOINT="http://localhost:3000"

VITE_API_ENDPOINT=http://localhost:3000

これで正しいです

Copilot · 2025-12-21T04:44:13Z

docs/4-advanced/05-integration-and-deployment/_samples/fullstack-app/frontend/src/App.tsx

+        onClick={async () => {
+          await fetch(`${import.meta.env.VITE_API_ENDPOINT}/posts`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ message: newPostContent }),
+          });
+        }}


送信ボタンをクリックした後、投稿一覧が自動的に更新されません。POSTリクエストが成功した後、投稿一覧を再取得するか、新しい投稿をローカルの状態に追加する処理が必要です。また、エラーハンドリングも実装されていません。

仕様です

Copilot · 2025-12-21T04:44:14Z

docs/4-advanced/05-integration-and-deployment/_samples/fullstack-app/frontend/src/App.tsx

+
+  useEffect(() => {
+    async function fetchPosts() {
+      const response = await fetch(
+        `${import.meta.env.VITE_API_ENDPOINT}/posts`,
+      );
+      setPosts(await response.json());
+    }
+    fetchPosts();
+  }, []);
+
+  return (
+    <>


fetchPosts関数でエラーハンドリングが実装されていません。ネットワークエラーやサーバーエラーが発生した場合、ユーザーにエラーメッセージを表示する必要があります。

Suggested change

useEffect(() => {

async function fetchPosts() {

const response = await fetch(

`${import.meta.env.VITE_API_ENDPOINT}/posts`,

);

setPosts(await response.json());

}

fetchPosts();

}, []);

return (

<>

const [error, setError] = useState<string | null>(null);

useEffect(() => {

async function fetchPosts() {

try {

const response = await fetch(

`${import.meta.env.VITE_API_ENDPOINT}/posts`,

);

if (!response.ok) {

throw new Error(`Failed to fetch posts: ${response.status}`);

}

const data = await response.json();

setPosts(data);

setError(null);

} catch (err) {

console.error("Error fetching posts:", err);

setError(

"投稿の取得中にエラーが発生しました。しばらくしてから再度お試しください。",

);

}

}

fetchPosts();

}, []);

return (

<>

{error && (

<div role="alert">

{error}

</div>

)}

仕様です

nakaterm

動画もお疲れ様です！
細かいところばかりですがコメントしました！

nakaterm · 2025-12-22T06:24:19Z

docs/4-advanced/05-integration-and-deployment/index.mdx

+   ```shell
+   $ npm install cors
+   $ npm install -D @types/cors
   ```


ここは $ が入っているが、「TypeScriptのセットアップをする」のところでは入っていなかったので統一すると良さそうです

同様の内容をインラインコードで書いてある場所もあるのでどちらかに統一すると良さそうです (理由があって区別しているなら問題ないですが)

npm install expressコマンドとnpm install -D @types/expressコマンドを実行して、Expressとその型定義をインストールします。

npm install @prisma/client @prisma/adapter-pg pg dotenvコマンドとnpm install -D prisma @types/pgコマンドを実行して、Prismaを利用するために必要なパッケージをインストールします。

nakaterm · 2025-12-22T06:39:38Z

docs/4-advanced/05-integration-and-deployment/index.mdx

-   ![](./backend-environment-variable.png)
+   ![](./backend-environment-variable-updated.png)

 <ViewSource url={import.meta.url} path="_samples/fullstack-app" noCodeSandbox />


コードの編集は「ビルドの設定をする」までで完了するので、この ViewSource は「ビルドの設定をする」の末尾でもいいような気がしました。

nakaterm · 2025-12-22T06:50:35Z

docs/4-advanced/05-integration-and-deployment/index.mdx


-      // 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
+1. カレントディレクトリを`backend`ディレクトリに移動し、`npm init`コマンドを実行して`package.json`ファイルを作成します。


「カレントディレクトリを」って要りますかね？「〇〇ディレクトリに移動し」でいいような気がします。

また、type を module にすることについて文面でも言及があったほうがいいような気がします。

nakaterm · 2025-12-22T06:51:21Z

docs/4-advanced/05-integration-and-deployment/index.mdx

+#### Reactのセットアップをする

-   :::
+カレントディレクトリをプロジェクトを格納するディレクトリに移動してから、`npm create vite@latest`コマンドを実行して`frontend`という名前でReactのプロジェクトを作成します。カレントディレクトリを`frontend`ディレクトリに移動してから、`npm install`コマンドを実行して必要なパッケージをインストールします。


同上 (「カレントディレクトリを」)

nakaterm · 2025-12-22T07:06:59Z

docs/4-advanced/05-integration-and-deployment/index.mdx

-        provider = "postgresql"
-        url      = env("DATABASE_URL")
-      }
+#### データベースと開発用サーバーを作成する


Express で動かすバックエンドのサーバーは「Web サーバー」でいいような？

過去のコメント ( #890 (comment) )見ましたが、これ実はコメントつける場所が間違っているんじゃないですかね？文面見る限り、フロントエンドの Vite のことだけを指しているような気がします (cc: @chelproc )

chvmvd force-pushed the add-deploy-chapter branch 8 times, most recently from 89884e6 to a54ea15 Compare November 4, 2025 03:25

chvmvd force-pushed the add-deploy-chapter branch 3 times, most recently from e0beb3e to e53da51 Compare November 16, 2025 02:06

chvmvd linked an issue Nov 16, 2025 that may be closed by this pull request

デプロイに関する節を作成する #886

Open

chvmvd commented Nov 16, 2025

View reviewed changes

docs/4-advanced/05-integration-and-deployment/_samples/fullstack-app/frontend/src/App.tsx Show resolved Hide resolved

chvmvd marked this pull request as ready for review November 16, 2025 02:40

chvmvd requested a review from Copilot November 16, 2025 02:40

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

28be016

chvmvd force-pushed the add-deploy-chapter branch from e53da51 to 28be016 Compare November 16, 2025 02:41

Copilot started reviewing on behalf of chvmvd November 16, 2025 02:41 View session

Copilot finished reviewing on behalf of chvmvd November 16, 2025 02:41

Copilot AI reviewed Nov 16, 2025

View reviewed changes

タイポを修正

5c605c9

nakaterm reviewed Nov 18, 2025

View reviewed changes

chvmvd commented Nov 28, 2025

View reviewed changes

chelproc reviewed Nov 30, 2025

View reviewed changes

chvmvd added 4 commits December 6, 2025 16:46

Prismaのバージョンを6.19.0から7.1.0にアップデート

c452c5f

フォーマット

57027b2

WIP

cf397f7

WIP

6d6ddc8

chvmvd added 2 commits December 21, 2025 13:31

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

1529a0a

デプロイの動画をトリミング

eeaf1d7

chvmvd requested review from chelproc, Copilot and nakaterm December 21, 2025 04:39

Copilot started reviewing on behalf of chvmvd December 21, 2025 04:41 View session

Copilot AI reviewed Dec 21, 2025

View reviewed changes

nakaterm reviewed Dec 22, 2025

View reviewed changes


		## フロントエンドとバックエンドを連携する

		Reactによって作成されたブラウザ上で動くアプリケーションと、Node.jsによって作成されたサーバー上で動くアプリケーションを接続する方法について学びましょう。


		![データベースの節で作成した掲示板サービスの処理の流れ](./simple-forum-app-flow.drawio.svg)

		今回作成する掲示板サービスでは、フロントエンドとバックエンドでそれぞれ別のWebサーバーを起動します。バックエンドはNode.jsを用いてWebサーバーを起動し、フロントエンドはViteを用いて開発用サーバーを起動します。処理の流れは、次の図のようになります。


		Viteでは[`VITE_`で始まる<Term>環境変数</Term>を`import.meta.env`オブジェクトのプロパティとして利用](https://ja.vite.dev/guide/env-and-mode.html#env-variables)できます。例えば、`VITE_API_ENDPOINT`という<Term>環境変数</Term>がある場合、`import.meta.env.VITE_API_ENDPOINT`として参照できます。

		なお、Viteは起動時に`.env`ファイルの内容を自動的に読み込みます。


		## デプロイする

		今までは、バックエンドとフロントエンドのそれぞれで`npm run dev`コマンドを実行することで、バックエンドの場合にはTypeScriptファイルを直接実行してWebサーバーを起動し、フロントエンドの場合にはViteの開発用サーバーを起動していました。しかしながら、<Term>デプロイ</Term>する際には、これとは異なる方法を用いる必要があります。バックエンドの場合には、TypeScriptファイルをJavaScriptファイルに<Term>トランスパイル</Term>してから、そのJavaScriptファイルを実行します。フロントエンドの場合には、Viteにより出力されたファイルを配信します。


		:::tip[`prisma generate`コマンド]

		[`prisma generate`コマンド](https://www.prisma.io/docs/orm/reference/prisma-cli-reference#generate)は、`schema.prisma`ファイルの内容に基づいて`Prisma Client`クラスを生成します。通常、`schema.prisma`ファイルを編集するたびにこのコマンドを再度実行して`Prisma Client`クラスを再生成する必要があります。ただし、`prisma db push`コマンドを実行する際にも`Prisma Client`クラスは生成されるため、`prisma db push`コマンドを実行した場合には`prisma generate`コマンドを実行する必要はありません。


		### ビルドの設定をする

		フロントエンドの場合には、`npm run build`コマンドを実行することで、Viteにより<Term>トランスパイル</Term>とバンドルの結果が`dist`ディレクトリに格納されるのでした。<Term>デプロイ</Term>の際には、この`dist`ディレクトリを配信すればよいです。

	VITE_API_ENDPOINT="http://localhost:3000"
	VITE_API_ENDPOINT=http://localhost:3000

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

chvmvd commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cloudflare-workers-and-pages bot commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying utcode-learn with Cloudflare Pages

Uh oh!

chvmvd commented Nov 15, 2025

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes

Reviewed Changes

Uh oh!

nakaterm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chelproc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chvmvd Dec 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chvmvd commented Dec 21, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Dec 21, 2025

Choose a reason for hiding this comment

Uh oh!

chvmvd commented Oct 25, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Oct 25, 2025 •

edited

Loading

chvmvd Dec 13, 2025 •

edited

Loading