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

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

この節で書く内容の概略と節構成は #886 を参照してください。
「ここに動画を埋め込む」と記載されているところに、今後動画を掲載します。動画の掲載以外については現在すべて完了しています。
Prismaの使用法については、最新のPrisma 6.18の使用法に合わせて記述しています。現在の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:	`5c605c9`
Status:	✅ Deploy successful!
Preview URL:	https://49926bf9.utcode-learn.pages.dev
Branch Preview URL:	https://add-deploy-chapter.utcode-learn.pages.dev

View logs

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

ボツとなった画像

chvmvd · 2025-11-16T02:35:55Z

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`,


過度に複雑になることを防ぐために、変数には切り出さずにfetch関数の第1引数に直接${import.meta.env.VITE_API_ENDPOINT}/postsと記載しています。

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

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

nakaterm · 2025-11-17T23:34:36Z

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

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


「Web サーバー」が 2 通りの意味で使われてしまっている気がします。バックエンド: Web サーバー、フロントエンド: 開発用サーバーとするなら、上では「それぞれ別のサーバーを起動します」とするのがいい気がしました。

別々のサーバーにする必要があるのはなぜなのかについての説明があるといい気がします。読者は、今までは 1 つのサーバーで動かせていたのに、なぜそれを分離する必要があるのか？と思ってしまう気がします。

「Web サーバー」が 2 通りの意味で使われてしまっている気がします。バックエンド: Web サーバー、フロントエンド: 開発用サーバーとするなら、上では「それぞれ別のサーバーを起動します」とするのがいい気がしました。

そうですね。開発用サーバーをWebサーバーとすると少し語弊が生じそうですね。直します。

nakaterm · 2025-11-17T23:41:39Z

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

+   1. `cd backend`コマンドでカレントディレクトリを移動した後、`npm init`コマンドで`package.json`ファイルを作成し、`type`フィールドの値を`"module"`にします。
+   1. `npm install -D typescript`コマンドを実行してTypeScriptをインストールし、`npx tsc --init`コマンドを実行してTypeScriptの設定を記述するための`tsconfig.json`ファイルを作成します。
+   1. ここでは、TypeScriptファイルを直接実行するために、`npm install -D tsx`コマンドを実行して<Term>[tsx](https://tsx.is/)</Term>をインストールします。`tsx 実行するファイルのパス`とすることで、TypeScriptファイルを直接実行できます。


どれが手順で、どれが説明なのかを分かりやすくするため、手順単位で箇条書きを作成し、説明はそれらの手順に付随するものとして書くといい気がしました。また、手順は基本的にインラインコードではなくコードブロックにすると良さそうです。
(特に、初めて読む際は、一旦コマンドを叩くだけ叩いてアプリが動くようにしたい、という場合が多そうなので)

例えばこんな感じですかね？

カレントディレクトリを移動します。
cd backend

package.jsonファイルを作成します。
npm init

作成されたpackage.jsonファイルの typeフィールドの値を"module"にします。

TypeScriptをインストールします。
npm install -D typescript

TypeScriptの設定を記述するためのtsconfig.jsonファイルを作成します。
npx tsc --init

ここでは、TypeScriptファイルを直接実行するために、tsxをインストールします。
npm install -D tsx

tsx 実行するファイルのパスとすることで、TypeScriptファイルを直接実行できます。

基本的にほとんどの内容は今までに扱った内容なので、すべての手順を独立した箇条書きにしてコードブロックとすると冗長になり流れがわかりづらいと思ったことがこのようになっている理由となっています。そのため、箇条書きの単位をひとつの作業のまとまりごととして作成しインラインコードとしました。箇条書きの単位は、たとえば、ここでは、適切にpackage.jsonを作成するまとまり、TypeScriptをセットアップするまとまり、tsxをセットアップするまとまりになっています。また、コマンドに関しては直接コマンドを載せることが一番簡単に手順を伝える方法であることから必要なコマンドがすべて記載されていますが、GUIでの操作は詳細に書いていないようにここでの手順はあくまで補助的なもので詳細については該当する節で補うという立ち位置で書いています。

主にデータベースの節の演習問題の書き方などに揃えた形です。

utcode-learn/docs/3-web-servers/08-database/index.mdx

Line 234 in 2639895

## 演習問題

utcode-learn/docs/3-web-servers/08-database/index.mdx

Line 98 in 2639895

新しいフォルダをVS Codeで開き、`npm init`コマンドを使用して`package.json`ファイルを作成した後、

utcode-learn/docs/4-advanced/03-typescript/index.mdx

Line 54 in 2639895

まずは、プロジェクトルートに`package.json`を作成します。`npm init`を実行すればよいのでした。

ただ、tsxに関するところに関してはやはりわかりづらいので、修正します。

(MTG メモ)

私の案だと適切なまとまりごとにするのが難しいというのを確認

例えば npm install -D typescript と npx tsc --init を同じコードブロックにした上でそれぞれの説明を書くとかはできない

https://github.com/ut-code/utcode-learn/blob/4b2c22b90cad21731b06c802c35776259e4d5013/docs/3-web-servers/03-node-js/index.mdx を参考にする折衷案などの可能性があるかもしれない、となった

とりあえず、私の中で現在思いついている方法としては、次があります。

もう一段階ネストを深くする（ネストが深くなりすぎるという問題はありますが）

カレントディレクトリを移動する
cd backend

package.jsonを作成する

package.jsonファイルを新規に作成する
npm init

typeフィールドの値を"module"にする

TypeScriptのセットアップをする

TypeScriptをインストールする
npm install -D typescript

TypeScriptの設定を記述するためのtsconfig.jsonファイルを作成する
npx tsc --init

以下略

同じコードブロックに複数のコマンドを記載する（同じことが繰り返されがちになるという問題はありますが）

カレントディレクトリを移動する
cd backend

package.jsonを作成する
npm init

typeフィールドの値を"module"にする

npm install -D typescriptコマンドでTypeScriptをインストールし、npx tsc --initコマンドでTypeScriptの設定を記述するためのtsconfig.jsonファイルを作成する
npm install -D typescript npx tsx --init

以下略

一度扱ったことは再度記述しない（学習者が混乱するという問題はありますが）

TypeScriptの節のように、TypeScriptをインストールし、TypeScriptの設定を記述するためのtsconfig.jsonファイルを作成する。

TypeScriptファイルを直接実行するために、tsxをインストールする。tsx 実行するファイルのパスとすることで、TypeScriptファイルを直接実行できる。
npm install -D tsx

以下略

動画にすべて任せる
かなり不親切ではありますが、例はなくもないです

utcode-learn/docs/4-advanced/03-typescript/index.mdx

Lines 327 to 329 in 4b2c22b

`DT`アイコンがついているパッケージは、`@types/パッケージ名`という名称のパッケージをインストールすることで、TypeScriptからパッケージが利用可能になります。例えば、`@types/express`パッケージをインストールすることにより、`express`パッケージがTypeScriptから利用できるようになります。

<video src={typesPackageVideo} controls />

utcode-learn/docs/4-advanced/03-typescript/index.mdx

Lines 335 to 337 in 4b2c22b

Viteは、標準でTypeScriptのトランスパイラが内蔵されています。新しくプロジェクトを作成する際は、テンプレートを選択する際にTypeScriptのテンプレートを使用しましょう。

<video src={viteTypescriptVideo} controls />

utcode-learn/docs/4-advanced/04-react/index.mdx

Lines 99 to 101 in 4b2c22b

それでは、Reactを用いたプロジェクトを作成してみましょう。Viteでプロジェクトを作成しますが、`framework`は`React`、`variant`は`TypeScript`を選択してください。

<video src={createReactProjectVideo} controls />

Tabを使うことで動画での説明とテキストでの説明を切り替える
実質的には意味はありませんが、操作の内容がよくわかっていない人は動画の方にある程度わかっている人はテキストの方に誘導させる効果は期待できるかもしれません。

(MTG メモ)
これ動画を載せるって前提がいつの間にか頭から抜け落ちてました、すみません・・・
手順が全部わかる動画があるなら、必ずしもコードブロックがある必要はないですね。

nakaterm · 2025-11-18T00:03:06Z

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

+   1. `npm install -D typescript`コマンドを実行してTypeScriptをインストールし、`npx tsc --init`コマンドを実行してTypeScriptの設定を記述するための`tsconfig.json`ファイルを作成します。
+   1. ここでは、TypeScriptファイルを直接実行するために、`npm install -D tsx`コマンドを実行して<Term>[tsx](https://tsx.is/)</Term>をインストールします。`tsx 実行するファイルのパス`とすることで、TypeScriptファイルを直接実行できます。
+
+1. [データベース](/docs/web-servers/database/)の節と同じように、データベースを作成し、Expressを用いてWebサーバーを作成します。


同様に、手順単位で箇条書きを作成するといい気がしました。

nakaterm · 2025-11-18T00:05:10Z

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

+1. [データベース](/docs/web-servers/database/)の節と同じように、データベースを作成し、Expressを用いてWebサーバーを作成します。
+   1. Supabaseで新しいデータベースを作成します。
+   1. `npm install @prisma/client dotenv`コマンドと`npm install -D prisma`コマンドを実行して、Prismaのセットアップに必要なパッケージをインストールします。
+   1. `npx prisma init`コマンドを実行してPrismaのセットアップに必要なファイルを作成します。作成された`prisma.config.ts`ファイルを編集し、`.env`ファイルの内容が読み込まれるようにします。


ここの詳細な手順 (dotenv.config() と書く、みたいな) は説明しなくていいんでしたっけ？公式の案内がないからまだできないという段階でしたっけ？

また、コマンドに関しては直接コマンドを載せることが一番簡単に手順を伝える方法であることから必要なコマンドがすべて記載されていますが、GUIでの操作は詳細に書いていないようにここでの手順はあくまで補助的なもので詳細については該当する節で補うという立ち位置で書いています。

上で述べているように詳細な手順はデータベースの節を参照してもらう立ち位置となっています。現状、prisma/prisma#28116 （cf. #892 ）の問題によりデータベースの節をPrisma 7に対応させることができていないため、参照先がない状況になってしまっていますが 💦

nakaterm · 2025-11-18T00:20:16Z

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

+   1. `.env`ファイルを編集し、Prismaがデータベースに接続できるようにします。
+   1. 作成された`schema.prisma`ファイルを編集し、掲示板への投稿を保存するためのテーブルとそのカラムの定義を次のように記述します。
+
+      ```javascript title="/backend/prisma/schema.prisma"


