Cloud9でAngular-CLIの開発環境を構築する

  • 1
    Like
  • 0
    Comment

ブラウザ上で動作し,共同開発が簡単にできるIDEのCloud9上で,Angular-CLIの開発環境を構築します.

Worspaceを作る

Create a new workspaceから,名前を入力し,テンプレートはBlankを選択してCreate workspaceをクリックします.

Node.jsのバージョンを上げる

デフォルトでインストールされているNode.jsとNPMのバージョンを確認します.

$ node -v
v6.11.2
$ npm -v
3.10.10

Angular-CLIにはNode.js 6.9.0以上,NPM 3以上が必要なので,NVMを使って新しいバージョンのNode.jsをインストールします.Cloud9にはデフォルトでNVMがインストールされているので,以下のコマンドを実行してNode.js 6.9.0をインストールします.

$ nvm install v6.9.0
Downloading https://nodejs.org/dist/v6.9.0/node-v6.9.0-linux-x64.tar.xz...
######################################################################## 100.0%
Now using node v6.9.0 (npm v3.10.8)

Node.js 6.9.0がインストールされていることを確認します.

$ node -v
v6.9.0

Angular-CLIをインストールする

公式の説明に従って,Angular-CLIをインストールします.仮想環境なので,-gオプションを付けてグローバルモードでインストールします.メモリが512MBでは,結構時間が掛かります.

$ npm install -g @angular/cli

プロジェクトを作る

$ ng new PROJECT-NAME
$ cd PROJECT-NAME

ここまでは公式と同じです.サーバーを立ち上げる時に,公式と同様に,

$ ng serve

と入力するだけでは,立ち上げたサーバーに接続できないので,以下のコマンドでサーバーを立ち上げます.workspacenameとusernameは適宜読み替えて下さい.

$ ng serve --host 0.0.0.0 --public workspacename-username.c9users.io

ブラウザでhttps://workspacename-username.c9users.ioにアクセスし,Welcome to app!のページが表示されたら成功です.
サーバーを立ち上げるシェルスクリプトを書くと楽です.

serve.sh
#!/bin/bash
ng serve --host 0.0.0.0 --public workspacename-username.c9users.io