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（事前コンパイル）、Tree-shakingなどの技術でアプリの性能を最大化。

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

事前準備

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

ServBayのインストール: ServBay（macOS、Windows対応）が正常にインストール・起動済み。
Node.jsパッケージの有効化: ServBayのコントロールパネルで必要なNode.jsバージョンのパッケージがインストールされ、有効化されていること。ServBayでは複数のNode.jsバージョン管理や切り替えが簡単です。

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

ServBayのNode.js環境を使い、Angularプロジェクトを作成し実行します。開発モードではServBayのサイト機能を使ってAngular開発サーバへのリバースプロキシを設定し、本番モードでは静的ファイルサービスによりプロジェクトを配信します。

1. Angularプロジェクトの作成

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

Angular CLI のインストール: ターミナルを開き、ServBayのNode.js環境でAngular CLIをグローバルインストールします。ServBayのNode.js環境がシステムPATHに自動追加されていない場合、ServBayのNode.jsに切り替えてください。通常はServBayによるPATH設定が行われます。
bash
```
npm install -g @angular/cli
```
1
このコマンドでngコマンドがグローバル環境にインストールされます。
新しいAngularプロジェクトの作成: ServBay推奨のサイトルートディレクトリへ移動し、ng newコマンドで新規プロジェクトを作成します。例としてServBayブランド名を含むservbay-angular-appとします。
macOS:
bash
```
cd /Applications/ServBay/www
ng new servbay-angular-app
```
1
2
Windows:
bash
```
cd C:\ServBay\www
ng new servbay-angular-app
```
1
2
Angular CLIがプロジェクトの設定について質問します。案内に従い選択してください：
```
? Would you like to add Angular routing? Yes  # ルーティング機能追加、推奨はYes
? Which stylesheet format would you like to use? CSS # スタイルシート形式（例：CSS）
```
1
2
完了後、サイトルート内にservbay-angular-appフォルダが作成され、基本的な構成・ファイルが含まれます：
- macOS: /Applications/ServBay/www/servbay-angular-app
- Windows: C:\ServBay\www\servbay-angular-app
依存パッケージのインストール: 新しく作成したプロジェクトディレクトリへ移動し、必要なパッケージをインストールします。
bash
```
cd servbay-angular-app
npm install
```
1
2
npm installはpackage.jsonの項目をもとに依存をnode_modulesにインストールします。

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

動作確認のため、トップページ表示内容を手軽にカスタマイズします。

src/app/app.component.htmlファイルの編集: 好みのエディターでservbay-angular-app/src/app/app.component.htmlを開き、内容をシンプルなタイトルに書き換えます（例:「Hello ServBay!」を表示）。
html
```
<div style="text-align:center">
  <h1>Hello ServBay!</h1>
  <p>This is your Angular app running via ServBay!</p>
</div>
```
1
2
3
4

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

開発時はAngular CLIの開発サーバ(ng serve)を使います。サーバはホットリロード対応なので開発が効率的です。さらにServBayのリバースプロキシ機能を使うことで、ローカルドメインで開発サーバへアクセスできます。

Angular開発サーバの起動: プロジェクトルートで下記コマンドを実行し、開発サーバを起動します。ServBay Webサーバとポートが重複しないよう、例として8585番を指定しています。
macOS:
bash
```
cd /Applications/ServBay/www/servbay-angular-app
ng serve --port 8585
```
1
2
Windows:
bash
```
cd C:\ServBay\www\servbay-angular-app
ng serve --port 8585
```
1
2
このコマンドでAngularプロジェクトのビルドとローカルhttp://localhost:8585/のWebサーバ起動を行います。ターミナル画面はサーバ稼働中維持してください。
ServBayサイトの設定（リバースプロキシ）: ServBayコントロールパネルから「サイト」（旧称「ホスト」）設定画面を開き、新規サイト設定を追加してローカルドメインから開発サーバへリバースプロキシを構成します。
- 名前（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）
設定後、保存・変更を適用してください。
開発モードのサイトへアクセス: ブラウザを開き、設定したローカルドメインhttps://servbay-angular-dev.servbay.demoにアクセスします。
ServBay経由のアクセスで、ServBayが自動生成・設定するSSL証明書（ServBay User CAまたはServBay Public CA経由）により、開発サイトをHTTPSで安全に閲覧できます。これにより本番環境のHTTPS設定も事前に検証可能です。

4. 本番ビルドと実行

開発完了し公開準備ができたら、本番用に最適化されたビルドを行います。生成された静的ファイルをServBayの静的サイト機能で配信します。

