macOSローカル環境でServBayを使ってReactプロジェクトを作成・運用する

Reactとは？

Reactは、Meta（旧Facebook）およびコミュニティによって維持されているオープンソースのJavaScriptライブラリで、ユーザーインターフェース（UI）構築専用に設計されています。コンポーネントベースでインタラクティブなUIを構築することにより、開発者が効率的に複雑かつ保守性の高いシングルページアプリケーション（SPA）や大規模Webアプリケーションのビュー層を作り上げられるのが特徴です。Reactの主な強みは、宣言的なプログラミングスタイル、高速なバーチャルDOM更新、そして強力なエコシステムにあります。

Reactの主な特徴とメリット

コンポーネント開発： 複雑なUIを独立・再利用可能な部品（コンポーネント）に分割し、コードの保守性と再利用性を高めます。
宣言的UI： UIの状態を宣言的に記述すると、Reactが状態に応じてDOMを自動的に同期します。これにより開発ロジックが簡素化されます。
バーチャルDOM： メモリ上に仮想のDOMを保持し、差分を検出して効率的に本物のDOMを更新することでパフォーマンスを向上させます。
単方向データフロー： データが親から子にのみ流れるため、状態変化の追跡が容易かつ予測可能です。
JSX： JavaScript内にHTMLに近い構文を書ける拡張で、コードの可読性を高めます。
豊富なエコシステム： React RouterやRedux/Zustand/MobX、Material UIといったサードパーティライブラリが充実しており、状態管理・ルーティング・UI部品など様々な分野をカバーしています。

Reactを使うことで、開発者はモダンかつ高性能なWebアプリケーションを迅速かつ効率的に構築できます。

ServBayでReact開発・本番環境を構築する

ServBayは、macOSユーザー向けの強力なローカルWeb開発環境で、Node.jsを含む多様なソフトウェアを提供しています。本ガイドでは、ServBayのNode.js環境とWebサイト（Websites）機能を活用し、Reactプロジェクトの作成・構成・運用を段階ごとに解説します。開発モードのリバースプロキシや本番モードでの静的ファイル公開の方法に加え、設定手順も詳述しています。

前提条件

作業を始める前に、以下の準備ができていることを確認してください。

ServBayのインストール： お使いのmacOSにServBayが正しくインストールされ、起動している状態にあること。
Node.jsパッケージのインストール： ServBayのインターフェースやコマンドラインからNode.jsパッケージを追加済みであること。詳しい手順はServBayによるNode.jsパッケージの導入ガイドをご覧ください。ServBayはNode.jsのバージョン管理・環境変数設定を自動で行います。

Reactプロジェクトの作成

ここでは、現代的なフロントエンドビルドツールViteを使い、Reactプロジェクトを素早く作成します。Viteは高速な起動・即時ホットモジュールリプレイス（HMR）を特長とし、今や新規Reactプロジェクトの主流ツールになっています（従来の create-react-app に代わる選択肢）。

ターミナルを開いてWebルートディレクトリへ移動
ターミナルアプリを開きます。ServBayの推奨デフォルトWebルートディレクトリは /Applications/ServBay/www です。このディレクトリに移動します。
bash
```
cd /Applications/ServBay/www
```
1
Viteで新しいReactプロジェクトを作成
以下のコマンドで、create-viteスキャフォールディングツールを使い servbay-react-demo という新規ディレクトリにReactプロジェクトを作成しましょう。
bash
```
npx create-vite servbay-react-demo --template react
```
1
- npx はnpmパッケージランナーで、グローバルインストール無しでツール実行を可能にし、常に最新の create-vite を利用できます。
- create-vite はVite公式のプロジェクト雛形作成コマンドです。
- servbay-react-demo はプロジェクトフォルダー名です。
- --template react でReact用のテンプレートを使用します。
画面上の指示に従ってプロジェクト作成を完了してください。
プロジェクトディレクトリに移動し依存関係をインストール
作成したばかりのプロジェクトディレクトリに入り、npmで依存パッケージをインストールします。
bash
```
cd servbay-react-demo
npm install
```
1
2
- yarn install や pnpm install を利用してもかまいません。好みのパッケージマネージャをご使用ください。

Reactプロジェクト内容の編集（任意）

セットアップ検証のため、プロジェクトのトップページを簡単にカスタマイズしてみましょう。

src/App.jsxまたはsrc/App.tsxファイルを開く
お好みのエディタで、作成したプロジェクトの src/App.jsx（JavaScript版）または src/App.tsx（TypeScript版）ファイルを開きます。

内容を編集

メインコンテンツ部分を探し、「Hello ServBay!」と表示するように編集します。

javascript

// ... その他のインポート ...
import './App.css';

function App() {
  // ... その他のコード ...
  return (
    <>
      {/* ... その他の要素 ... */}
      <h1>Hello ServBay!</h1>
      {/* ... その他の要素 ... */}
    </>
  );
}

