デプロイ
コードをノート PC からインターネットへ
⏱ 想定 ~6 分
01 · 読む
あなたはアプリを書き上げ、ノート PC でちゃんと動いています。でも、まだ誰も使えません —— ただのあなたのマシンの中のファイルです。デプロイ とは、コードをノート PC からサーバーへ移し、世界中からアクセスできるようにするプロセスです。
本を書くのと似ています。原稿(コード)を書き上げたら、それを出版社(ホスティングサービス)に送って、印刷して書店(インターネット)に並べてもらう。デプロイ前は、あなたのアプリはあなたしか読めない私的な原稿でしかありません。
ポイントまとめ
- デプロイ = あなたのアプリを、インターネット上の本物のユーザーが使えるようにすること
- コードをノート PC から、常時動き続けるサーバーへ移します
- 人気のホスティングサービス: Vercel 、 Netlify 、 AWS 、 Heroku 、 GitHub Pages
- 現代のデプロイは自動化されているのが普通 —— コードを push すれば、公開されます
02 · ステップ解説
下は、現代のウェブアプリをデプロイする典型的な手順です。
1. 1. コードはノート PC の中
ローカルでアプリを書いて、テストします。あなたのマシンでは動きますが、 PC の電源が入っているときだけで、しかも使えるのはあなただけです。
2. 2. GitHub に push
コードを GitHub のリポジトリに push します。これで、コードがホスティングサービスからアクセスできる中央の場所に置かれます。 GitHub は、ノート PC とサーバーの間の仲介役です。
3. 3. ホスティングサービスがあなたのコードを取得
ホスティングサービス( Vercel 、 Netlify など)は、あなたの GitHub リポジトリと連携しています。新しいコードが push されたことを検知すると、自動的に最新版を取得します。
4. 4. ビルドとラン
ホスティングサービスは依存ライブラリをインストールし、アプリをビルド( TypeScript のコンパイル、ファイルのバンドル、画像の最適化)して、彼らのサーバーで起動します。
5. 5. 公開 URL でリリース
あなたのアプリは myapp.vercel.app や yourname.github.io のような公開 URL を受け取ります。世界中の誰でもその URL を訪れて、あなたのアプリを使えます。 24/7 でオンラインです。
03 · クイズ
デプロイとは何ですか？
- ノート PC でコードを書くこと
- コードをサーバーへ移して、世界からアクセスできるようにすること
- ローカルでアプリをテストすること
- ドメイン名を買うこと
04 · 読む
現代のデプロイは、昔と比べるとほとんど魔法のようです。かつてはエンジニアが FTP で手動でファイルをサーバーへコピーしていました。今はほとんどのチームが 自動デプロイ (継続的デプロイ、 CD ともいいます)を使います。
仕組みはこうです。 GitHub リポジトリを Vercel や Netlify のようなホスティングサービスに接続します。そして GitHub にコードを push するたびに、ホスティングサービスが自動で変更を検知し、アプリをビルドして、新しいバージョンをデプロイします。 GitHub に push すれば、数秒であなたのウェブサイトが更新されます。
05 · クイズ
あなたのアプリは localhost:3000 で完璧に動いていますが、他の人は誰も使えません。何が足りないでしょう？
- もっとテストを書く必要がある
- 先にドメインを買う必要がある
- ホスティングサービスにデプロイする必要がある
- 別の言語で書き直す必要がある
06 · 空欄補充
自動デプロイを使うと、 GitHub にコードを push するたびに、ホスティングサービスが自動的にアプリを _____ します。
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。