AWS Cloud9でAngularアプリ開発(後編)

はじめに

前編ではCloud9の環境構築をおこなったので、今回は実際にAngularの環境構築～実行までを行おうと思います。

node, npmのバージョンを確認

Angular-CLIは現状、nodeが6.9.0以上、npmが3.0.0以上必要なので、まずはバージョンの確認をします。
Cloud9にはIDE上にコンソールがあるので、そこにコマンドを入力すれば確認できます。

Cloud9はデフォルトでnodeが6.12.3、npmが3.10.10がインストールされているので問題なさそうです。

ちなみに、Cloud9ではワークスペース毎にEC2インスタンスが違うので、ワークスペースを別に立てればインストールされたモジュールを共有しなくてもよくなります。
つまり、今まで一台のPCではNodeなどのバージョン管理が大変でしたが、Cloud9を利用すればバージョン毎にワークスペースを立てれば済むようになるわけです。

Angular-CLIのインストール

Angularの開発にはかかせないAngular-CLIをインストールします。
Cloud9のコンソールに公式に記載されている通りに入力します。

npm install -g @angular/cli

体感で1分ほどでインストールが完了しました。

Angularプロジェクトの作成

Angular-CLIを利用してプロジェクトを作成します。
sample-angular-appの部分には作成するアプリ名が入るので、適宜読み替えてください。

ng new sample-angular-app
cd sample-angular-app

今回は2分ほどで完了しました。

Angularアプリを実行

まずは公式の通り以下のコマンドで起動してみます。

ng serve

起動したら、上部にあるPreview -> Preview Runnig Applicationを選択して、起動した画面を見てみます。

すると、「Invalid Host header」と表示されて失敗します。
これは、ホスト名が指定されたものと違うことが原因のようなので、ホスト名を明示して起動してみます。
ng serveのオプションの--publicを利用することでホスト名を明示することができます。
指定するホスト名には、Preview用ブラウザに記載されているURLをそのまま利用します。

ng serve --public https://xxxxxxxx.vfs.cloud9.ap-southeast-1.amazonaws.com

今度は上手くアクセスすることができました。
理由はわかりませんが、初回アクセス時にはロードに時間がかかるので辛抱強く待ちましょう。

起動コマンドをpackage.jsonに記載する

毎回URLを記載するのは面倒なので、起動コマンドをpackage.jsonに記載して省略出来るようにします。
今回修正するscriptの部分は、プロジェクトを作成した直後では以下の内容です。

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

この、"ng serve"のコマンドに --public https://xxxxxxxx.vfs.cloud9.ap-southeast-1.amazonaws.comを追加します。
修正後は以下のようになります。

  "scripts": {
    "ng": "ng",
    "start": "ng serve --public https://xxxxxxxx.vfs.cloud9.ap-southeast-1.amazonaws.com",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

修正を保存したら、実際に利用できるかを試してみましょう。
package.jsonで修正するのはnpmのコマンドなので、以下のコマンドで起動します。

npm run start

無事起動することが確認できました。

おわりに

前編から、AWS Cloud9を利用してAngularアプリの開発環境構築を行いました。
Cloud9を利用することで簡単に開発を始められるので、今後プロト等作成する時には積極的に利用していきたいです。