ServBayでReactプロジェクトを作成・運用する方法

Reactとは？

Reactは、Meta（旧Facebook）およびコミュニティによってメンテナンスされているオープンソースのJavaScriptライブラリで、ユーザーインターフェース（UI）構築に特化しています。コンポーネントベースのアプローチにより、開発者は効率的かつメンテナンス性の高いシングルページアプリケーション（SPA）や大規模Webアプリのビュー層を素早く構築できます。Reactの主な強みは、宣言的なプログラミングスタイル、高速な仮想DOMによる更新、そして充実したコミュニティによるエコシステムです。

Reactの主な特徴・メリット

コンポーネント開発： 複雑なUIを独立・再利用可能なコンポーネントに分割し、保守性と再利用性を向上させます。
宣言的ビュー： UIの状態を宣言的に記述することで、Reactが状態に応じてDOMを自動的に更新し、UI開発をシンプル化します。
仮想DOM（Virtual DOM）： メモリ上に仮想DOMを保持し、差分のみを実DOMに反映することでパフォーマンス向上を実現します。
単方向データフロー： 上位から下位へデータが流れることで、状態管理や変更追跡が容易になります。
JSX： JavaScript内でHTMLライクな構造を記述できるため、可読性が向上します。
豊富なエコシステム： React Router, Redux, Zustand, MobX, Material UIなど、ルーティングや状態管理、UI構築のためのサードパーティ製ライブラリが充実。

Reactを使うことで、現代的で高性能なWebアプリケーションの開発がよりスピーディーかつ効率的になります。

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

ServBayはmacOSとWindowsで利用可能な本格的ローカルWeb開発環境です。Node.jsなど主要なソフトウェアを同梱しており、Webサイト管理も簡単。本ガイドでは、ServBayのNode.js環境とWebサイト機能を使い、Reactの初期プロジェクト作成から開発サーバー設定、本番環境への静的配信までの流れを、開発モード（リバースプロキシ）と本番モード（静的サイト）それぞれで詳しく解説します。

前提条件

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

ServBayのインストール： お使いのシステムにServBayが正常にインストール・起動されていること。
Node.jsパッケージのインストール： ServBayのGUIまたはCLIからNode.jsパッケージを追加してください。詳細手順はServBayのNode.jsパッケージ導入ガイドをご参照ください。ServBayはNode.jsのバージョンや環境変数も自動管理してくれます。

Reactプロジェクトの作成

最新のフロントエンド開発ツールViteを使い、Reactプロジェクトを簡単に作成します。Viteは爆速な起動・即時HMR（Hot Module Replacement）対応で、従来のcreate-react-appより主流となっています。

ターミナルを開き、Webサイトのルートディレクトリへ移動
使っているOSごとに、ServBay推奨・初期のWebサイトルートディレクトリは下記の通りです。
macOS:
bash
```
cd /Applications/ServBay/www
```
1
Windows:
cmd
```
cd C:\ServBay\www
```
1
Viteを使って新規Reactプロジェクトを作成
以下コマンドで、servbay-react-demoという名前でReactテンプレートの新しいViteプロジェクトを作ります。
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やpnpmが好みの場合は、yarn installやpnpm installでもOKです。

Reactプロジェクトの内容を変更（任意）

セットアップ検証のため、プロジェクトのトップページを簡単に編集してみましょう。

src/App.jsxまたはsrc/App.tsxファイルを開く
お好きなエディタでプロジェクト直下のsrc/App.jsx（JS版の場合）またはsrc/App.tsx（TS版の場合）を開きます。

内容を変更する

メイン表示部分のコードを見つけて、表示内容を「Hello ServBay!」に変更しましょう。

javascript

// ... ほかのインポート ...
import './App.css';

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

export default App;

ファイルを保存してください。

開発モードで実行

開発段階では、ホットリロード（HMR）などが利用できるローカル開発サーバーを起動します。ServBayはリバースプロキシを用い、外部からのリクエストをこの開発サーバーへ転送することが可能です。

