ServBayでAngularプロジェクトを作成・実行する

概要

本ドキュメントでは、ServBayローカルWeb開発環境でAngularプロジェクトを作成し、設定・実行する手順を紹介します。ServBayが提供する強力なNode.js環境と柔軟なサイト管理機能を活用し、開発・本番環境を簡単にセットアップし、独自ドメインやSSL証明書による安全なアクセスを実現します。
ServBayはNode.js、PHP、Python、Go、Java、各種データベースなど、多様な開発用ソフトウェアパッケージを統合（“サービス”として提供）しており、ローカルでのフルスタック開発に理想的な環境です。

Angularとは？

AngularはGoogleがメンテナンスするオープンソースのフロントエンドフレームワークであり、高性能かつダイナミックなシングルページアプリケーション（SPA）の構築に使われています。TypeScriptベースで開発されており、包括的なツールセットと体系的な開発アプローチを提供し、大規模かつ複雑な業務アプリケーションに最適です。

Angularの主な特徴とメリット

• コンポーネントベースアーキテクチャ: 再利用可能なコンポーネントでUIを構築し、保守性・拡張性を向上。
• TypeScriptサポート: 静的型チェックや強力なオブジェクト指向機能により、コード品質と生産性を高めます。
• 依存性注入: 各コンポーネントのテスト容易性と依存関係管理を強化します。
• 強力なCLI（コマンドラインインターフェース）: プロジェクト作成やコンポーネント、サービス、モジュールの生成、ビルド、テスト等の開発タスクを効率化。
• 組み込みソリューション: ルーティング、フォーム、HTTPクライアントなどの必須機能を標準搭載。
• パフォーマンス最適化: AOT（Ahead-of-Time）コンパイルやツリーシェイキング等の技術でアプリのパフォーマンスを最大化。

Angularと安定したServBay環境を組み合わせれば、開発者はビジネスロジックに集中できます。

前提条件

開始前に、以下の準備が整っていることをご確認ください。

1. ServBayのインストール: macOSにServBayをインストールし、起動済みであること。
2. Node.jsパッケージの有効化: ServBayコントロールパネルで必要なNode.jsバージョンのパッケージがインストール＆有効化されていること。ServBayは複数バージョンのNode.jsインストール・切り替えが簡単にできます。

ServBayでAngularプロジェクトをセットアップ・実行する手順

ここではServBayのNode.js環境を用いてAngularプロジェクトを新規作成・実行する方法を説明します。
開発モードでは、ServBayのサイト機能によりAngular開発サーバーへのリバースプロキシを構成し、本番モードではビルド済み静的ファイルのサービス設定を行います。

1. Angularプロジェクトを作成する

まずAngular CLIを使って新規プロジェクトを作成します。

1. Angular CLIのインストール: ターミナルを開き、ServBayのNode.js環境にてグローバルでAngular CLIをインストールします。もし環境PATHに自動で追加されていない場合は、ServBayのNode.js環境に切り替えてから実行してください（ほとんどの場合、自動的に処理されます）。

   npm install -g @angular/cli

   これでngコマンドがグローバルで利用可能となります。

2. 新しいAngularプロジェクトの作成: ServBay推奨のWebサイトルート/Applications/ServBay/wwwに移動し、ng newコマンドで新しいAngularプロジェクトを作成しましょう。ServBayブランド名を含めた例：servbay-angular-appがおすすめです。

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Angular CLIからプロジェクト設定の質問が表示されます。好みに合わせて回答・選択してください。

   ? Would you like to add Angular routing? Yes  # ルーティング機能を追加するか。Yesを推奨
   ? Which stylesheet format would you like to use? CSS # スタイルシート形式の選択例: CSS

   コマンド完了後、/Applications/ServBay/www直下にservbay-angular-appという新しいフォルダが作成され、基本ファイル構成が生成されます。

