Angularのビルドとデプロイ方法を解説【Tomcat、Apache、Nginx】

どうもこんにちはコウヘイです。

以下のような疑問を持ちました。

今回はこういった疑問に答えます。

著者情報

この記事を書いている僕ですが、Javaをメインにバックサイド開発を7年ほど経験しています。
最近フロントサイドにAngular、バックサイドにSpringBootを使用したSPA（シングルページアプリケーション）を作成する案件で働き始めたので、Angular学習を開始しました。

こんな僕が解説していきます。

Angularのビルドとデプロイ方法を解説

今回は以下の順番で解説していきます。

順に説明します。

ビルド・デプロイの必要性

ビルドとデプロイの方法を学ぶ前に、必要性について言及しておきます。

Angular CLIには以下のコマンドでアプリケーションを動作させることができます。

このコマンドによって、アプリケーションを動かすことができるので本番環境でも同じだと勘違いしている方もいると思います。

しかし、本番環境では今回紹介するビルド・デプロイ方法でアプリケーションを動かすことになります。

ng serveはメモリ上にビルド、ソース変更時は即時に変更が画面上に反映されます。
つまり、開発を高速化するために用意された機能だと思います。

なので、本番環境でアプリケーションを動かしたい場合は今回紹介するビルド・デプロイ方法を知っておく必要があります。

では、実際に学んでいきましょう！

Angularのビルド方法

Angular CLIコマンドを実行することで、ビルドが可能です。

デフォルトでは開発環境向け、本番環境向けのビルド方法があります。

それぞれの設定ファイルを読み込んで、ビルドします。

この設定ファイルで環境ごとの設定が可能になります。

よく使うオプション

次にビルド時によく使うオプションを記載しておきます。

順に説明します。

その①：–output-path（angular.jsonでも指定可能）

–output-pathで指定したディレクトリにビルドされたソースが出力されます。
※–output-pathを指定しない場合はデフォルトの./distディレクトリに出力されます。

※./outputディレクトリにソースが出力されます。

その②：–source-map

本番環境用にビルドしたソースで、デバックができるようになる？
➔ぶっちゃけよくわかっていないです。調査中です。

※–source-mapについて、調査して以下の記事にまとめました！気になる方は参考にしてみてください。

その③：–base-href

ルーティングのベースとなるディレクトリを指定します。
index.htmlののpathを指定します。

※「–base-href」については、これ以降に説明するデプロイ方法でも使用しているのでイメージできるかと思います。

Angularのデプロイ方法

ビルドしたソース群をWebサーバに配置することでブラウザ上で表示することが可能になります。

当たり前ですが、各WEBサーバごとにデプロイ方法は異なります。

今回は以下のWebサーバのデプロイ方法をまとめたいと思います。

順に説明します。

その①：Tomcat(Webサーバの機能を使用)

今回は「http://localhost:8080/myapp/」をルートディレクトリにする場合を解説します。

手順１：ビルド実行

まず、Tomcatにデプロイするためには以下のビルドをする必要があります。

大事なのは「–base-href=./」です。うまく説明できませんが、tomcatの場合はこうしないと404エラーになってしまいます。

手順２：warファイル作成

次にビルドして作成されたdistディレクトリ(今回はデフォルト)に出力されたファイルをwar形式に圧縮します。

ここで大事なのは、warファイルの名前です。この名前が「http://localhost:8080/myapp/」の「myapp」箇所になります。

手順３：Tomcatにデプロイ

次に、tomcatにデプロイしていきます。

tomcatのwebapps配下に上記で作成したmyapp.warを配置します。

tomcatが起動していると、自動でwarファイルが展開されてアクセス可能になります。（自動で展開されない設定になっている場合はtomcatを再起動してください）

このようにwebapps配下にmyappディレクトリが作成されます。

これで「http://localhost:8080/myapp/」にアクセスすればアプリケーションが表示されると思います。

※ちなみにビルドで指定した「–base-href=./」を「–base-href=./test」とした場合は「http://localhost:8080/myapp/test」にアクセスすることでアプリケーションが表示されます。

その②：Apache

Apacheの場合も「http://localhost:8080/myapp/」にアクセスする場合でデプロイしてみます。

手順１：ビルド実行

まず、Apacheにデプロイするためには以下のビルドをする必要があります。

重要なのは「–base-href=/myapp/」です。
「http://localhost:8080/myapp/」の「myapp」箇所を指定します。

手順２：Apacheにデプロイ

ApacheのデプロイはDocumentRootにアプリケーションを配置することになります。

DocumentRootは以下ファイルに記述されています。

今回は「http://localhost:8080/myapp/」にアクセスした場合なので、DocumentRootに記載してあるディレクトリ直下に「myapp」ディレクトリを作成し、ビルドしたソース一式をmyappディレクトリに配置します。

これで「http://localhost:8080/myapp/」にアクセスすればアプリケーションが表示されると思います。

※ポイント：ビルド時に–base-hrefに指定した値とDocumentRoot直下に作成したディレクトリ名が一致している必要があります。

その③：Nginx

Nginxの場合も「http://localhost:8080/myapp/」にアクセスする場合でデプロイしてみます。

手順１：ビルド実行

まず、Nginxにデプロイするためには以下のビルドをする必要があります。

重要なのは「–base-href=/myapp/」です。
「http://localhost:8080/myapp/」の「myapp」箇所を指定します。

手順２：Nginxにデプロイ

NginxのデプロイはApache同様DocumentRootにアプリケーションを配置することになります。

DocumentRootは以下ファイルに記述されています。

今回は「http://localhost:8080/myapp/」にアクセスした場合なので、DocumentRootに記載してあるディレクトリ直下に「myapp」ディレクトリを作成し、ビルドしたソース一式をmyappディレクトリに配置します。

※ポイント：ビルド時に–base-hrefに指定した値とDocumentRoot直下に作成したディレクトリ名が一致している必要があります。

というわけで今回は以上です。

ビルド・デプロイを知ることで、実際にアプリケーションを本番環境で動かすことができるようになりました。
次回からは実際にアプリケーションを作成していこうと思います。

おすすめ記事：無料あり：Angular学習におすすめの本【AngularJSとの違いに注意】