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

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

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

本シリーズは、Angularについて完全初心者の私がAngularをある程度使えるようになるまで頑張るをテーマに日々の作業ログを記録する内容になります。



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


・Angularのビルドとデプロイの方法を知りたい



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

著者情報

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

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

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

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

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

2.Angularのビルド方法

3.Angularのデプロイ方法



順に説明します。

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

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

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

ng serve



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

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

理由は「ng serve」はあくまで開発用だから。



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

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

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

Angularのビルド方法

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

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

開発環境向けビルド:ng build

本番環境向けビルド:ng build –prod



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

開発環境:src/environments/enviroment.ts

本環環境:src/environments/enviroment.prod.ts



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

よく使うオプション

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

その①:–output-path(angular.jsonでも指定可能)

その②:–sourceMap

その③:–base-href



順に説明します。

その①:–output-path(angular.jsonでも指定可能)

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

使用例:ng build –output-path=./output



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

その②:–sourceMap

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

使用例:ng build –prod –sourceMap

その③:–base-href

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

使用例:ng build –prod –base-href=/myapp/



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

Angularのデプロイ方法

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

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


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

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

その②:Apache

その③:Nginx



順に説明します。

※今回のOSは以下となります。
NAME=”Ubuntu”
VERSION=”18.04.2 LTS (Bionic Beaver)”

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

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

手順1:ビルド実行

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

ng build –prod –base-href=./



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

手順2:warファイル作成

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

cd dist/
jar cvf myapp.war .



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

手順3:Tomcatにデプロイ

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

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

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

drwxr-x— 3 kohei kohei 4096 Dec 15 17:51 myapp/
-rwxr-xr-x 1 kohei kohei 84436 Dec 15 17:51 myapp.war*



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

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

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

その②:Apache

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

手順1:ビルド実行

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

ng build –prod –base-href=/myapp/



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

手順2:Apacheにデプロイ

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


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

ファイル:/etc/apache2/sites-available/000-default.conf

該当箇所:DocumentRoot /var/www/html



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

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

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

その③:Nginx

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

手順1:ビルド実行

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

ng build –prod –base-href=/myapp/



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

手順2:Nginxにデプロイ

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

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

ファイル:/etc/nginx/conf.d/default.conf

該当箇所:

location / {
root /usr/share/nginx/html; ←これ
index index.html index.htm;
}



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

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



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

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


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