Angular Webアプリ開発入門20

はじめに

今まで、コマンドラインから「ng serve –open」と入力し、Angularが持つ内部Webサーバーを使って、アプリケーションの動作確認をしてきた。この方法ではレンタルサーバーなどのWebアプリケーションを配置することができない。なぜなら、TypeScriptからJavaScriptへのコンパイルが、この内部サーバーによって行われているからである。今回はWebサーバーでAngularアプリを動かす方法を学んでいく。

Webサービスで動かすには

TypeScriptはコンパイルしてJavaScriptに変換することで、Webブラウザで動作する。これまでコンパイルしなくて済んだものは、内部サーバー「ng serve –open」がその処理をしていたためである。
レンタルサーバーなどのWebサーバーで動かすためには、プロジェクト群を、JavaScriptファイルとそれを呼び出すHTMLファイルに分ける必要がある。
この作業を「ビルド」という。逆に、元のTypeScriptファイルは不要である。

ビルドする

ビルドするには「ng build」というコマンドを使う。するとレンタルサーバーなどに配置する必要となるファイル一式が作れる。ビルドには2つのモードがある。下記である。

①developmentモード
開発に使うモード。元のTypeScriptのファイルを維持するように変換する。
Sourcemap(ソースマップ)ファイルと呼ばれるデバッグ用のファイルを作成し、Webサーバーに配置した状態で、ソースを確認しながらデバッグできる。


②productionモード
本番稼働に使うモード。不要なコードを排除し、ファイルサイズが小さく、また実行効率が良くなるように調整されている。

プロジェクトをビルドしてみる

実際にビルドしてみる。「–prod」はproductionモードにするためのオプションである。このオプションがナイトdevelopmentモードになる。

ng build –prod

ビルドが終わると、プロジェクトフォルダ内に「dist」というフォルダができる。このフォルダの中身がビルドして一式である。Webで動かすには、このフォルダの中身一式だけが必要である。
例えば、distの中にはindex.htmlや各種JavaScriptファイルが格納されている。
productionモードでビルドした場合。distディレクトリに生成されるファイルは人間にとって非常に読みずらいものとなっている。読もうとはしないほうがいい。

終わりに

今回はWebサーバーでAngularアプリを動かす方法を学んだ。

今までAngular Webアプリ開発入門として、テンプレート、コンポーネント、サービスといったAngular特有の仕組みについて学んだ。

また、実際に「足し算アプリ」「料理レシピ表示アプリ」「検索機能」を作りながら、Angularの基本を学ぶことができた。

これで、Angular Webアプリ開発入門としては学び終えたこととなる。今後は実際にアプリを作ったり、次の参考書を読むなどして、また記事をまとめていこうと思う。

 

 

コメント