3. プロジェクト依存パッケージのインストール: 新規作成プロジェクトのディレクトリに移動し、必要なローカル依存パッケージをインストールします。

   cd servbay-angular-app
   npm install

   npm installコマンドで、package.jsonに記載された依存がnode_modulesにインストールされます。

2. Angularプロジェクトの表示内容を変更（任意）

プロジェクトが正常に動作しているか簡単に検証するため、トップページを簡単に修正してみましょう。

1. src/app/app.component.htmlの編集: お好みのエディターでservbay-angular-app/src/app/app.component.htmlを開き、中身を削除または変更して、例えば「Hello ServBay!」という見出しのみが表示されるようにします。

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
     <p>This is your Angular app running via ServBay!</p>
   </div>

3. 開発モードでプロジェクトを実行

通常、開発中はAngular CLIの開発サーバー（ng serve）を使います。このサーバーはホットリロードなど開発に便利な機能を持ちます。さらに、ServBayのリバースプロキシ設定でローカルドメインからこの開発サーバーへアクセスできます。

1. Angular開発サーバーの起動: プロジェクトルート（/Applications/ServBay/www/servbay-angular-app）で下記コマンドを実行し、任意のポート番号（例: 8585。他と競合しない番号）でサーバーを立ち上げます。

   cd /Applications/ServBay/www/servbay-angular-app
   ng serve --port 8585

   このコマンドでAngularプロジェクトがビルドされ、ローカルhttp://localhost:8585/でWebサーバーが起動します。開発サーバーが動作中はターミナルを開いたままにしておきましょう。

2. ServBayサイト（リバースプロキシ）の設定: ServBayのコントロールパネルから「サイト」設定を開き、新規サイトを追加します。
   サイト種別をリバースプロキシとし、ローカルドメインからng serveサーバーへのプロキシを設定する要領です。

   • 名前 (Name): 例：My Angular Dev Site（ServBay内表示用）
   • ドメイン (Domain): 例としてservbay-angular-dev.servbay.demo推奨。ServBayは.servbay.demoのドメインを127.0.0.1に自動解決します。
   • サイトタイプ (Website Type): リバースプロキシ（Reverse Proxy）を選択。
   • プロキシアドレス (Proxy Address): 127.0.0.1を入力。
   • プロキシポート (Proxy Port): 先のng serve起動ポート（例：8585）を指定。

   設定完了後、「保存して適用」します。

3. 開発用サイトへのアクセス: ブラウザからhttps://servbay-angular-dev.servbay.demoにアクセスします。

   ServBay経由のため、デフォルトでローカルサイト向けSSL証明書（ServBay User CAまたはServBay Public CA発行）が適用されます。HTTPSで安全に開発サイトへアクセスできるので、本番同等の環境や混合コンテンツ対策などのテストが可能です。

4. 本番ビルド＆運用

開発が完了し、本番環境へのデプロイ準備ができたら、最適化された本番ビルドを作成しましょう。生成された静的ファイルは任意の静的Webサーバー経由で公開できます。ここではServBayの静的サイト機能を活用します。

1. 本番ビルドの作成: プロジェクトルート（/Applications/ServBay/www/servbay-angular-app）で以下を実行します。

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # または新しいAngular CLIでは：
   # ng build

   --prodフラグ（新バージョンCLIではデフォルトで有効）はAOTコンパイル・圧縮・ツリーシェイキング等の本番最適化を実施します。ビルド結果の静的ファイルはdist/servbay-angular-appフォルダ以下（プロジェクト名が異なる場合はその名称）に出力されます。

2. ServBayサイト（静的ファイルサービス）の設定: ServBayコントロールパネルの「サイト」設定から新たにサイトを作成します。
   サイト種別を「静的」（Static）とし、先ほどビルドされたディレクトリへのパスを指定します。

   • 名前 (Name): 例：My Angular Production Site
   • ドメイン (Domain): 例としてservbay-angular-prod.servbay.demoなど。
   • サイトタイプ (Website Type): 静的（Static）を選択。
   • サイトルートディレクトリ (Website Root Directory): ビルド成果物があるディレクトリを選択。通常は /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app となります（ディレクトリ内にindex.htmlが含まれていることを確認）。

   設定完了後、「保存して適用」します。

