angular
paiza

PaizaでAngularの開発環境を作りました

試してみたいAngularとPHPで作られたアプリがあったのですが、サーバー確保できず無料で使えるところを探していました。

cloud9が使えたら私も慣れていたので一番良かったのですが、Amazonと合併してAWSの中に入ったようで、サーバーを使うためにはAWSのEC2の費用が必要なので、諦めました。
自分でサーバーを確保できていたら、無料で使う方法もあるのですが。

今回は、このような背景があったので、Paizaのクラウドを使うことにしました。

paizaで環境を作る準備

Paizaのconsole画面に、ターミナルがあります。
node -v と npm -v コマンドで、バージョン確認すると回答が戻ってきます。

でも、グローバルでAngular CLIをインストールしようとすると、エラーになってインストールでいません。
そのため、フォルダを作りローカルで、nodeとnpmをインストールしてみました。
スクリーンショット 2018-05-09 16.36.25.png

https://nodejs.org/en/download/package-manager/
この中で、

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

作ったappのフォルダに移動して、ここに上記のコマンドを使ってインストールしました。

Angular CLIをインストール

https://angular.jp/guide/quickstart
にアクセスして、gのオプションを外してインストールしました。

npm install @angular/cli

この後初期のプロジェクトを作りました。

ng new my-app

サーブできました

cd my-app
ng serve --open

の代わりに

cd my-app
ng serve --disable-host-check

とターミナルから入力して、起動にサーブに成功しました。
スクリーンショット 2018-05-09 16.25.00.png

今回、スタックオーバーフローで教えてくださった人に、感謝しています。

また、念のためコマンドのパスが通っていないといけないので、こちらのページを参考にして対応しました。
http://shiro-goma.hatenablog.com/entry/2015/08/17/003440

こちらの記事も、参考になると思います。
https://tyablog.net/2017/05/13/cloud9-angular2/

PHPも忘れずに

今回は、PHPのソースが含まれているプロジェクトを使いたかったので、サーバーの設定で、PHPをインストールするようにしていました。

今回目的のパッケージのことに関しては、別の記事で下書き状態になっています。
こちらの記事で、改めて書き残したいと思います。