Web アプリケーションのデプロイ方法

本チュートリアルでは、あなたの Web アプリケーションをインターネット上にデプロイし、他の人がアクセスできるようにする方法を紹介します。Tencent CloudBase、Vercel、Zeabur という3つの一般的なデプロイプラットフォームを紹介し、「コードを書く」から「他の人がインターネット上であなたのウェブサイトにアクセスできる」までの完全なプロセスを迅速に完了できるようサポートします。

「デプロイ」とは何か？

始める前に、「デプロイ（Deployment）」の意味をはっきりさせましょう。ウェブサイトが外部ユーザーにアクセスされるためには、公開アクセス可能なネットワークアドレス（IP アドレス、例えば 123.45.67.89、またはドメイン名、例えば google.com など）が必要です。しかし、アドレスだけでは不十分です。あなたが書いたウェブページコード（HTML、CSS、JavaScript ファイル、あるいは React、Vue などのフレームワークで書いたプロジェクト）や、関連する画像・動画リソースは、すべて24時間稼働のサーバー上に配置し、そのサーバーがネットワークリクエストに応答するようにする必要があります。そうしてはじめて、誰もがブラウザからこれらのリソースにアクセスしてダウンロードできるようになります。

画像出典：https://www.hostinger.com/tutorials/what-is-cloud-hosting

リソースのアップロード、環境の設定、そしてサービスを「稼働させる」までの一連のプロセス全体がデプロイ（Deployment）と呼ばれます。

簡単に言えば：自分のパソコンで書いたウェブページは、ローカルでプログラムを起動しても、自分のブラウザからしかローカルアドレスでアクセスできません。なぜなら、そのコードはあなたのハードディスク上にしか存在しないからです。「デプロイ」とは、あなたのコードとリソースをパブリックネットワークに接続された専用サーバーに移行し、適切に設定して、そのサーバーが「他の人がアクセスしたときにどう応答するか」を分かるようにすることです。例えば、誰かがブラウザにあなたのドメイン名を入力したとき、サーバーはすぐに対応するウェブページファイルを見つけ、その内容を相手のデバイスに送信し、ユーザーにあなたのページを表示させます。

手動でデプロイする場合、プロジェクトにはしばしば複数のステップが必要で、各ステップでつまずく可能性があります。一般的な重要ステップは以下の通りです：

サーバーの準備：まずクラウドサーバー（Alibaba Cloud、Tencent Cloud、AWS EC2 など）を購入し、サーバーの所在地（上海、シンガポールなど）、スペック（CPU、メモリ、ディスクサイズなど）を選択し、リモートでサーバーに接続する方法（SSH ツールを使ったログインなど）も学ぶ必要があります。
環境の設定：Web アプリケーションは特定の「環境」でなければ動作しません。例えば、Node.js プロジェクトを実行するには、まず Node.js をインストールする必要があります。Python プロジェクトを実行するには、Python と対応するサードパーティライブラリをインストールする必要があります。環境のバージョンが一致しないと、プログラムがエラーを起こしたり、起動しなかったりする可能性があります。
リソースのアップロード：ローカルのコードとリソースをサーバーにアップロードする必要があります。一般的な方法には FTP や Git があります。プロジェクトのサイズが大きい場合（動画ファイルを含む場合など）、途中で接続が切れると、アップロードをやり直す必要があることもあります。

サービスの起動とテスト：アップロード完了後、サーバー上でコマンドを実行してアプリケーションを起動し、「割り当てられたネットワークアドレスにアクセスできるか」をテストする必要があります。アクセスできない場合、サーバーのファイアウォールが対応するポートを開放していない可能性があります（例えば、アプリケーションがポート3000をリッスンしていても、そのポートがファイアウォールにブロックされているなど）。あるいは、プログラム自体にバグがある可能性もあり、その場合はサーバーログを確認してトラブルシューティングを行う必要があります。
💡 ポートは、同じデバイス上の異なるアプリケーションを区別する「部屋番号」、IP はそのデバイスの「住所」と考えることができます。IP とポートを組み合わせる（IP:port）ことで、特定のネットワークサービスを正確に特定できます。
保守と更新：コードを変更するたびに、再度アップロードしてサービスを再起動する必要があります。サーバーがダウンした場合（停電やネットワーク障害など）、アプリケーションを手動で再起動する必要があり、「プロセス監視ツール」を追加で設定して、異常終了後にプログラムが自動的に再起動するようにすることもあります。

