cloud9でAngularの学習を進めるまで(環境構築等)
環境構築
まずはcloud9を開いてプロジェクトの作成。 https://console.aws.amazon.com/cloud9/home 無料でプロジェクトが作成できるが、初回はクレジットカードの登録が必要。
以下のQiitaが参考になる。おおよそはこれに沿ってやっていけばOK。 https://qiita.com/siro33950/items/3e4ab29deef8d97ef00a https://qiita.com/siro33950/items/005790021823bc2afef0
nodeとnpmのバージョンを確認。
ec2-user:~/environment $ node --version v6.14.3 ec2-user:~/environment $ npm --version 3.10.10
その後
// Angular-CLIをインストール npm install -g @angular/cli // Angular-CLIを利用してプロジェクトを作成 ng new アプリ名
Angular-CLIをインストールし、プロジェクトを作成しようとしたのですが、
You are running version v6.14.3 of Node.js, which is not supported by Angular CLI v6. The official Node.js version that is supported is 8.9 and greater. Please visit https://nodejs.org/en/ to find instructions on how to update Node.js.
とエラーが出たので、7/30現在のnode.js推奨版の8.11.3をインストール。 https://nodejs.org/ja/
$ nvm install v8.11.3 ec2-user:~/environment $ node --version v8.11.3
再度プロジェクトの作成。 しかし、
ec2-user:~/environment $ ng new アプリ名 bash: ng: command not found
ということなので、再度Angular-CLIをインストール
// Angular-CLIをインストール ec2-user:~/environment $ npm install -g @angular/cli ec2-user:~/environment $ ng new アプリ名
プロジェクトが作成完了し、cd アプリ名
で移動。
アプリの実行
アプリの実行も以下の記事を参考にしていった https://qiita.com/siro33950/items/005790021823bc2afef0 しかし、以下のようにオプションが使えないと表示されてしまいアクセスできない。
$ ng serve --public https://xxxxxxxx.vfs.cloud9.ap-southeast-1.amazonaws.com Unknown option: '--public'
https://www.youtube.com/watch?v=n0y0JX0S2Go このYouTubeに習って以下のようにしてもアクセスできた。
ng serve --host 0.0.0.0 --port 8080 --disableHostCheck
しかし、あまりよくない感じはするが特に何もするなく立ち上げまでできたので、あまり気にならなければこれでいい気がする。
package.jsonで指定しておくと楽でいい。
{ "name": "angular-cal", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve --host 0.0.0.0 --port 8080 --disableHostCheck", // 追記 "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, // 以下略
すると以下だけで実行できる。
npm run start