Angular環境をAWS Cloud9にサクッと構築

Angularを仕事で触ることになりました。Webだと最近はLaravel(php)やGatsbyJS(ReactJS)と楽しく戯れていたのですが、いよいよノータッチだったAngular(TypeScript)を勉強せねばならなくなりました。

AWS Cloud9にワークスペースを作る

デフォルト設定のままワークスペースを立てます。 基本的にはボタンをぽちぽち押していけば立てられますが、AWS Cloud9 の IDE チュートリアル - AWS Cloud9に詳しく記載されています。不安な方は参照してください。

Angularの設定

Node.js,npmのインストール

Cloud9はワークスペースを立てた段階でnodeもnpmも入っています。不安な方はnode -vとnpm -vを入れてみてください、バージョンが出力されれば成功です。

Angular CLIとは

Angularアプリのプロジェクト生成や実行などが行える公式のコマンドラインツールです。 ngから始まるコマンドはこのAngular CLIが入った環境で機能するコマンドです。(Angularだから「an」とかじゃないんですね、私の脳みそ安直？)

Angular CLIのインストール

たった一行だけです。

npm install -g @angular/cli

はい、この記事終わりです。 まとめ

? Would you like to share anonymous usage data with the Angular Team at Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more details and how to change this setting, see http://angular.io/analytics. (y/N)

統計情報を提供するか聞かれます。お好みで選択してください。

(エラー)Git CloneしたプロジェクトがCloud9上でビルドできない

公式のプロジェクトはもちろん、他のCloud9ワークスペースのプロジェクトをGit cloneしてきてもダメでした。 今回このエラーを解決する時間がもったいなかったので必要なファイルをコピペしてAngularの勉強に励みました。 ちょっと不便だなぁ…

Angularプロジェクトの作成

Angular CLIがあればgit cloneできなくても大丈夫！すぐにビルドできる状態の新規プロジェクトをコマンド一つで作成してくれます。

ng new sample

作成できたら

cd sample

でプロジェクトの中に移動します。

Angularプロジェクトのビルド

今はただのフォルダ群ですが、何も変更を加えなくてもビルドが可能です。 ｢Hello World!｣さえ打たなくていいのはありがたいです。

ng serve --host 0.0.0.0 --port 8080 --disableHostCheck

ローカルにAngular環境を作る時にはng serveだけでいいのですが、Cloud9はホスト名やポートの設定が必要なようです。

--public 自身のホスト名.c9users.ioをつけるのが良さそうですが長すぎて試してすらいません

package.jsonにコマンドを登録

package. jsonでコマンドを登録しておくとnpm startだけで動くようになって非常に便利です。

が、私はなぜかエラーで弾かれます。 ng serveを打った時と同じエラーなのでうまく変えられてないんですかね？

まとめ

Angular環境を整えたワークスペースがサクサク作れるのですぐに開発の勉強に入れました。 Cloud9ワークスペースにGit環境を導入する方法を紹介していますのでこちらもぜひご覧ください。