Skip to content

Commit 57fdf66

Browse files
chvmvdchvmvd
committed
説明を修正
1 parent 8799ed5 commit 57fdf66

File tree

3 files changed

+42
-19
lines changed

3 files changed

+42
-19
lines changed

‎docs/4-advanced/02-bundler/index.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,8 @@ dist/assets/index-_AYE_jbl.js 2.58 kB │ gzip: 1.40 kB
9292

9393
出力されたファイルを元のファイルと比較してみましょう。元の`index.html`や`main.js`が、変換された状態で出力されていることがわかります。ディレクトリごと[Netlify Drop](/docs/trial-session/deploy-application/)などにアップロードすれば使用可能になるでしょう。
9494

95+
このように、<Term>トランスパイル</Term>や<Term id="module-bundler">バンドル</Term>などにより必要な変換や最適化を施し、実行可能な形式の最終成果物を生成する一連の処理は一般に<Term>**ビルド**</Term>と呼ばれます。本番環境では、これにより生成された最終成果物を配布します。
96+
9597
<video src={buildVideo} controls />
9698

9799
:::tip[`npm run`コマンド]

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

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ import deployVideo from "./deploy.mp4";
1616

1717
Viteを用いて構築されたフロントエンドと、Node.jsを用いて構築されたバックエンドを接続する方法について学びましょう。
1818

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

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

23-
今回作成する掲示板サービスでは、フロントエンドとバックエンドでそれぞれ別のサーバーを構築します。処理の流れは、次の図のようになります。
23+
実際のWebアプリケーション開発では、フロントエンドとバックエンドをそれぞれ独立して開発・運用できるようにするため、フロントエンドとバックエンドをそれぞれ別のサーバーで構築することが一般的です。処理の流れは、次の図のようになります。
2424

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

@@ -46,7 +46,7 @@ Viteを用いて構築されたフロントエンドと、Node.jsを用いて構
4646

4747
#### データベースとWebサーバーを作成する
4848

49-
[データベース](/docs/web-servers/database/)の節と同じように、データベースを作成し、Expressを用いてWebサーバーを作成します。詳細は、[データベース](/docs/web-servers/database/)の節を参照してください。
49+
以前に[データベース](/docs/web-servers/database/)で作成した際と同様に、データベースを作成し、Expressを用いてWebサーバーを作成します。詳細は、[データベース](/docs/web-servers/database/)を参照してください。
5050

5151
<video src={createDatabaseAndServerVideo} controls />
5252

@@ -117,16 +117,18 @@ Viteを用いて構築されたフロントエンドと、Node.jsを用いて構
117117

118118
:::tip[CORS（Cross-Origin Resource Sharing）]
119119

120-
プロトコル、ドメイン、ポートの組み合わせのことを<Term>**オリジン**</Term>と呼びます。
120+
フロントエンドとバックエンドをそれぞれ別のサーバーで構築する場合、フロントエンドのアプリケーションからバックエンドのアプリケーションのリソースへアクセスすることは、ブラウザによって制限されることがあります。<Term>**CORS（Cross-Origin Resource Sharing）**</Term>は、このような場合でも必要に応じてリソースへのアクセスを可能にする仕組みです。
121+
122+
ブラウザはセキュリティ上の理由から、異なる<Term>オリジン</Term>のリソースへのアクセスを制限することがあります。なお、<Term>**オリジン**</Term>は、プロトコル、ドメイン、ポートの組み合わせによって定義されます。
121123

122124
<p>
123125
<OriginExplanation />
124126
</p>
125127