CloudBase、Vercel、Zeabur のような「ローコードデプロイプラットフォーム」は、まさにこれらの複雑な問題を解決するために誕生しました。これらは「サーバーの購入、環境の設定、コードのアップロード、サービスの起動、稼働の監視」といったステップを自動的に完了してくれます。必要なのは、自分のコードリポジトリ（GitHub や GitLab など）をプラットフォームに接続するか、コードを直接アップロードするだけで、プラットフォームが自動的にコードを取得し、アプリケーションの種類を識別し、対応するランタイム環境を設定し、最後に誰もがアクセスできるパブリックネットワークアドレスを提供してくれます。さらに、自分のドメイン名をワンクリックでバインドすることもできます。

次に、これら3つのプラットフォームの特徴と使用方法をそれぞれ紹介し、自分に最も適したデプロイソリューションを選べるようにします。

デプロイプラットフォームの比較

プラットフォーム	特徴	適用シナリオ	無料枠
Tencent CloudBase	中国国内からのアクセスが速く、WeChat エコシステムと深く統合	中国国内ユーザー中心、WeChat ミニプログラムのサポートが必要なプロジェクト	無料枠あり
Vercel	フロントエンドフレームワークのサポートが良く、GitHub と緊密に統合	React/Vue/Next.js などのモダンフロントエンドプロジェクト	無料枠あり
Netlify	機能が充実、フォーム処理や認証機能をサポート、Git との統合が良好	フォーム処理や認証機能などの高度な機能を必要とする静的サイト	無料枠あり
Zeabur	複数の言語とサービステンプレートをサポート、柔軟な設定	複数のサービス（Dify、n8n など）をデプロイする必要がある複雑なプロジェクト	毎月約5ドルの無料枠

1. Tencent CloudBase

Tencent CloudBase（クラウド開発）は、Tencent Cloud が提供するワンストップバックエンドクラウドサービスで、特に中国国内の開発者に適しています。その利点は以下の通りです：

国内アクセスが速い：サーバーが中国国内にあり、アクセス遅延が低い
WeChat エコシステムとの統合：WeChat ミニプログラムや公式アカウントとの連携が容易
ワンストップソリューション：静的サイトホスティング、クラウド関数、データベース、ストレージなどのフルセットのサービスを提供
十分な無料枠：個人開発者に十分な無料リソース枠を提供

CloudBase を使用した Web アプリケーションのデプロイ

ステップ 1：登録とログイン

Tencent CloudBase コンソールにアクセスし、WeChat または QQ でログインします。

ステップ 2：環境の作成

「新規作成」をクリックし、環境名（例：my-web-app）を選択します。

⚠️ 注意：CloudBase の無料体験版を有効にするには引き換えコードが必要です。Tencent CloudBase の公式アカウントをフォローし、「引き換えコードを受け取る」と入力して無料体験版の引き換えコードを取得し、環境作成時にコードを入力すると無料環境が有効になります（無料体験期間は6ヶ月です）。

ステップ 3：静的サイトホスティングの有効化

環境管理ページで「静的サイトホスティング」機能を見つけて有効にします。有効化後、デフォルトのアクセスドメイン名が付与されます。

CloudBase の静的サイトホスティングは、Zeabur と同様に複数のデプロイ方法を提供しています：

ローカルプロジェクトのアップロード：構築済みの静的ファイル（HTML、CSS、JS など）をローカルから直接アップロード
テンプレートデプロイ：预设のテンプレートを使用してプロジェクトを迅速に作成（React Web アプリケーションテンプレート、Vue Web アプリケーションテンプレートなど）
Git リポジトリデプロイ：GitHub などのコードリポジトリからの自動コード取得とデプロイをサポート

ステップ 4：コードのデプロイ

静的サイトホスティングページで、CloudBase は3つのデプロイ方法を提供しています：

方法1：ローカルプロジェクトのデプロイ（ローカルプロジェクトのアップロード）

