Angular プロジェクトの作成と実行

Angularとは？

AngularはGoogleにより維持されているオープンソースフロントエンドフレームワークで、動的なシングルページアプリケーション（SPA）を構築するために使用されます。TypeScriptに基づいており、豊富なツールと機能を提供し、開発者が複雑なアプリケーションを効率的に構築できるようにします。Angularの核心理念はコンポーネントとモジュール化であり、これによりコードの整理と保守が容易になります。

Angularの主要な機能と利点

• コンポーネント化：コンポーネントを使用してユーザーインターフェースを構築し、コードをよりモジュール化し再利用可能にします。
• 双方向データバインディング：データモデルとビューを自動的に同期させ、データ管理をより簡単にします。
• 依存性注入：依存性注入メカニズムを通じて、コードのテスト可能性と保守性を向上させます。
• 強力なCLIツール：Angularは強力なコマンドラインツール（Angular CLI）を提供し、プロジェクトの作成、開発、構築を簡素化します。
• 組み込みのルーティングおよびフォーム処理：Angularは強力なルーティングおよびフォーム処理機能を提供し、シングルページのアプリケーションを容易に構築できます。

Angularを使用することで、開発者は現代的で応答性の高いWebアプリケーションをより効率的に構築できます。

ServBayを使用してAngularプロジェクトを作成および実行する

この記事では、ServBayが提供するNode.js環境を使用してAngularプロジェクトを作成および実行します。ServBayの「ホスト」機能を使用してWebサーバーを設定し、リバースプロキシと静的ファイルサーバーを通じてプロジェクトへのアクセスを実現します。

Angularプロジェクトの作成

1. プロジェクトの初期化

   まず、ServBayが提供するNode.js環境をインストールしていることを確認します。次に、以下のコマンドを使用してAngular CLIをグローバルにインストールします：

   npm install -g @angular/cli

   ServBayの推奨ウェブサイトルートディレクトリー /Applications/ServBay/www に新しいAngularプロジェクトを作成します：

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

   プロンプトに従ってプロジェクト名（servbay-angular-appを推奨）を入力し、必要に応じて他のオプションを選択します：

   ? Would you like to add Angular routing? Yes
   ? Which stylesheet format would you like to use? CSS

2. 依存関係のインストール

   プロジェクトディレクトリに移動し、依存関係をインストールします：

   cd servbay-angular-app
   npm install

Angularプロジェクトの出力内容の変更

1. src/app/app.component.html ファイルの変更

   src/app/app.component.htmlファイルを開き、コンテンツを編集してウェブページに"Hello ServBay!"を表示させます：

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
   </div>

開発モードに入る

1. 開発サーバーの実行

   開発サーバーを起動し、ポート（例：8585）を指定します：

   ng serve --port 8585

   これにより、ローカルで開発サーバーが起動し、ポート8585が公開されます。

2. ServBayホストのリバースプロキシの設定

   ServBayの「ホスト」機能を使用して、開発サーバーにリバースプロキシを通じてアクセスします。ServBayの「ホスト」設定で、新しいリバースプロキシを追加します：

   • 名前：My first Angular dev site
   • ドメイン名：servbay-angular-test.dev
   • ホストタイプ：リバースプロキシ
   • IP：127.0.0.1
   • ポート：8585

   詳細な設定手順はNodejs開発用ウェブサイトの追加を参照してください。

3. 開発モードアクセス

   ブラウザを開いて https://servbay-angular-test.dev にアクセスし、リアルタイムでプロジェクトを確認します。ServBayはカスタムドメインと無料のSSL証明書をサポートしているため、より高いセキュリティを享受できます。

本番バージョンの構築

1. 本番バージョンの構築

   開発が完了したら、以下のコマンドを使用して本番バージョンを構築します：

   ng build --prod

   構築が完了すると、生成された静的ファイルは dist/servbay-angular-app ディレクトリに配置されます。

2. 静的ファイルサービスの設定

   ServBayの「ホスト」機能を使用して、静的ファイルサービスを通じて本番バージョンにアクセスします。ServBayの「ホスト」設定で、新しい静的ウェブサイトを追加します：

   • 名前：My first Angular production site
   • ドメイン名：servbay-angular-test.prod
   • ホストタイプ：静的
   • ウェブサイトルートディレクトリー：/Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app

3. 本番モードアクセス

   ブラウザを開いて https://servbay-angular-test.prod にアクセスし、構築後の本番バージョンを確認します。ServBayのカスタムドメインと無料のSSL証明書を使用することで、ウェブサイトはより高いセキュリティと信頼性を持つようになります。

以上の手順により、Angularプロジェクトを成功裏に作成および実行し、ServBayの提供する機能を使用してプロジェクトを管理およびアクセスすることができます。