export default App;

編集後は保存してください。

開発モードの起動

開発段階では、ホットモジュールリプレイス（HMR）などの便利な機能付きローカル開発サーバーを起動して作業します。ServBayのリバースプロキシ機能を使うことで、開発サーバーへの外部アクセスもスムーズに行えます。

ターミナルで開発サーバーを起動
プロジェクトのルート servbay-react-demo で次のコマンドを実行し、指定したポート（例：8585）でVite開発サーバーを起動します。
bash
```
npm run dev -- --port 8585
```
1
- npm run dev でpackage.jsonに定義された dev スクリプト（通常はVite開発サーバーの起動）を実行します。
- -- --port 8585 はViteへのポート指定です。
開発サーバーが立ち上がると、通常は http://localhost:8585 などのアドレスが表示されます。このターミナルは開いたままにしてください。
ServBayでリバースプロキシを設定
ServBayアプリの画面から「Webサイト」機能にアクセスし、新しいWebサイト設定を追加します。
- 名前（Name）： ServBay React Dev（任意の説明名）
- ドメイン（Domain）： servbay-react-dev.servbay.demo（ServBayブランドのデモ用ドメイン）
- サイトタイプ： リバースプロキシ（Reverse Proxy）を選択
- プロキシIP： 127.0.0.1（開発サーバーがローカルで動作）
- プロキシポート： 8585（Viteサーバーで指定したポートと同じ）
設定を保存します。ServBayが設定を反映し、組み込みWebサーバー（CaddyまたはNginx）が servbay-react-dev.servbay.demo へのリクエストを http://127.0.0.1:8585 に転送するよう自動構成します。
ServBayでWebサイトを追加する詳細手順はWebサイト管理ガイドをご参照ください。
開発用サイトへのアクセス
ブラウザで設定したドメインにアクセスします：https://servbay-react-dev.servbay.demo
- ServBayではSSL証明書（ServBay User CAまたはServBay Public CA発行）が自動適用されるため、ローカル開発サイトもHTTPSで安全にアクセスできます。SSL機能についてはSSLでWebサイトを保護するをご覧ください。
- 編集したコードを保存するとブラウザのページが自動で更新されるはずです。これがHMR（ホットモジュールリプレイス）の効果です。

本番用ビルドの作成

Reactプロジェクトの開発が完了し、本番デプロイの準備ができたら、最適化された静的ファイルとしてビルドします。

ターミナルで本番用ビルドを実行
プロジェクトルートで下記コマンドを実行し、本番ビルドを行います。
bash
```
npm run build
```
1
このコマンドでpackage.jsonの build スクリプトが実行され、ViteベースのReactプロジェクトではHTML・CSS・JavaScriptなど静的リソースを最適化・バンドルし、dist ディレクトリに出力します。完了後、成功のメッセージが表示されます。
ServBayで静的サイト公開を設定
distフォルダーにはWebサーバーでそのまま公開できる静的ファイル一式が格納されています。ServBayのWebサイト機能で、このディレクトリを静的サイトとして指定します。
ServBayアプリを開き、「Webサイト」機能を選択。新しいサイト設定で下記内容を入力しましょう。
- 名前（Name）： ServBay React Prod（任意の名前）
- ドメイン（Domain）： servbay-react.servbay.demo（本番用のデモドメインで開発用と区別）
- サイトタイプ： 静的（Static）
- Webサイトルートディレクトリ： /Applications/ServBay/www/servbay-react-demo/dist（ビルド後の dist ディレクトリを指定）
設定を保存すると、ServBayの組み込みWebサーバーがdist配下のファイルを直接配信します。
本番サイトへのアクセス
ブラウザで本番用に設定したドメインへアクセスします：https://servbay-react.servbay.demo
これで最適化・ビルド済みのReact本番サイトが表示されます。もちろん、このサイトでも自動的にSSLサポートが適用されます。

まとめ

上記の手順を踏むことで、ServBayを使いmacOSローカル環境上にReactプロジェクトを作成し、開発モードでのリバースプロキシ運用から本番用の静的サイトホスティングまで一元的に設定できました。ServBayは特にNode.js組み込みサポート、柔軟なWebサイト設定（リバースプロキシや静的サービス）、自動SSL適用などにより、React開発者のローカルワークフローを大幅に効率化します。今後はこの環境で更に開発・テスト・デプロイを進めていくことができます。

macOSローカル環境でServBayを使ってReactプロジェクトを作成・運用する ​

Reactとは？ ​

Reactの主な特徴とメリット ​

ServBayでReact開発・本番環境を構築する ​

前提条件 ​

Reactプロジェクトの作成 ​

Reactプロジェクト内容の編集（任意） ​

開発モードの起動 ​

本番用ビルドの作成 ​

まとめ ​