コンソールで「ローカルプロジェクトのデプロイ」を選択
構築済みの静的ファイル（HTML、CSS、JS など）を直接アップロード
ローカルで構築済みのプロジェクトフォルダ（dist や build ディレクトリなど）を選択
アップロード完了を待つだけでアクセス可能

方法2：テンプレートデプロイ

预设のテンプレートを使用してプロジェクトを迅速に作成
React Web アプリケーションテンプレート、Vue Web アプリケーションテンプレートなどをサポート
テンプレートに基づいて自動的に構築およびデプロイ

方法3：Git リポジトリのデプロイ

Git 個人リポジトリのデプロイ：あなたの GitHub などの個人コードリポジトリをバインド
パブリックリポジトリのデプロイ：パブリックの Git リポジトリからのコード取得をサポート
自動ビルドコマンドを設定（例：npm run build）
コードをプッシュするたびに自動的に再デプロイ

💡 ヒント：CLI ツールを使用してデプロイすることも可能です：
bash
# CloudBase CLI のインストール
npm install -g @cloudbase/cli
# ログイン
tcb login
# デプロイ
tcb hosting deploy ./dist -e your-env-id

ステップ 5：カスタムドメインの設定（オプション）

静的サイトホスティングの設定で、独自のドメイン名をバインドし、無料の HTTPS 証明書を申請できます。

2. Vercel

Vercel は、世界で最も人気のあるフロントエンドデプロイプラットフォームの一つで、React、Vue、Next.js などのモダンフロントエンドフレームワークプロジェクトのデプロイに特に適しています。その特徴は以下の通りです：

GitHub との深い統合：コードをプッシュするだけで自動デプロイ
自動プレビュー：各 Pull Request が独立したプレビューリンクを生成
グローバル CDN：ウェブサイトが自動的に世界中のノードに配布され、アクセス速度が速い
サーバーレス関数：プロジェクト内でバックエンド API を記述可能

⚠️ 注意：Vercel は一部のネットワーク環境でアクセスが不安定な場合があります。中国国内のユーザーは CloudBase を優先することをお勧めします。

Vercel を使用した Web アプリケーションのデプロイ

ステップ 1：アカウントの登録

Vercel 公式サイトにアクセスし、GitHub アカウントでログインします。

ステップ 2：プロジェクトのインポート

「Add New Project」をクリック
デプロイしたい GitHub リポジトリを選択
希望するリポジトリが表示されない場合は、「Adjust GitHub App Permissions」をクリックしてアクセスを許可

ステップ 3：ビルド設定の構成

Vercel はプロジェクトタイプを自動的に識別し、ビルドコマンドを設定します：

フレームワーク	ビルドコマンド	出力ディレクトリ
React	`npm run build`	`build`
Vue	`npm run build`	`dist`
Next.js	`next build`	-
純粋な HTML	-	プロジェクトのルートディレクトリ

自動識別が正しくない場合は、手動で変更できます：

Build Command：ビルドコマンド（例：npm run build）
Output Directory：ビルド出力ディレクトリ（例：dist や build）
Install Command：依存関係のインストールコマンド（通常は npm install）

ステップ 4：デプロイ

「Deploy」ボタンをクリックし、ビルドの完了を待ちます。ビルド成功後、xxx.vercel.app というドメイン名が付与されます。

ステップ 5：カスタムドメイン（オプション）

プロジェクト設定の「Domains」ページで、独自のドメイン名を追加できます。Vercel が自動的に HTTPS を設定します。

3. Netlify

Netlify は、Vercel と並んで非常に人気のあるフロントエンドデプロイプラットフォームで、静的サイトやシングルページアプリケーション（SPA）のデプロイに特に適しています。その特徴は以下の通りです：

機能が充実：静的サイトホスティングに加え、フォーム処理、認証、エッジ関数などの高度な機能をサポート
Git との深い統合：GitHub、GitLab、Bitbucket をサポートし、コードのプッシュで自動デプロイ
ブランチプレビュー：各ブランチが自動的に独立したプレビューリンクを生成
グローバル CDN：ウェブサイトが自動的に世界中のノードに配布され、アクセス速度が速い
フォーム処理：バックエンドコードなしでウェブサイトのフォーム送信を処理
認証機能：ユーザー認証機能が組み込まれており、ログイン/登録を迅速に実装

