diff --git a/docs/3-web-servers/08-database/index.mdx b/docs/3-web-servers/08-database/index.mdx
index 41e81eaa9..261170a0a 100644
--- a/docs/3-web-servers/08-database/index.mdx
+++ b/docs/3-web-servers/08-database/index.mdx
@@ -116,6 +116,21 @@ npx prisma init
+:::tip[環境変数]
+データベースへの接続情報は、プログラム内に直接記述するのではなく、**環境変数**を用いて指定することが一般的です。環境変数は、アプリケーションの実行時に、アプリケーション自体を変更することなく外側から動作を変更するために用いることができる仕組みで、キーと値の組み合わせによって定義されます。環境変数は、主に次のような情報をプログラム内に記述することを避けるために用いられます。
+
+- 機密情報
+- 環境ごとに異なる設定情報
+
+アプリケーションの実行時に環境変数を指定するには、コマンドの前に`KEY=VALUE`の形式の文字列を記述します。例えば、ターミナル上で次のコマンドを実行すると、`main.mjs`では、[`process.env.DATABASE_URL`を通して](https://nodejs.org/ja/learn/command-line/how-to-read-environment-variables-from-nodejs)環境変数`DATABASE_URL`の値を取得できます。
+
+```shell
+DATABASE_URL=postgresql://user:password@example.com:5432/db node main.mjs
+```
+
+`.env`ファイルは、環境変数の指定を簡略化するために慣習的に用いられるファイルです。`node --env-file=.env main.mjs`のように指定することで、`.env`ファイルに記述された環境変数を読み込ませることができます。なお、Prismaは`.env`ファイルの内容を自動的に読み込むため、`--env-file`オプションを指定する必要はありません。
+:::
+
`prisma/schema.prisma`ファイルを、次のように追記し、`ToDo`テーブルとそのカラムを定義します。
```javascript
diff --git a/docs/3-web-servers/11-git/index.mdx b/docs/3-web-servers/11-git/index.mdx
index 0ca1e6bed..be86c1be5 100644
--- a/docs/3-web-servers/11-git/index.mdx
+++ b/docs/3-web-servers/11-git/index.mdx
@@ -129,7 +129,7 @@ git commit -m "コミットメッセージ"
:::tip[`.gitignore`]
-`.gitignore`ファイルで指定されたファイルはGitの管理下に置かれません。`package.json`と`package-lock.json`の情報から全く同じものをダウンロードできてバージョン管理するメリットのない`node_modules`や、機密情報や環境ごとに異なる情報を含む`.env`といったファイルが指定されます。
+`.gitignore`ファイルで指定されたファイルはGitの管理下に置かれません。`package.json`と`package-lock.json`の情報から全く同じものをダウンロードできてバージョン管理するメリットのない`node_modules`や、Prismaが生成する`generated`ディレクトリなどの自動生成ファイル、機密情報や環境ごとに異なる情報を含む`.env`といったファイルが指定されます。
:::
diff --git a/docs/3-web-servers/13-deploy-on-render/connect-github.mp4 b/docs/3-web-servers/13-deploy-on-render/connect-github.mp4
deleted file mode 100644
index 981ce9cf5..000000000
Binary files a/docs/3-web-servers/13-deploy-on-render/connect-github.mp4 and /dev/null differ
diff --git a/docs/3-web-servers/13-deploy-on-render/connect-repository.png b/docs/3-web-servers/13-deploy-on-render/connect-repository.png
deleted file mode 100644
index 7dc8b7165..000000000
Binary files a/docs/3-web-servers/13-deploy-on-render/connect-repository.png and /dev/null differ
diff --git a/docs/3-web-servers/13-deploy-on-render/deploy-1.png b/docs/3-web-servers/13-deploy-on-render/deploy-1.png
new file mode 100644
index 000000000..6d7fd67fa
Binary files /dev/null and b/docs/3-web-servers/13-deploy-on-render/deploy-1.png differ
diff --git a/docs/3-web-servers/13-deploy-on-render/deploy-2.png b/docs/3-web-servers/13-deploy-on-render/deploy-2.png
new file mode 100644
index 000000000..05afddbd5
Binary files /dev/null and b/docs/3-web-servers/13-deploy-on-render/deploy-2.png differ
diff --git a/docs/3-web-servers/13-deploy-on-render/deploy-3.png b/docs/3-web-servers/13-deploy-on-render/deploy-3.png
new file mode 100644
index 000000000..a775a36c4
Binary files /dev/null and b/docs/3-web-servers/13-deploy-on-render/deploy-3.png differ
diff --git a/docs/3-web-servers/13-deploy-on-render/deploy-4.png b/docs/3-web-servers/13-deploy-on-render/deploy-4.png
new file mode 100644
index 000000000..60194da21
Binary files /dev/null and b/docs/3-web-servers/13-deploy-on-render/deploy-4.png differ
diff --git a/docs/3-web-servers/13-deploy-on-render/deploy-5.png b/docs/3-web-servers/13-deploy-on-render/deploy-5.png
new file mode 100644
index 000000000..878829f8c
Binary files /dev/null and b/docs/3-web-servers/13-deploy-on-render/deploy-5.png differ
diff --git a/docs/3-web-servers/13-deploy-on-render/deploy-6.png b/docs/3-web-servers/13-deploy-on-render/deploy-6.png
new file mode 100644
index 000000000..62820efae
Binary files /dev/null and b/docs/3-web-servers/13-deploy-on-render/deploy-6.png differ
diff --git a/docs/3-web-servers/13-deploy-on-render/deploy-7.png b/docs/3-web-servers/13-deploy-on-render/deploy-7.png
new file mode 100644
index 000000000..352265f1e
Binary files /dev/null and b/docs/3-web-servers/13-deploy-on-render/deploy-7.png differ
diff --git a/docs/3-web-servers/13-deploy-on-render/dynamic-site-config.png b/docs/3-web-servers/13-deploy-on-render/dynamic-site-config.png
deleted file mode 100644
index 610b69eca..000000000
Binary files a/docs/3-web-servers/13-deploy-on-render/dynamic-site-config.png and /dev/null differ
diff --git a/docs/3-web-servers/13-deploy-on-render/dynamic-site-deploy.mp4 b/docs/3-web-servers/13-deploy-on-render/dynamic-site-deploy.mp4
deleted file mode 100644
index 4975cd7b6..000000000
Binary files a/docs/3-web-servers/13-deploy-on-render/dynamic-site-deploy.mp4 and /dev/null differ
diff --git a/docs/3-web-servers/13-deploy-on-render/enable-pr-previews.png b/docs/3-web-servers/13-deploy-on-render/enable-pr-previews.png
deleted file mode 100644
index b614a9cbc..000000000
Binary files a/docs/3-web-servers/13-deploy-on-render/enable-pr-previews.png and /dev/null differ
diff --git a/docs/3-web-servers/13-deploy-on-render/index.mdx b/docs/3-web-servers/13-deploy-on-render/index.mdx
index 1dc714c0b..361a3ffea 100644
--- a/docs/3-web-servers/13-deploy-on-render/index.mdx
+++ b/docs/3-web-servers/13-deploy-on-render/index.mdx
@@ -3,93 +3,47 @@ title: Renderへのデプロイ
---
import registerRenderVideo from "./register-render.mp4";
-import connectGitHubVideo from "./connect-github.mp4";
-import staticSiteDeployVideo from "./static-site-deploy.mp4";
-import prPreviewVideo from "./pr-preview.mp4";
-import dynamicSiteDeployVideo from "./dynamic-site-deploy.mp4";
-## PaaS
+これまでは、Webアプリケーションを開発するにあたり、開発用の端末をサーバーとして利用してきました。しかし、開発したアプリケーションを実際のユーザーが使用できるようにするためには、インターネットに公開されたサーバーが必要です。サーバーの公開に際しては、通常複雑な設定や管理が必要になりますが、**PaaS** (Platform as a Service) と呼ばれるようなサービスを用いることで、その手間を大幅に簡略化することができます。
-**PaaS** (Platform as a Service) は、プログラムをアップロードすることで、そのプログラムを動作させることができるサービスです。[Render](https://render.com/)は最近登場した簡単に操作できるPaaSです。
+[Render](https://render.com/)は、近年サービスを開始したPaaSで、GitHubなどと連携し、Webアプリケーションを簡単に公開できるサービスです。[データベースの節](../database)の演習問題で作成したアプリケーションをデプロイし、Renderを用いてNode.jsやPostgreSQLを用いたアプリケーションをデプロイする方法を学びましょう。
## Renderへの登録
-[Render](https://render.com/)に登録しましょう。
+[Render](https://render.com/)のウェブサイトにアクセスし、`Get Started`から新しいアカウントを作成します。
-初回は、RenderのGitHubへのアクセスを許可しないといけません。
+## Render へのデプロイ
-
+RenderでWebアプリケーションをデプロイするには、RenderとGitHubリポジトリを接続し、アプリケーションをRender上で動作させるために必要な各種設定を行います。
-## 静的サイトと動的サイト
+
-[Render](https://render.com/)に登録すると、最初に次のような画面が現れます。
+まずは、Renderにログインした直後の画面から、`Web Service`を作成します。Node.jsのアプリケーションのデプロイには、通常このオプションを選択します。
-
+
-この画面の`Static Sites`と`Web Services`の違いを解説します。
+GitHubのリポジトリをRenderに接続します。この手順は、RenderがGitHubのリポジトリにアクセスできるようにするための、初回のみ必要な手順です。
-`Static Sites`は静的ページのことで、大まかに言えば「内容が変化しないWebページ」です。サーバーにアップロードされてから内容が変化せず、いつ閲覧しても同じページが表示されます。
+
-一方、Renderにおける`Web Services`は静的ページの対義語にあたる動的ページに分類されます。これは大まかに言えば「内容が変化するWebページ」で、先ほどやったようなデータベースやサーバーとの通信をすることで閲覧する端末や閲覧する時間によって内容が異なるページが表示されます。
+デプロイするリポジトリを選択します。ここでは、データベースの演習問題で作成したアプリケーションをデプロイします。
-動的ページはSNSやログイン機能のあるページなど、Webサービスでは必要不可欠ですが、その都度サーバーとの通信をしなければならないため静的ページに比べてサーバー負荷が大きいというデメリットがあります。Renderでも`Static Sites`は無料ですが、`Web Services`はサーバーの性能によって無料〜月450ドルのプランを選択することになります。
+
-## 静的サイトのデプロイ
+次の画面では、アプリケーションを動作させるために必要な各種設定を行います。`Region`には、アプリケーションを動作させるサーバーの地域を選択します。アプリケーションを使用する地域に近い地域を選択することで、アプリケーションの応答速度を向上させることができます。
-RenderをGitHubのリポジトリと接続することで、ファイルを編集するごとに手動でサーバーにアップロードし直す必要なくGitHubでの更新に合わせて自動でWebサイトを更新することができます。 事前にアプリケーション全体を GitHubに保存しておいてください。
+
-静的サイトをデプロイするには、ホーム画面から`Static Sites`を選択しましょう。
+`Build Command`では、リポジトリをクローンした後に実行するコマンドを指定します。Node.jsのアプリケーションの場合、`npm install`が指定されることが一般的です。`Start Command`では、`Build Command`が成功した後、アプリケーションを起動するためのコマンドを指定します。このアプリケーションでは、`main.mjs`にサーバーを起動するためのプログラムが記述されているので、`node main.mjs`を指定します。
-リポジトリを選択します。
+
-
+`Environment Variables`では、アプリケーションを動作させるために必要な環境変数を指定します。このアプリケーションでは、開発中に使用する環境変数を`.env`ファイルに記述していましたが、このファイルは`.gitignore`に記述されているため、GitHubのリポジトリには含まれていません。動画では、開発中に使用した`.env`ファイルの内容をコピーしていますが、実際には開発環境と本番環境を分離するため、環境変数の内容は両環境で異なる場合がほとんどです。
-設定項目を入力します。
+
-
+`Your service is live`と表示されれば、デプロイは成功です。
-`Create Static Site`を押して、ステータスが`Live`になったら成功です！表示されているリンク (動画の例では`https://render-test-1zpa.onrender.com`) にアプリケーションが公開されています！
-
-
-
-## プルリクエストプレビュー
-
-プルリクエストした内容を実際に確認できるように、プレビューページを自動で生成することもできます。
-
-設定で、`Enable PR Previews`を設定しましょう。
-
-
-
-プルリクエストをすると画面に変更の内容を反映したサイトへのリンクが表示されるようになるので、そこからプレビューページにアクセスできます！
-
-
-
-
-
-## 動的サイトのデプロイ
-
-Renderで動的サイトをデプロイするには、ホーム画面から`Web Services`を選択しましょう。
-
-静的サイトのときと同様にリポジトリを選択します。
-
-設定項目を入力します。ここではNode.jsの設定を行っています。
-
-
-
-ステータスが`Live`になったら成功です！
-
-
-
-
-
-:::tip[ポート番号]
-
-Renderでは必要ありませんが、PaaSを利用するにあたって、プログラムの改変が必要になる場合があります。ポート番号は、その一例です。ポート番号は`PORT`という名前の環境変数によって指定されています。Node.jsでは、環境変数は`process.env`変数を用いて取得できるので、このポート番号を指定しましょう。
-
-```javascript
-app.listen(process.env.PORT || 3000);
-```
-
-:::
+
diff --git a/docs/3-web-servers/13-deploy-on-render/live.png b/docs/3-web-servers/13-deploy-on-render/live.png
deleted file mode 100644
index 6a398e195..000000000
Binary files a/docs/3-web-servers/13-deploy-on-render/live.png and /dev/null differ
diff --git a/docs/3-web-servers/13-deploy-on-render/pr-preview.mp4 b/docs/3-web-servers/13-deploy-on-render/pr-preview.mp4
deleted file mode 100644
index b34272c7c..000000000
Binary files a/docs/3-web-servers/13-deploy-on-render/pr-preview.mp4 and /dev/null differ
diff --git a/docs/3-web-servers/13-deploy-on-render/pr-preview.png b/docs/3-web-servers/13-deploy-on-render/pr-preview.png
deleted file mode 100644
index bef963661..000000000
Binary files a/docs/3-web-servers/13-deploy-on-render/pr-preview.png and /dev/null differ
diff --git a/docs/3-web-servers/13-deploy-on-render/register-render.mp4 b/docs/3-web-servers/13-deploy-on-render/register-render.mp4
index b41dc85ea..e6cf06dca 100644
Binary files a/docs/3-web-servers/13-deploy-on-render/register-render.mp4 and b/docs/3-web-servers/13-deploy-on-render/register-render.mp4 differ
diff --git a/docs/3-web-servers/13-deploy-on-render/render-home.png b/docs/3-web-servers/13-deploy-on-render/render-home.png
index 09907894d..888b56579 100644
Binary files a/docs/3-web-servers/13-deploy-on-render/render-home.png and b/docs/3-web-servers/13-deploy-on-render/render-home.png differ
diff --git a/docs/3-web-servers/13-deploy-on-render/static-site-config.png b/docs/3-web-servers/13-deploy-on-render/static-site-config.png
deleted file mode 100644
index 99e98bf60..000000000
Binary files a/docs/3-web-servers/13-deploy-on-render/static-site-config.png and /dev/null differ
diff --git a/docs/3-web-servers/13-deploy-on-render/static-site-deploy.mp4 b/docs/3-web-servers/13-deploy-on-render/static-site-deploy.mp4
deleted file mode 100644
index f38d14f44..000000000
Binary files a/docs/3-web-servers/13-deploy-on-render/static-site-deploy.mp4 and /dev/null differ
diff --git a/src/components/Term/definitions.js b/src/components/Term/definitions.js
index 3370b85e1..9b1ceb361 100644
--- a/src/components/Term/definitions.js
+++ b/src/components/Term/definitions.js
@@ -417,6 +417,18 @@ export default {
"コンピューターがプログラムの順番どおりに1つずつ処理を行う機構。JavaScriptではメインスレッドと呼ばれる単一のスレッドで主に処理が実行される。",
referencePage: "/docs/web-servers/database/",
},
+ environmentVariable: {
+ name: "環境変数",
+ definition:
+ "アプリケーションの実行時に、アプリケーション自体を変更することなく外側から動作を変更するために用いることができる仕組み。キーと値の組み合わせによって定義される。",
+ referencePage: "/docs/web-servers/database/",
+ },
+ deploy: {
+ name: "デプロイ",
+ definition:
+ "開発したプログラムを実行可能な状態にして、実際に利用できるようにすること。Webアプリケーションの場合、サーバーにプログラムを配置して、インターネット上でアクセスできるようにすることを指す。",
+ referencePage: "/docs/web-servers/deploy-on-render/",
+ },
transpile: {
name: "トランスパイル",
definition:
diff --git a/src/components/Term/type-map.js b/src/components/Term/type-map.js
index 720d46f74..6923aa282 100644
--- a/src/components/Term/type-map.js
+++ b/src/components/Term/type-map.js
@@ -97,6 +97,8 @@ const typeMap = new Map([
["非同期処理", "asynchronousProcess"],
["非同期関数", "asynchronousProcess"],
["スレッド", "thread"], // not found
+ ["環境変数", "environmentVariable"],
+ ["デプロイ", "deploy"],
["トランスパイル", "transpile"],
["トランスパイラ", "transpile"],
["モジュールバンドラ", "moduleBundler"],