ウェブにデプロイする
自分のプロジェクトを世界に公開する
⏱ 想定 ~9 分
01 · 読む
ここまで作ったものは全部 localhost で動いていました —— あなたの PC の中だけ。他の人には見えません。これからそれを変えます。
デプロイとは、 24 時間ネットにつながったサーバーに自分のアプリを置き、 URL を知っている人なら誰でも使えるようにすることです。複雑そうに聞こえますが、現代のプラットフォームを使えばとても簡単です。あなたがコードをプッシュすれば、あとはやってくれます。
今回は Render を使います —— 無料枠が太く、 GitHub と直接連携し、サーバー設定はゼロ。数分でアプリがオンラインになります。
💡 想像してみてくださいlocalhost はキッチンで料理するようなもの —— 家族しか食べられません。デプロイはレストランを開くようなもの：どこからでも誰でも来られます。 Render は、キッチン・テーブル・住所がすでに整ったレストランの空間のようなもの —— あなたは食材（コード）を持ち込むだけです。
02 · ステップ解説
Render のデプロイ手順（無料枠）。順番に進めれば、約 10 分でライブ URL が手に入ります。
1. GitHub にプッシュ
プロジェクトをコミットし、 GitHub リポジトリにプッシュしておきます。 Render は GitHub から直接コードを取りに行くので、最新の状態にしておきましょう。
2. render.com にサインアップ
'Sign up with GitHub' が一番楽です。 Render が追加設定なしであなたのリポジトリにアクセスできるようになります。
3. 新しい Web Service を作る
'New' → 'Web Service' をクリックして GitHub リポジトリを接続します。 Render がどのリポジトリをデプロイするか尋ねます。
4. 設定する
Build command : npm install 。 Start command : node app.js 。これで Render にセットアップと起動の方法を伝えます。 Build command が依存パッケージを入れ、 start command がサーバーを立ち上げます。
5. 環境変数を追加
.env の値を Render の環境設定にコピーします。値を git にコミットしないこと —— Render の管理画面で直接入力します。 key と value のペアごとに 1 つずつ入れます。
6. デプロイ！
Deploy をクリックしてビルドを待ちます。ログがリアルタイムで流れます。ステータスが緑になれば、 .onrender.com の URL で公開され、誰にでも共有できます。
03 · 実機演習
このチェックリストでプロジェクトをデプロイしましょう。あせらず進めて大丈夫 —— 初回のデプロイは何度か試してうまくいくのが普通です。
04 · クイズ
GitHub にコードをプッシュしたとき、 Render のようなデプロイプラットフォームは何をしますか？
- プロジェクトを zip にしてメールで送る
- 新しい GitHub リポジトリを作る
- 自動でコードを取得し、ビルドして、自分たちのサーバーで動かす
- あなたの PC にコードをダウンロードする
05 · 空欄補充
Node.js の app をデプロイするとき、プラットフォームはサーバーを起動する _____ コマンド（例： 'node app.js' ）を知る必要があります。
06 · 読む
ちょっと立ち止まって、今起きたことを味わってみましょう。地球の反対側にいる人が、あなたの URL を打って あなたが作った ものを使えます。あなたがコードを書き、デプロイし、本物のサーバーで動いています。
これは多くのエンジニアがずっと覚えている瞬間です —— 自分のプロジェクトが初めて世に出た瞬間。
07 · クイズ
.env ファイルに DB パスワードと API キーが入っています。 Render にデプロイするとき、これらの値はどう扱うべき？
- .env を git にコミットして Render が読めるようにする
- デプロイ前にソースに貼り付ける
- Render のサポートにメールする
- Render の環境変数設定に入力 —— git には絶対にコミットしない
08 · 空欄補充
Render で Node.js の app をデプロイするとき、 _____ コマンド（例： 'npm install' ）がプロジェクトの依存パッケージのセットアップ方法をプラットフォームに伝えます。
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。