⚠️ 注意：Netlify の中国国内からのアクセス速度は CloudBase に劣る場合があります。主に海外向けのプロジェクトに使用することをお勧めします。

Netlify を使用した Web アプリケーションのデプロイ

ステップ 1：アカウントの登録

Netlify 公式サイトにアクセスし、「Sign up」をクリックして登録します。GitHub、GitLab、Bitbucket、またはメールアドレスで登録できます。

ステップ 2：プロジェクトのインポート

ログイン後、「Add new site」→「Import an existing project」をクリック
コードホスティングプラットフォーム（例：GitHub）を選択
Netlify にリポジトリへのアクセスを許可
リストからデプロイしたいリポジトリを選択

ステップ 3：ビルド設定の構成

Netlify は一般的なフロントエンドフレームワークを自動的に識別し、ビルド設定を行います：

フレームワーク	ビルドコマンド	公開ディレクトリ
React	`npm run build`	`build`
Vue	`npm run build`	`dist`
Angular	`ng build`	`dist/<project-name>`
Next.js	`next build`	`out`
純粋な HTML	-	`.`（プロジェクトのルートディレクトリ）

自動識別が正しくない場合は、手動で設定できます：

Build command：ビルドコマンド（例：npm run build）
Publish directory：ビルド出力ディレクトリ（例：dist や build）

ステップ 4：デプロイ

「Deploy site」ボタンをクリックし、ビルドの完了を待ちます。ビルド成功後、xxx.netlify.app というドメイン名が付与され、誰でもこのアドレスを通じてあなたのウェブサイトにアクセスできます。

ステップ 5：カスタムドメインの設定（オプション）

サイト設定に入り、「Domain management」をクリック
「Add custom domain」をクリック
ドメイン名を入力し、指示に従って DNS レコードを設定
Netlify が自動的に HTTPS 証明書を申請・設定

特色機能

1. フォーム処理

Netlify は非常に便利な機能を提供しています：バックエンドコードなしでフォーム送信を処理できます。

HTML フォームに netlify 属性を追加するだけです：

html

<form name="contact" netlify>
  <p>
    <label>お名前: <input type="text" name="name" /></label>
  </p>
  <p>
    <label>メール: <input type="email" name="email" /></label>
  </p>
  <p>
    <label>メッセージ: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">送信</button>
  </p>
</form>

デプロイ後、フォーム送信されたデータは自動的に Netlify 管理画面に送信されます。「Forms」ページですべての送信記録を確認でき、メール通知の設定や、他のサービスへのデータ転送も可能です。

2. Netlify Functions（エッジ関数）

Netlify はサーバーレス関数（Serverless Functions）のデプロイをサポートしており、完全なバックエンドサーバーを構築することなく、シンプルな API インターフェースを実装できます。JavaScript や TypeScript で関数を記述でき、デプロイ後、自動的にアクセス可能な URL が付与されます。

例えば、hello.js というファイルを作成します：

javascript

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello from Netlify!" })
  };
};

デプロイ後、https://あなたのドメイン/.netlify/functions/hello を通じてこの関数にアクセスできます。

3. ローカル開発サポート

Netlify は CLI ツールを提供しており、ローカルでの開発とテストに便利です：

bash

# Netlify CLI のインストール
npm install -g netlify-cli

# ログイン
netlify login

# ローカル開発サーバーの起動
netlify dev

# ローカルでの関数テスト
netlify functions:serve

CLI ツールを使用すると、ローカルで Netlify 環境をシミュレートでき、フォーム送信や関数呼び出しなどの機能も含まれ、デプロイ前のテストに便利です。

4. Zeabur

Zeabur は新興のデプロイプラットフォームで、複数のサービスをデプロイする必要がある複雑なプロジェクトに特に適しています。その利点は以下の通りです：

豊富なサービステンプレート：Dify、n8n、データベースなど、多くのサービステンプレートが組み込まれている
複数のデプロイ方法をサポート：GitHub、テンプレート、Docker イメージ、ローカルプロジェクトなど
柔軟なサービスの組み合わせ：1つのプロジェクトで複数の相互に関連するサービスをデプロイ可能
従量課金：使った分だけ支払い、実験的なプロジェクトに適している

Zeabur を使用した Dify のデプロイ