絶対パス /backend/prisma/schema.prisma ではなくて、backend/prisma/schema.prisma ではないですか？ (他も同様です)

プロジェクトフォルダを基準とした記法として書いたのですが、混乱を招くので直します！

nakaterm · 2025-11-18T00:44:26Z

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

+
+   :::
+
+1. `package.json`の`scripts`プロパティに開発によく使うコマンドを登録します。次のように記載して、`npm run dev`コマンドが使えるようにしましょう。<Term>tsx</Term>でも、Node.jsと同様に`--env-file`オプションが利用できます。これにより、`npm run dev`コマンドを実行することでWebサーバーを起動できるようになります。


「これにより〜」の部分が --env-file オプションの説明になるように書くといい気がします。「これにより、指定したファイルから環境変数を読み込みつつ〜〜を起動できます」みたいな。

文章がわかりづらかったので、直します！

nakaterm · 2025-11-18T00:45:01Z

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

+      app.listen(3000);
+      ```
+
+1. フロントエンドとバックエンドで別のWebサーバーを起動しているため、<Term>CORS</Term>というものに関する設定を行う必要があります。


同様に、手順単位で箇条書きを作成するといい気がしました。

nakaterm · 2025-11-18T00:45:35Z

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

+1. `cd ..`コマンドでカレントディレクトリを移動してから`npm create vite@latest`コマンドを実行して`frontend`という名前でReactのプロジェクトを作成し、作成されたディレクトリ内で`npm install`コマンドを実行して必要なパッケージをインストールします。
+1. `.env`ファイルを作成し、<Term>環境変数</Term>`VITE_API_ENDPOINT`の値をバックエンドのURLである`"http://localhost:3000"`に設定します。
+1. `App.tsx`ファイルを編集し、次のように記述します。掲示板への投稿の取得や、新しい投稿の送信には、`fetch`関数を使用します。`fetch`関数の第1引数は今までは`/posts`のように記述していましたが、ここでは`import.meta.env.VITE_API_ENDPOINT`により<Term>環境変数</Term>`VITE_API_ENDPOINT`に設定したバックエンドのURLを参照して、`${import.meta.env.VITE_API_ENDPOINT}/posts`と記述しています。


同様に、手順単位で箇条書きを作成するといい気がしました。

nakaterm · 2025-11-18T00:53:08Z

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

+{/* prettier-ignore */}
+1. <Term>環境変数</Term>`VITE_API_ENDPOINT`に先ほど<Term>デプロイ</Term>したバックエンドのURLを設定します。


箇条書きの番号がリセットされてしまっている？

ミスです。直します！

nakaterm · 2025-11-18T01:09:56Z

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

+
+1. 次のように設定します。
+
+   ![フロントエンドの設定](./frontend-configuration.png)


バックエンドの URL 隠しているのはあえてですかね？
Render の URL を登録していることがわかるメリットが大きいので、載せちゃってもいいのかもと思ったり。

ミスです！直します。

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

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

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 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

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


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

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

	`DT`アイコンがついているパッケージは、`@types/パッケージ名`という名称のパッケージをインストールすることで、TypeScriptからパッケージが利用可能になります。例えば、`@types/express`パッケージをインストールすることにより、`express`パッケージがTypeScriptから利用できるようになります。

	<video src={typesPackageVideo} controls />

	Viteは、標準でTypeScriptのトランスパイラが内蔵されています。新しくプロジェクトを作成する際は、テンプレートを選択する際にTypeScriptのテンプレートを使用しましょう。

	<video src={viteTypescriptVideo} controls />

	それでは、Reactを用いたプロジェクトを作成してみましょう。Viteでプロジェクトを作成しますが、`framework`は`React`、`variant`は`TypeScript`を選択してください。

	<video src={createReactProjectVideo} controls />


		:::

		1. `package.json`の`scripts`プロパティに開発によく使うコマンドを登録します。次のように記載して、`npm run dev`コマンドが使えるようにしましょう。<Term>tsx</Term>でも、Node.jsと同様に`--env-file`オプションが利用できます。これにより、`npm run dev`コマンドを実行することでWebサーバーを起動できるようになります。

		{/* prettier-ignore */}
		1. <Term>環境変数</Term>`VITE_API_ENDPOINT`に先ほど<Term>デプロイ</Term>したバックエンドのURLを設定します。


		1. 次のように設定します。

		![フロントエンドの設定](./frontend-configuration.png)


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

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


		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`ディレクトリを配信すればよいです。

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

Choose a reason for hiding this comment

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!

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 Nov 21, 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!

nakaterm Nov 22, 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 Nov 23, 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!

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 Nov 21, 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!

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

chvmvd commented Oct 25, 2025 •

edited

Loading

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

edited

Loading

chvmvd Nov 21, 2025 •

edited

Loading

nakaterm Nov 22, 2025 •

edited

Loading

chvmvd Nov 23, 2025 •

edited

Loading

chvmvd Nov 21, 2025 •

edited

Loading