ターミナルで開発サーバーを起動する
プロジェクトのルートservbay-react-demoで、Vite開発サーバーを起動、ポート番号（例:8585）を指定します。
bash
```
npm run dev -- --port 8585
```
1
- npm run devはpackage.jsonのdevスクリプトを実行し、Vite開発サーバーを立ち上げます。
- -- --port 8585でポート番号を指定します。
起動後、例えばhttp://localhost:8585等のアクセスURLがターミナルに表示されます。サーバー実行中はこのターミナルを閉じずにください。
ServBayでWebサイトのリバースプロキシを設定する
ServBayアプリ画面を開き、【Webサイト】機能に進みます。［追加］ボタンで新しいWebサイト設定を作ります。
- 名称（Name）： ServBay React Dev（分かりやすい名称）
- ドメイン（Domain）： servbay-react-dev.servbay.demo（ServBayブランドのサンプルドメイン）
- サイト種別（Site Type）： リバースプロキシ（Reverse Proxy）を選択
- プロキシIP（Proxy IP）： 127.0.0.1（開発サーバーはローカルで稼働）
- プロキシポート（Proxy Port）： 8585（起動時に指定したポートと同じ）
設定を保存すると、ServBayがWebサーバー（CaddyまたはNginx）に対し、この新規ドメイン宛リクエストをhttp://127.0.0.1:8585へ転送するよう自動設定します。
Webサイト追加の細かな手順はServBayサイト管理ガイドをご覧ください。
開発用Webサイトにアクセス
ブラウザで、設定した開発用ドメインhttps://servbay-react-dev.servbay.demoへアクセス。
- ServBayの恩恵としてローカル開発サイトにもSSL証明書（ServBay User CAまたはServBay Public CA発行）が自動取得され、HTTPSで安全に閲覧可能です。詳細はSSLでWebサイトを保護する方法をご参照ください。
- エディタでソースを変更・保存すると、ブラウザ画面が即座に更新されます（これがHMRの機能です）。

本番用ビルド

プロジェクトが完成したら、本番公開用の最適化ビルドを生成します。

ターミナルで本番ビルドを実行する
プロジェクトディレクトリservbay-react-demoで下記コマンドを実行。
bash
```
npm run build
```
1
このコマンドはpackage.jsonのbuildスクリプトを実行します。ViteベースのReactの場合、HTML・CSS・JS・各種リソースが静的ファイルとして最適化され、distフォルダに生成されます。完了するとビルド成功のメッセージが表示されます。
ServBayで静的ファイル配信の設定
本番ビルドしたdistディレクトリをWebサーバーのルートとして静的サイト設定を行います。
ServBayアプリ画面から【Webサイト】へ進み、［追加］ボタンで新しい設定を作成。
- 名称（Name）： ServBay React Prod（分かりやすい名称）
- ドメイン（Domain）： servbay-react.servbay.demo（開発用とは異なる本番用のドメインを指定）
- サイト種別（Site Type）： 静的（Static）を選択
- サイトルートディレクトリ（Website Root Directory）： ビルド後のdistディレクトリ（絶対パスで）
  - macOS: /Applications/ServBay/www/servbay-react-demo/dist
  - Windows: C:\ServBay\www\servbay-react-demo\dist
設定保存後、ServBayがWebサーバーに対しこのディレクトリの静的ファイル配信を自動セットアップします。
本番Webサイトにアクセス
ブラウザで、新たに設定した本番ドメインhttps://servbay-react.servbay.demoへアクセス。
最適化された本番用Webサイトが表示され、こちらもSSLが自動設定されています。

まとめ

上記手順に従うことで、ServBayを使いローカル環境でReactプロジェクトを作成し、開発モード（リバースプロキシ）・本番モード（静的サイト）の両方を設定することができました。ServBayの柔軟なWebサイト管理・Node.js同梱・自動SSL機能によって、macOSとWindows両環境で快適にReact開発・テスト・公開が可能です。ぜひこの流れをベースに、さらにReactアプリの開発・運用を進めてください。

ServBayでReactプロジェクトを作成・運用する方法 ​

Reactとは？ ​

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

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

前提条件 ​

Reactプロジェクトの作成 ​

Reactプロジェクトの内容を変更（任意） ​

開発モードで実行 ​

本番用ビルド ​

まとめ ​