以前のレッスンで、Dify に簡単に触れました。ここでは、Zeabur を通じて、自分自身の Dify サービスを非常に簡単に立ち上げることができます。まずコンソールページを開き、ページ上の各エリアを見てみましょう。

このページでは、まず多くのブロックが見えます。これらはすでに起動しているサービスです。上部メニューには、Agent、Servers、Docs、Templates などのオプションがあり、それぞれ以下を表しています：

Agent：Zeabur 内蔵の AI アシスタント（Agent）を開くことができ、操作方法の質問や、現在のサーバーのステータスの確認ができます。
Servers：ここで自分で購入したクラウドサーバーを追加したり、Zeabur 経由で直接サーバーを購入したりできます。
Docs：Zeabur の完全なドキュメントを確認できます。
Templates：ここにはすべての組み込みテンプレートイメージがリストされています。

ここで言及する「イメージ（Image）」は、「コードと実行環境を含む圧縮パッケージ」と考えることができます。あるサービスが1台のサーバー上で正常に稼働した後、「この実行環境 + コード」をパッケージ化してイメージにすることができます。その後、新しいサーバーでは、この圧縮パッケージを展開して実行するだけで、環境とコードの再設定なしにサービスを直接稼働させることができます。

ページの右上隅には、自分の残高も表示されます。デフォルトでは、毎月約5ドルの無料枠があります。詳細な課金ルールについては、今はあまり気にする必要はありません。サーバーが稼働している限り、枠を消費することだけ覚えておけば十分です。

残高をクリックすると、毎日の消費明細を確認できます。

それでは、自分自身の Dify サービスを作成しましょう。まず、コンソールホームで「New Project」をクリックします。

次に、各作成方法の説明です：

GitHub あなたの GitHub アカウントに接続できます。バインド後、GitHub リポジトリから直接プロジェクトを選択してデプロイできます（GitHub は現在、世界最大のコードホスティングプラットフォームです）。
Template（テンプレート） テンプレートに基づいてサービスをデプロイできます。Zeabur には多くのプリセットプロジェクトテンプレート（例：Dify、n8n など）が組み込まれており、これらのテンプレートに基づいてアプリケーションを迅速に作成・デプロイできます。
Databases（データベース） データベースサービスのデプロイに使用します。例：MySQL、MongoDB などの一般的なデータベース。
Functions（関数） 関数サービスをデプロイできます。JavaScript や Python のコードを記述し、関数として呼び出すことができます。
Local Project（ローカルプロジェクト） ローカルのフォルダをアップロードすると、Zeabur が自動的に起動スクリプトを識別します。これは、すでにローカルで開発済みのプロジェクトを Zeabur に迅速にデプロイするのに適しています。
Docker Image すでにパッケージされた Docker イメージをデプロイします。プロジェクトがすでに Docker イメージとしてパッケージされている場合（例：Docker Hub や他のイメージリポジトリに保存されている場合）、ここで直接デプロイできます。
Cursor Cursor（例：Cursor IDE）をインストールしている場合、この入口から Cursor 内のプロジェクトを直接 Zeabur にデプロイできます。

自分自身の Dify サービスをデプロイしたい場合は、Template 方式を選択し、検索ボックスに「dify」と入力することをお勧めします。異なる作者がメンテナンスする多くのバージョンが表示されますので、その中から1つを選択してください（例：v1.6.0 バージョンなど）。

続いて、任意の名前を入力すると、Zeabur がその名前に基づいて一時的なカスタムドメインを生成します。その後、誰もがこの URL を通じてあなたのサービスにアクセスできるようになります。

作成完了後、複数のプログラム（サービス）が順番に起動するのが見えます。すべてのサービスが「起動済み」のステータスになるまで、しばらくお待ちください。（Dify サービスは複数のプログラムで構成されており、各プログラムが異なる機能を担当し、それらが相互に連携して動作します。）

通常、左側の Dify アプリケーションをクリックするだけで、デフォルトのアクセス入口アドレスが表示されます。ただし、この例では、前面に nginx というレイヤーが挟まっているため、nginx サービスをクリックして最終的なアクセスアドレスを取得する必要があります。nginx は、外部との統一的な「リクエストの送受信」を担当するメインプログラムと考えることができます。外部からのアクセスアドレスを内部の各サービスに分配します。左側の Nginx をクリックし、詳細ページで現在のサービスアドレスを確認し、そのアドレスをブラウザで開いて、サービスが完全に起動するのを待ちます。

