4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-10-14

ブラウザ上で動作し,共同開発が簡単にできる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
4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?