Angularは、モバイルおよびデスクトップWebアプリケーションを構築するためのオープンソースのWebアプリケーションフレームワークです。 TypeScript / JavaScriptで書かれており、2009年にGoogleによって作成されました。小規模から大規模のアプリケーションをゼロから構築するために特別に設計されています。 Angularアプリケーションの作成、管理、構築、テストに役立つAngularCLIユーティリティが付属しています。
このチュートリアルでは、Ubuntu20.04にAngularをインストールする方法を紹介します。
- Ubuntu20.04を実行しているサーバー。
- ルートパスワードはサーバーで構成されています。
Node.jsをインストール
開始する前に、Node.jsとnpmをシステムにインストールする必要があります。デフォルトでは、最新バージョンのNode.jsはUbuntu20.04のデフォルトリポジトリでは利用できません。そのため、Node.jsリポジトリをシステムに追加する必要があります。
まず、次のコマンドを使用してNode.jsリポジトリを追加します。
curl -sL https://deb.nodesource.com/setup_14.x | bash -
追加したら、次のコマンドを使用してNode.jsをインストールします。
apt-get install nodejs -y
インストールしたら、次のコマンドを使用して、インストールされているNode.jsのバージョンを確認します。
node --version
次の出力が表示されます。
v14.7.0
次に、次のコマンドを実行して、npmバージョンを最新バージョンに更新します。
npm install [email protected] -g
次に、次のコマンドを使用してnpmのバージョンを確認します。
npm --version
次の出力が得られるはずです：
6.14.7
以下に示すように、npmを使用してAngularをインストールできます：
npm install -g @angular/cli
インストールしたら、次のコマンドを使用して、インストールされているAngularのバージョンを確認します。
ng version
次の出力が表示されます。
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ ? \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 10.0.5
Node: 14.7.0
OS: linux x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1000.5
@angular-devkit/core 10.0.5
@angular-devkit/schematics 10.0.5
@schematics/angular 10.0.5
@schematics/update 0.1000.5
rxjs 6.5.5
この時点で、Angularがシステムにインストールされています。 Angularで新しいプロジェクトを作成する時が来ました。
まず、ディレクトリを/ optに変更し、次のコマンドを使用してmyprojectという名前の新しいプロジェクトを作成します。
cd /opt
ng new myproject
次に、ディレクトリをmyprojectに変更し、次のコマンドを使用してプロジェクトを提供します。
cd myproject
ng serve --host your-server-ip --port 8088
次の出力が表示されます。
WARNING: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.
Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.65 MB [initial] [rendered]
Date: 2020-08-09T14:10:36.644Z - Hash: a053188b5496361814a2 - Time: 14873ms
** Angular Live Development Server is listening on 69.87.218.220:8088, open your browser on http://69.87.218.220:8088/ **
: Compiled successfully.
AngularWebインターフェイスにアクセス
この時点で、Angularプロジェクトがデプロイされ、ポート8088でリッスンしています。URLhttp：// your-server-ip：8088を使用してアクセスできます。次の画面が表示されます。
おめでとう！これで、Ubuntu20.04にAngularが正常にインストールされました。これで、Angularを使用して最初のプロジェクトのデプロイを開始できます。 Angularの優れた機能の1つは、変更をライブでデプロイして多くの時間を節約するWebpackホットリロードです。