フロントエンドとバックエンドの連携とデプロイの節を追加 #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:	`643f2e8`
Status:	✅ Deploy successful!
Preview URL:	https://50bd2739.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

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.

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

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

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を利用するために必要なパッケージをインストールします。

既存のドキュメントでは、コードブロック内の内容が複数行に渡る場合やコマンドの実行結果を表示する場合には$を先頭に付けており、今回は前者にあたるため$を先頭に付けています。

インラインコードにするか否かについてですが、冗長になることを防ぐため、既存のドキュメントと同様に初出の場合はコードブロックにして既出の場合はインラインコードにしています。

(MTG メモ)
後者については OK です！
前者については、他のところでも同様の問題があったんですね。そしたら今回はこのままにして、またの機会にまとめて対応しましょう！

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 )

私もコメントをつける場所が間違っているだけのような気もしたのですが、あえてバックエンド側も区別してもいいかなとは思い変えてみました。今回は開発環境ではtsxパッケージを用い、本番環境ではtsxパッケージを用いていないので。

やはり、もとのように「Webサーバー」にします。

Copilot

Pull request overview

Copilot reviewed 25 out of 51 changed files in this pull request and generated no new 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

Pull request overview

Copilot reviewed 25 out of 51 changed files in this pull request and generated 1 comment.

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.

src/components/Term/type-map.js

chelproc

ありがとうございます！

chelproc · 2026-01-10T23:38:51Z

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

+
+Viteを用いて構築されたフロントエンドと、Node.jsを用いて構築されたバックエンドを接続する方法について学びましょう。
+
+[データベース](/docs/web-servers/database/)の節で作成した掲示板サービスの処理の流れは、次の図のようになっていました。1つのWebサーバーが、フロントエンドで動作するアプリケーションの配信と、バックエンドで動作するアプリケーションの処理の両方を担っています。


細かいですが

Suggested change

[データベース](/docs/web-servers/database/)の節で作成した掲示板サービスの処理の流れは、次の図のようになっていました。1つのWebサーバーが、フロントエンドで動作するアプリケーションの配信と、バックエンドで動作するアプリケーションの処理の両方を担っています。

[データベースの節](/docs/web-servers/database/)で作成した掲示板サービスの処理の流れは、次の図のようになっていました。1つのWebサーバーが、フロントエンドで動作するアプリケーションの配信と、バックエンドで動作するアプリケーションの処理の両方を担っています。

こちらは既存の教材に合わせた形になります。

https://github.com/ut-code/utcode-learn/blame/ef2ff87188804a979100c2ebde8447789e8ff5f3/docs/3-web-servers/07-fetch-api-post/index.mdx#L13
https://github.com/ut-code/utcode-learn/blame/6f81df4ca311491dda1fcae502adfd02e3e52cc5/docs/3-web-servers/05-server/index.mdx#L11

chelproc · 2026-01-10T23:39:29Z

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

+
+今回作成する掲示板サービスでは、フロントエンドとバックエンドでそれぞれ別のサーバーを構築します。処理の流れは、次の図のようになります。
+
+![フロントエンドとバックエンドで別のサーバーを構築する掲示板サービスの処理の流れ](./fullstack-forum-app-flow.drawio.svg)


コンマ区切り

すみません。コメントの内容がわかりませんでした。
「HTML、CSS、JavaScript」と書いたことに関しては、これを日本語文とみなしたからになります。

chelproc · 2026-01-10T23:47:13Z

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

+
+今までの開発環境では、バックエンドとフロントエンドのそれぞれで`npm run dev`コマンドを実行することで、バックエンドの場合には<Term>`tsx`パッケージ</Term>でTypeScriptファイルを実行してWebサーバーを起動し、フロントエンドの場合にはViteの開発用サーバーを起動していました。
+
+しかしながら、本番環境では、これとは異なる方法を用いることが一般的です。バックエンドの場合には、TypeScriptファイルをJavaScriptファイルに<Term>トランスパイル</Term>してから、そのJavaScriptファイルを実行してWebサーバーを起動します。フロントエンドの場合には、Viteにより出力されたファイルをRenderで配信します。


下に表があるので、もっとシンプルに「本番環境では、開発用のツールや設定を取り除いて必要な変換を施し、最適化された最終成果物のみを使用します。このようなプロセスを[[ビルド]]と呼びます。」などとだけ言ってしまい、あとは比較表に任せてしまった方が良いと思います。地味に「ビルド」という言葉は初出ですし、ソフトウェアエンジニアリング全般として重要な用語なので、ちゃんと導入しちゃっても良いかと

