CentOS8にAngularCLIをインストールする方法

Angularは、人気のあるオープンソースアプリケーション開発フレームワークです。これは非常に拡張性が高く、TypeScript/JavaScriptを使用してモバイルおよびWebアプリケーションを開発するために使用されます。小規模から大規模のアプリケーションをゼロから構築するために設計されています。 Angularアプリケーションを作成、管理、構築、テストするためのAngularCLIユーティリティを提供します。

この投稿では、CentOS 8にAngular（CLI）をインストールする方法を紹介します。

前提条件

CentOS8を実行しているサーバー。
ルートパスワードはサーバーで構成されています。

Node.jsをインストール

Angularをインストールするには、Node.jsをサーバーにインストールする必要があります。インストールされていない場合は、次のコマンドでインストールできます。

curl -sL https://rpm.nodesource.com/setup_14.x | bash -
dnf install nodejs -y

インストールが完了したら、次のコマンドを使用して、インストールされているNode.jsのバージョンを確認します。

node --version

出力：

v14.16.1

次のコマンドを使用して、NPMのバージョンを確認することもできます。

npm --version

出力：

6.14.12

Angular/CLIのインストール

これで、次のコマンドを実行してAngular/CLIをインストールできます。

npm install -g @angular/cli

インストールしたら、次のコマンドを使用して、インストールされているバージョンのAngular/CLIを確認します。

ng --version

次の出力が得られるはずです：

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.2.7
Node: 14.16.1
OS: linux x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1102.7 (cli-only)
@angular-devkit/core         11.2.7 (cli-only)
@angular-devkit/schematics   11.2.7 (cli-only)
@schematics/angular          11.2.7 (cli-only)
@schematics/update           0.1102.7 (cli-only)

Angularを使用してアプリケーションを作成する

Angular / CLIは、本番環境とローカル環境でアプリケーションを作成してデプロイするためのより簡単な方法を提供します。

hello-worldという名前の新しいアプリケーションを作成するには、次のコマンドを実行します。

ng new hello-world

アプリケーションが作成されたら、ディレクトリをhello-worldに変更し、次のコマンドを使用してアプリケーションを起動します。

cd hello-world
ng serve

次の出力が表示されます。

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


? Compiled successfully.
? Browser application bundle generation complete.

Initial Chunk Files | Names  |      Size
styles.css          | styles | 119 bytes

4 unchanged chunks

Build at: 2021-04-07T05:56:55.420Z - Hash: 7af40beb75c73ecdc1c9 - Time: 523ms

? Compiled successfully.

ご覧のとおり、アプリケーションが起動し、locahostのポート4200でリッスンしています。

CTRL + Cを押しますアプリケーションを停止します。

特定のIPアドレスまたはポートでアプリケーションを起動する場合は、次のコマンドを実行します。

ng serve --host 0.0.0.0 --port 3000

次の出力が得られるはずです：

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.69 MB
polyfills.js        | polyfills     | 128.74 kB
main.js             | main          |  56.94 kB
runtime.js          | runtime       |   6.15 kB
styles.css          | styles        | 119 bytes

                    | Initial Total |   2.87 MB

Build at: 2021-04-07T05:58:19.494Z - Hash: d50a7bd2c684713d3b6b - Time: 11348ms

** Angular Live Development Server is listening on 0.0.0.0:3000, open your browser on http://localhost:3000/ **

? Compiled successfully.

アクセスAngularアプリケーション

この時点で、Angularアプリケーションが起動し、すべてのネットワークインターフェイスのポート3000でリッスンします。これで、URL http：// your-server-ip：3000を使用してアクセスできます。 次のページにアプリケーションが表示されます：

結論

おめでとう！これで、AngularがCentOS 8に正常にインストールされました。これで、Angularを使用した最初のアプリケーションの構築を開始し、本番環境にデプロイできます。