しばらく待つと、Dify のログイン画面が表示されます。メールアドレスと登録パスワードを入力すれば、自分自身の Dify サービスを使い始めることができます。

興味があれば、ついでに n8n サービスも立ち上げてみてはいかがでしょうか。n8n も海外で非常に人気のある AI ワークフロープラットフォームです。

Zeabur と Trae を使ったスネークゲームのデプロイ

本チュートリアルの次のパートでは、Zeabur のいくつかの応用的な使い方を体験します。まず Trae を使ってスネークゲームを生成し、それを Zeabur のサーバーにデプロイし、誰もがアクセスできる公開リンクを設定します。

ステップ1は、ローカルで Trae を使ってスネークゲームのプロジェクトを作成することです。

HTML フレームワークでの実装

Trae にとって、HTML ベースのスネークウェブゲームを生成するのは非常に簡単です。ゲームの生成が完了したら、前述の Zeabur のローカルデプロイ方法に従って、すべてのファイルを含むフォルダをアップロードするだけです。

完了後、そのサービスの詳細画面に進みます：

左側の「Network」オプションをクリックし、ページ内の「Public Address」エリアを見つけます。「Generate Domain」をクリックすると、外部アクセス用のアドレスが生成されます。好きな名前を入力できます。

生成完了後、ブラウザでこのアドレスを開くだけで、自分自身のスネークゲームを実行できます。他の HTML タイプの Web アプリケーションも、まったく同じ方法でデプロイ可能です。

React フレームワークでの実装

前のセクションでは、HTML ベースの Web アプリケーションのデプロイ方法を学びました。次に、現在より一般的に使用されているフロントエンドフレームワークである React アプリケーションのデプロイを試みます。純粋な HTML と比較して、React はより成熟したモダンなフロントエンド開発フレームワークと見なされています。コンポーネント化された方法でページ構造を編成し、複雑なページの開発を大幅に高速化でき、エンタープライズ級のプロジェクトで非常に主流の選択肢です。

React アーキテクチャへのリファクタリング

Trae では、Agent に「このコードを React アーキテクチャにリファクタリングしてください」と伝えるだけで、元の HTML ベースの構造をかなり簡単に React プロジェクトにリファクタリングできます。

ただし、シンプルな HTML ファイルと比較して、React アプリケーションはより複雑なビルドツールとプロジェクト構造に依存するため、デプロイのプロセスも少し面倒になります。典型的な問題はポート設定にあります：デフォルトでは、React アプリケーションは通常ポート3000をリッスンします（設定ファイルや起動ログでもこれを確認できます）。

しかし、Zeabur ではこのままデプロイすると失敗します。なぜなら、Zeabur はポート8080をリッスンするアプリケーションしかサポートしていないからです。つまり、React アプリケーションを Zeabur 上で正常に動作させるには、まずデフォルトのリッスニングポートを3000から8080に変更する必要があります。

この設定を正しく行うには、まず2つの概念を明確にする必要があります：「ポート（Port）」とは何か、そして「リッスニングポート（Listening Port）」とはどういう意味かです。

ポートとは何か？

コンピュータネットワークにおいて、ポートは「論理的な通信の端点」として理解でき、同じデバイス上で動作する異なるネットワークサービスを区別するために使用されます。簡単に例えると、IP アドレスが「住所」（例：162.128.1.1）だとすれば、ポート番号はその建物内の異なる部屋の「部屋番号」のようなものです。各部屋が1つのサービスに対応しています（例：Web サーバー、メールサービス、あなたの React アプリケーションなど）。
ポート番号は16ビット整数で表され、値の範囲は0から65535です。

これらの詳細を覚えたくない場合は、シンプルに「ポートはネットワークアクセスアドレスを構成する必須要素」と理解すれば十分です。

私たちが通常ウェブサイトや IP アドレスにアクセスする際、ポート番号を手動で追加することはめったにありません。なぜなら、Web のデフォルトポートは80または443（HTTPS）だからです。ほとんどのブラウザはこれらの標準ポートを自動的に使用します。特別なポート、例えば React のデフォルト3000や Zeabur が要求する8080については、アドレスの後に:3000や:8080を追加しなければ対応するコンテンツにアクセスできません。