chelproc · 2026-01-10T23:52:00Z

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

+
+### ビルドの設定をする
+
+フロントエンドの場合には、`npm run build`コマンドを実行することで、Viteによるビルド結果が`dist`ディレクトリに格納されるのでした。本番環境では、この`dist`ディレクトリをRenderで配信すればよいです。


回想形式よりは、対称性もありますし、改めて言ってしまっても良いかなと思います。また、細かいですが「場合には」が適切に使用されていない（フロントエンドはコンディションではなくモノ）気がします👀

フロントエンドのビルドのための設定は、Viteが生成するテンプレートのpackage.json含まれています。npm run buildを実行することで、Viteは最終成果物をdistディレクトリに出力します。...

{ "scripts": { "build": "vite build" } }

chelproc · 2026-01-10T23:54:00Z

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

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


やや唐突な感じを受けるので、「フロントエンドとバックエンドの分業が進んだ現代のWebアプリケーションでは、それぞれに別のWebサーバーを用意するのが一般的です。」などと理由を言うと良さそう。

chelproc · 2026-01-11T02:06:42Z

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

+プロトコル、ドメイン、ポートの組み合わせのことを<Term>**オリジン**</Term>と呼びます。
+
+<p>
+  <OriginExplanation />
+</p>
+
+異なる<Term>オリジン</Term>のリソースへアクセスすることはブラウザによって制限されることがあります。フロントエンドの開発用サーバーの<Term>オリジン</Term>が`http://localhost:5173`でバックエンドのWebサーバーの<Term>オリジン</Term>が`http://localhost:3000`である場合には、これらは異なる<Term>オリジン</Term>です。そのため、Fetch APIを使用してフロントエンドのアプリケーションからバックエンドのアプリケーションのリソースへアクセスすることはブラウザによって制限されます。
+
+{/* prettier-ignore */}
+<Term>**CORS（Cross-Origin Resource Sharing）**</Term>は、このような場合でも異なる<Term>オリジン</Term>のリソースへアクセスすることを可能にする仕組みです。クライアントからのリクエストに対して、サーバーがHTTPレスポンスヘッダにリソースへのアクセスを許可する<Term>オリジン</Term>を示す[`Access-Control-Allow-Origin`ヘッダ](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Access-Control-Allow-Origin)を含めることで、ブラウザはそこで指定された<Term>オリジン</Term>からアクセスすることを許可します。
+
+Expressを用いる場合には、[`cors`パッケージ](https://www.npmjs.com/package/cors)を使用することで、HTTPレスポンスヘッダに`Access-Control-Allow-Origin`ヘッダなどを適切に設定することができます。


オリジンの説明から始まっているので、正確ではあるのですが、CORS自体の説明としてみるとやや理解しづらい気がします。

「CORSとは、悪意のあるWebサイトが、利用者のブラウザを利用して本来許可されていないサービスにアクセスし、不正に情報を取得したり操作したりすることを防ぐための、ブラウザのセキュリティ機構です。」などの定義

具体的にどう言った場合に制限されのか（ここでオリジンが出てくる）

回避する方法

のような構成が良いかと思いました。

ブラウザのセキュリティ機構のことを同一オリジンポリシーと呼び、これを緩和する仕組みをCORSと呼ぶと私は理解しています。
そのため、オリジンを説明して、オリジンの説明をもとに同一オリジンポリシーを説明して、同一オリジンポリシーの説明をもとにCORSの説明をするという流れになっています。ただ、同一オリジンポリシーという用語を導入しないようにしているため、少し具体性に欠けるところはあるようにも思います。

ミーティングの内容の結果、具体的にフロントエンドとバックエンドが別のサーバーである時には、ブラウザでブロックされることがあり、それを緩和するのがCORSです。のように入り、その後に詳しく説明するのがよさそうという話をしました。

chelproc · 2026-01-11T02:19:26Z

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

+Viteは起動時に`.env`ファイルの内容を読み込みます。
+
+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`と記述することで利用できます。


第1文と第2文がぶつ切りに感じるので、第2文を述べたあと、「また、Viteは、.envファイルに記載された内容を、環境変数と同様に扱います（環境変数として読み込みます）。」の順番で説明するのはどうでしょう？

私もそのように書いたほうが自然かなとは思っており、以前はそのように書いていたのですが、現在のように書いたほうが自然だという意見があったため変更した次第になります。

#890 (comment)

次のような形でしょうか。

Viteは、VITE_で始まる環境変数を、アプリケーション内でimport.meta.envオブジェクトのプロパティとして利用できるようにします。例えば、VITE_API_ENDPOINTという環境変数の値は、import.meta.env.VITE_API_ENDPOINTと記述することで利用できます。

なお、Viteは起動時に.envファイルに記述された環境変数を読み込みます。

chelproc · 2026-01-11T02:40:23Z

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

+
+フロントエンドの場合には、`npm run build`コマンドを実行することで、Viteによるビルド結果が`dist`ディレクトリに格納されるのでした。本番環境では、この`dist`ディレクトリをRenderで配信すればよいです。
+
+次に、バックエンドのTypeScriptファイルを<Term>トランスパイル</Term>するための設定を行いましょう。


このレイヤーの説明であれば基本的に言葉は「ビルド」に統一した方が良いかと思います。「トランスパイル」はややJSのエコシステムに引っ張られている感じがします、prisma generateもありますしね。

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

docs/4-advanced/05-integration-and-deployment/index.mdx Outdated Show resolved Hide resolved

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

説明を微修正

a850023

chvmvd requested review from Copilot and nakaterm December 28, 2025 06:38

Copilot started reviewing on behalf of chvmvd December 28, 2025 06:39 View session

Copilot AI reviewed Dec 28, 2025

View reviewed changes

「開発用サーバー」の記述を「Webサーバー」に修正

643f2e8

chvmvd requested a review from Copilot December 29, 2025 14:36

Copilot started reviewing on behalf of chvmvd December 29, 2025 14:37 View session

Copilot AI reviewed Dec 29, 2025

View reviewed changes

src/components/Term/type-map.js Show resolved Hide resolved

chelproc reviewed Jan 11, 2026

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を用いて構築されたフロントエンドと、Node.jsを用いて構築されたバックエンドを接続する方法について学びましょう。

		[データベース](/docs/web-servers/database/)の節で作成した掲示板サービスの処理の流れは、次の図のようになっていました。1つのWebサーバーが、フロントエンドで動作するアプリケーションの配信と、バックエンドで動作するアプリケーションの処理の両方を担っています。

	[データベース](/docs/web-servers/database/)の節で作成した掲示板サービスの処理の流れは、次の図のようになっていました。1つのWebサーバーが、フロントエンドで動作するアプリケーションの配信と、バックエンドで動作するアプリケーションの処理の両方を担っています。
	[データベースの節](/docs/web-servers/database/)で作成した掲示板サービスの処理の流れは、次の図のようになっていました。1つのWebサーバーが、フロントエンドで動作するアプリケーションの配信と、バックエンドで動作するアプリケーションの処理の両方を担っています。


		今回作成する掲示板サービスでは、フロントエンドとバックエンドでそれぞれ別のサーバーを構築します。処理の流れは、次の図のようになります。

		![フロントエンドとバックエンドで別のサーバーを構築する掲示板サービスの処理の流れ](./fullstack-forum-app-flow.drawio.svg)


		今までの開発環境では、バックエンドとフロントエンドのそれぞれで`npm run dev`コマンドを実行することで、バックエンドの場合には<Term>`tsx`パッケージ</Term>でTypeScriptファイルを実行してWebサーバーを起動し、フロントエンドの場合にはViteの開発用サーバーを起動していました。

		しかしながら、本番環境では、これとは異なる方法を用いることが一般的です。バックエンドの場合には、TypeScriptファイルをJavaScriptファイルに<Term>トランスパイル</Term>してから、そのJavaScriptファイルを実行してWebサーバーを起動します。フロントエンドの場合には、Viteにより出力されたファイルをRenderで配信します。

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

		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`と記述することで利用できます。


		フロントエンドの場合には、`npm run build`コマンドを実行することで、Viteによるビルド結果が`dist`ディレクトリに格納されるのでした。本番環境では、この`dist`ディレクトリをRenderで配信すればよいです。

		次に、バックエンドのTypeScriptファイルを<Term>トランスパイル</Term>するための設定を行いましょう。

フロントエンドとバックエンドの連携とデプロイの節を追加 #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!

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!

Uh oh!

Uh oh!

Uh oh!

nakaterm left a comment

chvmvd commented Oct 25, 2025 •

edited

Loading

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

edited

Loading

chvmvd Dec 13, 2025 •

edited

Loading

chvmvd Dec 28, 2025 •

edited

Loading