126-
異なる<Term>オリジン</Term>のリソースへアクセスすることはブラウザによって制限されることがあります。フロントエンドの開発用サーバーの<Term>オリジン</Term>が`http://localhost:5173`でバックエンドのWebサーバーの<Term>オリジン</Term>が`http://localhost:3000`である場合には、これらは異なる<Term>オリジン</Term>です。そのため、Fetch APIを使用してフロントエンドのアプリケーションからバックエンドのアプリケーションのリソースへアクセスすることはブラウザによって制限されます。
128+
例えば、フロントエンドの開発用サーバーの<Term>オリジン</Term>が`http://localhost:5173`でバックエンドのWebサーバーの<Term>オリジン</Term>が`http://localhost:3000`である場合には、これらは異なる<Term>オリジン</Term>になります。そのため、Fetch APIを使用してフロントエンドのアプリケーションからバックエンドのアプリケーションのリソースへアクセスすることはブラウザによって制限されます。
127129

128130
{/* prettier-ignore */}
129-
<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>からアクセスすることを許可します。
131+
<Term>CORS</Term>は、このような場合でも必要に応じてリソースへのアクセスを可能にする仕組みです。クライアントからのリクエストに対して、サーバーがHTTPレスポンスヘッダにリソースへのアクセスを許可する<Term>オリジン</Term>を示す[`Access-Control-Allow-Origin`ヘッダ](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Access-Control-Allow-Origin)を含めることで、ブラウザはそこで指定された<Term>オリジン</Term>からリソースへアクセスすることを許可します。
130132