「リッスニングポート番号」とは何か？

「リッスニングポート番号」とは、あるプログラムがデバイス上で自発的に「開き、監視している」ポートのことです。アプリケーションがリッスニングポートを設定したということは、オペレーティングシステムに「私はこのポートでネットワークリクエストを待ち続けます。リクエストが来たら、私に転送してください」と伝えていることになります。

さらに分かりやすく例えると：あなたのパソコンが1棟のオフィスビルだとします。IP アドレスはこのビルの住所です。ビル内には多くの会社や部署があり、それぞれが異なる部屋を占有し、部屋番号がポート番号です。

React のデフォルト開発サーバーが起動すると、ある部屋のドアを「開け」、そのドアに「受付」を配置します。この部屋番号がリッスニングポート——3000です。

さらに、React プログラムはビルの「管理会社」（オペレーティングシステム）に「私は3000号室にいます。3000宛てのすべての郵便物（ネットワークリクエスト）を私に転送してください」と伝えます。

このように、あなたが React ウェブサイトにアクセスすると、リクエストはまずこのビルに到達し、管理会社はリクエストが3000号室宛てであることを確認すると、すぐに React の「受付」にリクエストを渡します。受付が処理して結果を返す——これが React アプリケーションにアクセスするプロセスです。

ローカルでnpm startを実行すると（React 開発サーバーを起動するデフォルトコマンドで、Vibe Coding の Agent サイドバーでも実行可能）、React 開発サーバーは自動的にリッスニングポートを3000に設定します。一方、Zeabur のプラットフォーム設計により、ポート8080をリッスンするアプリケーションしか「認識」しません。React アプリケーションがデフォルトの3000ポートを使用したままだと、Zeabur はリクエストをアプリケーションに正しく転送できず、結果的にデプロイが失敗します。

デフォルトのリッスニングポートの変更

React のデフォルトリッスニングポート（3000）を Zeabur が要求する8080に変更するには、多くの方法があります。最も簡単な方法は、Trae で Agent に「この React プロジェクトのデフォルトポートを8080に変更してください」と指示することです。Trae がプロジェクト内の対応する設定ファイルを変更してくれます。変更完了後、再ビルドして前述の方法で Zeabur にアップロードするだけです。

ネットワーク設定でアクセス URL を指定する方法は、HTML プロジェクトのデプロイ時とほぼ同じで、React バージョンのサービスを起動できます。

他のポート番号の変更が必要なプログラムについても、同じアプローチを採用できます：まずデフォルトポートを変更し、Zeabur にアップロードしてデプロイします。以上で、一般的な Web アプリケーションをサーバーにデプロイする基本的なスキルを習得しました。

Trae に異なるタイプのアプリケーションを構築してもらい、それらを Zeabur のデフォルトサーバーにデプロイしてみてください。今後のレッスンでは、アプリケーションを自分で購入したクラウドサーバーにデプロイする方法も学びます。

⚠️ プロジェクトの停止と削除方法（Zeabur）

サーバー関連のリソースを有効にすると料金が発生するため、使用しないサービスはこまめに停止する習慣を身につけ、毎月の無料枠を使い切らないようにしましょう。

プロジェクトの管理画面を見つけるには、まずプロジェクト内の「Settings」オプションをクリックします。

設定ページに入ったら、ページを一番下までスクロールすると、次のような画面が表示されます：

「Suspend All Services」をクリックしてすべてのサービスを一時停止し、コストを削減できます。サービスに問題が生じた場合は、「Restart All Services」をクリックしてすべてのサービスを再起動できます。このプロジェクトがもう必要ないことが確実な場合は、「Delete Project」をクリックしてプロジェクト全体を完全に削除できます。

まとめ

本チュートリアルでは、4つの一般的な Web アプリケーションデプロイプラットフォームを紹介しました：

Tencent CloudBase：中国国内のユーザーに適しており、アクセスが速く、WeChat エコシステムとの統合が良好
Vercel：モダンフロントエンドフレームワークプロジェクトに適しており、GitHub との統合が緊密、グローバル CDN 加速
Netlify：機能が充実、フォーム処理と認証をサポート、高度な機能を必要とする静的サイトに適している
Zeabur：複雑なプロジェクトに適しており、サービステンプレートが豊富、複数のデプロイ方法をサポート

