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

💡この記事は２年以上前に投稿しました。AWS Cloud9は2024年7月25日に新規受付を終了しました。

代替サービス等の情報について、以下の回答がおすすめです。

またAWSのホスティングサービスであれば、AWS Amplifyがあります。

Github リポジトリを紐づけて、Webアプリケーションのデプロイが可能です。

便利なサービスですので、検討してみてください。

Angularを仕事で触ることになりました。

Webだと最近はLaravel(PHP)やGatsbyJS(ReactJS)と楽しく戯れていましたが、いよいよノータッチだったAngularを勉強せねばならなくなりました。

ワークスペースを作る

デフォルト設定のままワークスペースを立てます。

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

Angularの設定

Cloud9はワークスペースを立てた段階でnodeもnpmも入っています。

不安な方はnode -vとnpm -vコマンドを入力してみてください、バージョンが出力されれば成功です。

Angular CLI

Angular CLIとは、Angularアプリのプロジェクト生成や実行などが行える公式のコマンドラインツールです。

ngから始まるコマンドはこのAngular CLIが入った環境で機能するコマンドです。

Angularだから「an」とかじゃないんですね。

グローバルにインストールしてください。

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)

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

Angularプロジェクトの作成

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

ng new sample

作成できたら

cd sample

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

Angularプロジェクトのビルド

今はただのフォルダ群ですが、何も変更を加えなくてもビルドが可能です。

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

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

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

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

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

公式のプロジェクトはもちろん、他のCloud9ワークスペースのプロジェクトをGit cloneしてきてもダメでした。

今回このエラーを解決する時間がもったいなかったので必要なファイルをコピペしてAngularの勉強に励みました。

ちょっと不便だなぁ…

このエラーで苦労するくらいなら、Angular公式ページでソースコードの解説でおなじみのStackBlitzや、CodeSandboxを使うのがおすすめです。

Angular環境を整えたワークスペースがサクサク作れるのですぐに開発の勉強に入れました。

Cloud9ワークスペースにGit環境を導入する方法を紹介していますのでこちらもぜひご覧ください。