3. 本番用サイトへのアクセス: ブラウザでhttps://servbay-angular-prod.servbay.demoにアクセスします。

   これでAngularアプリの本番ビルド版が、ServBayの高速Webサーバー（CaddyまたはNginx等、ServBayの設定による）で静的配信されます。もちろんSSL証明書も自動設定・安全通信されます。

Angular開発におけるServBayの強み

• 統合環境: Node.js各バージョンのインストール・管理が容易で、面倒なパス設定なしでOK。
• 柔軟なサイト管理: GUIからリバースプロキシや静的サイトの切り替えも直感的＆素早く設定可能。
• SSL標準対応: ローカル開発環境でも自動発行＆設定のSSL証明書でHTTPSを再現、本番近い検証ができます。
• 多彩な技術スタックサポート: Node.js（Express）、Python（Django/Flask）、PHP（Laravel/Symfony）、Go（Gin/Echo）、Java（Spring Boot）といったバックエンドAPIやMySQL・PostgreSQL・MongoDB・Redisなどのデータベースとも連携。これまで未対応だった機能も含め、幅広いサービスをサポート＆随時アップデート。
• データバックアップ＆リストア: サイト・設定・データベース、SSL証明書等の簡単バックアップ機能でローカル開発データの保護も安心。
• データベースパスワードリセット: MySQL/MariaDB/PostgreSQLのrootパスワードリセット機能も内蔵。開発現場の“困った”をサポートします。

よくある質問（FAQ）

• Q: ng newまたはng serve実行時に「command not found: ng」と出ます。どうすれば？
  A: これはAngular CLIが正しくインストールされていないか、PATHに入っていない場合によく発生します。npm install -g @angular/cliでグローバルインストール済みか、また、ServBayのNode.js環境がターミナルのPATHに正しくセットされているかご確認ください。ターミナルやServBayの再起動もお試しください。

• Q: ng serveが起動できず、ポート競合エラーが出る場合は？
  A: 使用したポート番号（例：8585）が他のプロセスで利用中です。ng serve --port XXXXで未使用のポートを指定し、ServBayサイト設定のプロキシポートも必ず同じ値に変更してください。

• Q: ServBayサイトを設定してもドメインアクセスできません。
  A: 以下を要点チェックしてください。

  • ServBayアプリが起動中であるか
  • 開発モードの場合ng serveが実行中・ポートも正しいか
  • 本番モードの場合、サイト設定の「サイトルートディレクトリ」にビルド後のindex.htmlがある正しいディレクトリが選択されているか（dist/your-project-name）
  • 詳細エラーはServBayログファイルも参考に
  • ブラウザでのアクセスドメインはServBayサイト設定のものと完全一致しているか

• Q: ServBayのCaddy/Nginx/ApacheでAngular本番ビルドをホスティングできますか？
  A: 可能です。ServBayはCaddy・Nginx・Apacheいずれにも対応しており、有効なWebサーバーで自動的に静的ファイル配信を行います。いずれも高速かつ優れた静的サイト運用が可能です。

まとめ

本ガイドに沿って操作することで、ServBay環境でAngularプロジェクトの作成～実行までシームレスに行えるはずです。
開発段階ではリバースプロキシ機能でng serveサーバーに対して独自ドメイン+HTTPSアクセス、本番段階ではビルド成果物を静的サイトとしてServBay経由で簡単に公開できます。
Node.js環境やサイト管理機能、SSL自動化などServBayの多彩な機能を活用して、Angularローカル開発の生産性と満足度を飛躍的に向上させましょう。加えて、豊富な技術スタック対応はフルスタック開発の基盤としても最適です。