どのプラットフォームを選ぶかは、あなたの具体的な要件によって異なります：

主に中国国内のユーザー向けの場合は、CloudBase をお勧めします
React/Next.js などのフレームワークを使用する場合は、Vercel または Netlify をお勧めします
フォーム処理や認証などの高度な機能を必要とする場合は、Netlify をお勧めします
Dify、n8n などのサービスをデプロイする必要がある場合は、Zeabur をお勧めします

どのプラットフォームを選んでも、デプロイのコアプロセスは同じです：コードの準備 → プラットフォームの選択 → ビルド設定 → デプロイして公開。これらのスキルを身につければ、自分が開発したアプリケーションを世界中の人に共有できるようになります！

Web アプリケーションのデプロイ方法 ​

「デプロイ」とは何か？ ​

デプロイプラットフォームの比較 ​

1. Tencent CloudBase ​

CloudBase を使用した Web アプリケーションのデプロイ ​

ステップ 1：登録とログイン ​

ステップ 2：環境の作成 ​

ステップ 3：静的サイトホスティングの有効化 ​

ステップ 4：コードのデプロイ ​

ステップ 5：カスタムドメインの設定（オプション） ​

2. Vercel ​

Vercel を使用した Web アプリケーションのデプロイ ​

ステップ 1：アカウントの登録 ​

ステップ 2：プロジェクトのインポート ​

ステップ 3：ビルド設定の構成 ​

ステップ 4：デプロイ ​

ステップ 5：カスタムドメイン（オプション） ​

3. Netlify ​

Netlify を使用した Web アプリケーションのデプロイ ​

ステップ 1：アカウントの登録 ​

ステップ 2：プロジェクトのインポート ​

ステップ 3：ビルド設定の構成 ​

ステップ 4：デプロイ ​

ステップ 5：カスタムドメインの設定（オプション） ​

特色機能 ​

1. フォーム処理 ​

2. Netlify Functions（エッジ関数） ​

3. ローカル開発サポート ​

4. Zeabur ​

Zeabur を使用した Dify のデプロイ ​

Zeabur と Trae を使ったスネークゲームのデプロイ ​

HTML フレームワークでの実装 ​

React フレームワークでの実装 ​

React アーキテクチャへのリファクタリング ​

ポートとは何か？ ​

「リッスニングポート番号」とは何か？ ​

デフォルトのリッスニングポートの変更 ​

⚠️ プロジェクトの停止と削除方法（Zeabur） ​

まとめ ​

Web アプリケーションのデプロイ方法

「デプロイ」とは何か？

デプロイプラットフォームの比較

1. Tencent CloudBase

CloudBase を使用した Web アプリケーションのデプロイ

ステップ 1：登録とログイン

ステップ 2：環境の作成

ステップ 3：静的サイトホスティングの有効化

ステップ 4：コードのデプロイ

ステップ 5：カスタムドメインの設定（オプション）

2. Vercel

Vercel を使用した Web アプリケーションのデプロイ

ステップ 1：アカウントの登録

ステップ 2：プロジェクトのインポート

ステップ 3：ビルド設定の構成

ステップ 4：デプロイ

ステップ 5：カスタムドメイン（オプション）

3. Netlify

Netlify を使用した Web アプリケーションのデプロイ

ステップ 1：アカウントの登録

ステップ 2：プロジェクトのインポート

ステップ 3：ビルド設定の構成

ステップ 4：デプロイ

ステップ 5：カスタムドメインの設定（オプション）

特色機能

1. フォーム処理

2. Netlify Functions（エッジ関数）

3. ローカル開発サポート

4. Zeabur

Zeabur を使用した Dify のデプロイ

Zeabur と Trae を使ったスネークゲームのデプロイ

HTML フレームワークでの実装

React フレームワークでの実装

React アーキテクチャへのリファクタリング

ポートとは何か？

「リッスニングポート番号」とは何か？

デフォルトのリッスニングポートの変更

⚠️ プロジェクトの停止と削除方法（Zeabur）

まとめ