131133
Expressを用いる場合には、[`cors`パッケージ](https://www.npmjs.com/package/cors)を使用することで、HTTPレスポンスヘッダに`Access-Control-Allow-Origin`ヘッダなどを適切に設定することができます。
132134

@@ -140,7 +142,7 @@ Expressを用いる場合には、[`cors`パッケージ](https://www.npmjs.com/
140142
$ npm install -D @types/cors
141143
```
142144
1. `.env`ファイルを編集し、<Term>環境変数</Term>`WEB_ORIGIN`の値にViteの開発用サーバーの<Term>オリジン</Term>である`http://localhost:5173`を指定します。
143-
1. `main.ts`ファイルを編集し、<Term>CORS</Term>に関する設定を行います。14行目の`app.use(cors({ origin: process.env.WEB_ORIGIN }));`により、<Term>環境変数</Term>`WEB_ORIGIN`に指定した<Term>オリジン</Term>からアクセスすることができるようにします。
145+
1. `main.ts`ファイルを編集し、<Term>CORS</Term>に関する設定を行います。14行目の`app.use(cors({ origin: process.env.WEB_ORIGIN }));`により、<Term>環境変数</Term>`WEB_ORIGIN`に指定した<Term>オリジン</Term>からアクセスできるようにします。
144146

145147
```ts title="backend/main.ts" showLineNumbers
146148
import express from "express";
@@ -264,10 +266,10 @@ export default App;
264266

265267
:::tip[Viteでの環境変数の利用]
266268

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

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

273275
#### 動作を確認する
@@ -276,25 +278,33 @@ Viteは、[`VITE_`で始まる<Term>環境変数</Term>を、アプリケーシ
276278

277279
## デプロイする
278280

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

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

283-
| 環境 | バックエンド | フロントエンド |
284-
| -------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
285-
| 開発環境 | <Term>`tsx`パッケージ</Term>でTypeScriptファイルを実行してWebサーバーを起動 | Viteの開発用サーバーを起動 |
286-
| 本番環境 | TypeScriptファイルをJavaScriptファイルに<Term>トランスパイル</Term>してから、JavaScriptファイルを実行してWebサーバーを起動 | Viteにより出力されたファイルをRenderで配信 |
285+
| 環境 | バックエンド | フロントエンド |
286+
| -------- | --------------------------------------------------------------------------- | ----------------------------------------------- |
287+
| 開発環境 | <Term>`tsx`パッケージ</Term>でTypeScriptファイルを実行してWebサーバーを起動 | Viteの開発用サーバーを起動 |
288+
| 本番環境 | <Term>ビルド</Term>済みのJavaScriptファイルを実行してWebサーバーを起動 | Viteによる<Term>ビルド</Term>結果をRenderで配信 |
287289

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

290-
フロントエンドの場合には、`npm run build`コマンドを実行することで、Viteによるビルド結果が`dist`ディレクトリに格納されるのでした。本番環境では、この`dist`ディレクトリをRenderで配信すればよいです。
292+
[トランスパイラとモジュールバンドラ](/docs/advanced/bundler/)で述べたように、フロントエンドの<Term>ビルド</Term>のための設定は、`npm create vite@latest`コマンドを実行することで自動的に生成される`package.json`ファイルに含まれています。`npm run build`コマンドを実行することで、<Term>ビルド</Term>結果が`dist`ディレクトリに出力されます。本番環境では、この`dist`ディレクトリをRenderで配信します。
293+
294+
```json title="frontend/package.jsonの抜粋"
295+
{
296+
"scripts": {
297+
"build": "tsc -b && vite build"
298+
}
299+
}
300+
```
291301

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

294304
<video src={setupBuildScriptsVideo} controls />
295305

296306
1. `tsconfig.json`の[`outDir`オプション](https://www.typescriptlang.org/tsconfig/#outDir)の値を`"./dist"`にして、<Term>トランスパイル</Term>結果が`dist`ディレクトリに入るようにします。また、`.gitignore`ファイルに`/dist`を追加して、`dist`ディレクトリがGitの管理下に入らないようにします。
297-
1. `package.json`の`scripts`プロパティに次のように記載して、`npm run build`コマンドと`npm start`コマンドが使えるようにしましょう。`npm run build`コマンドでTypeScriptファイルをJavaScriptファイルに<Term>トランスパイル</Term>し、`npm start`コマンドで出力されたJavaScriptファイルを実行できるようになります。
307+
1. `package.json`の`scripts`プロパティに次のように記載して、`npm run build`コマンドと`npm start`コマンドが使えるようにしましょう。`npm run build`コマンドで<Term>ビルド</Term>結果を`dist`ディレクトリに出力し、`npm start`コマンドで<Term>ビルド</Term>済みのJavaScriptファイルを実行できるようになります。
298308

299309
```json title="backend/package.jsonの抜粋"
300310
{

‎src/components/Term/definitions.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -563,6 +563,17 @@ export const terms: Term[] = [
563563
"複数のJavaScriptモジュールをまとめてひとつにするためのソフトウェア。webpackが有名。",
564564
referencePage: "/docs/advanced/bundler/",
565565
},
566+
{
567+
id: "build",
568+
name: "ビルド",
569+
aliases: [],
570+
definition:
571+
"開発したプログラムを実行可能な形式に変換・最適化し、最終成果物を生成する一連の処理。Web開発では、トランスパイルやバンドルなどにより必要な変換や最適化を施し、実行可能な形式の最終成果物を生成することを指す。",
572+
referencePage: "/docs/advanced/bundler/",
573+
// 参考：
574+
// - Wikipedia「ビルド (ソフトウェア)」 https://ja.wikipedia.org/wiki/ビルド_(ソフトウェア)
575+
// - Vite公式「本番環境用のビルド」 https://ja.vite.dev/guide/build
576+
},
566577
{
567578
id: "jsx",
568579
name: "JSX",
@@ -609,7 +620,7 @@ export const terms: Term[] = [
609620
name: "CORS（Cross-Origin Resource Sharing）",
610621
aliases: ["CORS"],
611622
definition:
612-
"ブラウザによって制限されている異なるオリジンのリソースへのアクセスを可能にする仕組み。サーバーがHTTPレスポンスヘッダに特定のヘッダを含めることで、ブラウザはそのアクセスを許可する。",
623+
"セキュリティ上の理由からブラウザによって制限されている異なるオリジンのリソースへのアクセスを必要に応じて可能にする仕組み。サーバーがHTTPレスポンスヘッダに特定のヘッダを含めることで、ブラウザはそのアクセスを許可する。",
613624
referencePage: "/docs/advanced/integration-and-deployment/",
614625
// 参考：MDN「オリジン間リソース共有 (CORS)」 https://developer.mozilla.org/ja/docs/Web/HTTP/Guides/CORS
615626
},

0 commit comments

Comments
 (0)