本番ビルド: プロジェクトルートで下記コマンドを実行し本番ビルドします：
macOS:
bash
```
cd /Applications/ServBay/www/servbay-angular-app
ng build --prod
# または新Angular CLIバージョンの場合:
# ng build
```
1
2
3
4
Windows:
bash
```
cd C:\ServBay\www\servbay-angular-app
ng build --prod
# または新Angular CLIバージョンの場合:
# ng build
```
1
2
3
4
--prodオプション（最新CLIではデフォルト）が有効化されることで、AOTコンパイル・コード圧縮・Tree-shakingなど最適化処理が行われます。ビルド後、静的ファイルはdist/servbay-angular-appフォルダ下に生成されます（サブフォルダ名は通常プロジェクト名ですが、設定により変わる場合もあります）。
ServBayサイト設定（静的ファイル配信）: ServBayコントロールパネルから「サイト」設定画面を開き、ローカルドメインを本番用静的ファイルディレクトリへ割り当てるサイト設定を追加します。
- 名前（Name）: 例）My Angular Production Site
- ドメイン（Domain）: 例）servbay-angular-prod.servbay.demo（ServBayブランドのテストドメイン推奨）
- サイト種別（Website Type）: 静的（Static）
- サイトルートディレクトリ（Website Root Directory）: ビルド後の出力ディレクトリを指定。通常は
  - macOS: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
  - Windows: C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app
  index.htmlファイルが格納されている最終ディレクトリを必ず指定してください。
設定後、保存・変更を適用してください。
本番サイトへアクセス: ブラウザで設定したローカルドメインhttps://servbay-angular-prod.servbay.demoを開きます。
Webサーバ(CaddyやNginx、ServBayの設定によってはApache)が高性能な静的ファイル配信を行います。SSL証明書も自動的に設定されているため、安全にアクセスできます。

Angular開発でServBayが選ばれる理由

統合開発環境: Node.jsバージョン管理・切り替えを簡単に行え、複雑な環境変数設定が不要。
柔軟なサイト管理: UIからリバースプロキシ・静的ファイルサービスを簡単設定。開発・本番アクセスの切り替えが即座に可能。
SSL標準対応: ローカル開発環境用の無償・自動設定SSL証明書で、HTTPS本番環境を完全再現。混合コンテンツ警告も回避。
複数技術スタック対応: バックエンドAPI（Node.js Express、Python Django/Flask、PHP Laravel/Symfony、Go Gin/Echo、Java Spring Bootなど）やデータベース（MySQL、PostgreSQL、MongoDB、Redis）を必要とするプロジェクトも、ServBayなら一括統合。本格的なフルスタック開発環境を実現。機能更新にも対応済みです。
データバックアップ・リストア: 設定・サイト・DB・SSL証明書のバックアップ機能も搭載し、開発データの安全性確保。
データベースパスワードリセット: MySQL、MariaDB、PostgreSQL等のrootパスワードリセット機能を標準搭載。よくある「パスワード忘れ」問題も簡単解決。

よくある質問（FAQ）

Q: ng newやng serve実行時に「command not found: ng」と表示されます。どうすれば？ A: CLIが正しくインストールされていないかPATH設定されていない場合に発生します。@angular/cliをグローバルインストール（npm install -g @angular/cli）し、ServBayのNode.js環境がPATHに反映されているかご確認ください。ターミナルやServBay再起動もお試しください。
Q: ng serveが起動せず「ポートが利用中」と出ます。どうすれば？ A: 指定ポート（例: 8585）が他プログラムで使用中です。ng serve --portで欲しい未使用ポート（例: 8586）を指定し、ServBayサイト設定のリバースプロキシ側も対応ポートへ更新してください。
Q: ServBayサイトを設定しても、ドメインアクセス時にページが表示されません。 A: 次の点を確認しましょう
- ServBay自体が起動中であること。
- 開発モードではng serveが実行中、かつServBay設定のリバースプロキシポートが一致していること。
- 本番モードではサイト設定の「サイトルートディレクトリ」がビルド後index.htmlを含む正確なディレクトリ（dist/your-project-name）であること。
- ServBayのログファイルも確認。詳細なエラーが記録されている場合あり。
- ブラウザでアクセスするドメインが、ServBayサイト設定と完全一致していること。
Q: ServBayのCaddy/Nginx/ApacheどのWebサーバでもAngular本番配信は可能？ A: 可能です。ServBayはCaddyやNginx（およびApache）いずれも静的サイト配信に利用可能。静的サイト設定時、自動的に有効なWebサーバが用いられます。どれも高速な静的ファイル配信を実現します。

まとめ

本ガイドを通じて、ServBay環境上でAngularプロジェクトの作成・実行を一通り体験できます。開発時はServBayリバースプロキシとローカルドメインでng serveサーバへ安全アクセス、本番時はビルドした静的ファイルをServBayの配信機能で公開できます。Node.js環境、サイト管理、SSL標準対応を組み合わせることで、Angularローカル開発効率・体験を大きく向上可能です。ServBayが提供する多様な技術スタック対応は、あなたのフルスタック開発にも強力な基盤となります。

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

概要 ​

Angularとは ​

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

事前準備 ​

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

1. Angularプロジェクトの作成 ​

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

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

4. 本番ビルドと実行 ​

Angular開発でServBayが選ばれる理由 ​

よくある質問（FAQ） ​

まとめ ​