AngularのQuickStart

Angularを触ってみるため公式チュートリアルをやってみました。日本語版がないのでここに備忘録を兼ねて纏めていきます。  今回はまず、QuickStartです。私はAmazon Linuxを使っています。

QuickStartの実施

所要時間：約15分

Amazon Linuxのバージョン（参考）

Amazon Linux AMI 2017.09.0 (HVM), SSD Volume Type - ami-2a69be4c

node.jsのインストール

cd /tmp
curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -
sudo yum -y install nodejs
sudo yum -y install gcc-c++ make

node.jsのバージョン確認

QuickStartには最低でもnode.6.9.xとnpm3.x.xが必要と書いてあります。 

node -v
v8.6.0

npm -v
5.3.0

npmのデフォルトディレクトリ変更

Amazon Linux以外では不要かもしれません。 参考URL

cd
mkdir .npm-global
npm config set prefix '~/.npm-global'
vi .bash_profile

PATHを通す

- PATH=$PATH:$HOME/.local/bin:$HOME/bin
+ PATH=~/.npm-global/bin:$PATH:$HOME/.local/bin:$HOME/bin

.bash_profileを再読込してパスを有効化

source .bash_profile

Angular

インストール

npm install -g @angular/cli

QuickStartのアプリ作成

ng new my-app

アプリのビルドとウェブサーバ起動

cd my-app
ng serve --host=0.0.0.0 --public=グローバルIPもしくはFQDN

EC2の設定変更

4200番ポートへの接続を許可する

確認

http://グローバルIP:4200/

をブラウザで開く。

こちらの画面が出れば、QuickStart完了です：