Angular2のファイルをSpring Bootのプロジェクトファイルと統合する #SpringBoot

参考にしたのはこちらのstack overflow
です

前提〜それぞれのプロジェクト作成する

Angular2: Angular Cli
Spring: Spring Initializer

でそれぞれ作成して、そのあとにフォルダを統合したい、というのが今回の記事の話題です。

統合の理由

そのままそれぞれ別のサーバで動作させる、とかAngularでProxyの設定をするという運用もあるかと思うのですが、Web UIもWeb APIも自社で作成するので、一つのWebサーバにする、一つのサーバプロセス（Tomcat）を監視する、それをAWSのElastic Beanstalkにデプロイしたら便利かな、と考えたのが始めです。

他に便利な運用があれば、統合しなくてもよいのかもしれないです。

フォルダ構成

Spring Initializerやmavenで、Web Applicationプロジェクトの雛形を生成して、そのフォルダにangular2のフォルダを移動させます。

階層1	階層2	階層3	階層4	説明
main
	src
		java
		angular2		★angular2のプロジェクトルートフォルダを置きます。この中にangular2プロジェクトの.gitignoreファイルも含んでいます。（後述）
		resources
			static	★ここをangular2のコンパイルのoutput先に指定します

手順

この構成を作成するときの手順です。

それぞれのプロジェクトフォルダを作成する
Angular2のコンパイル先フォルダを修正する
元のプロジェクトに対して、Gitに登録しないファイルが増えるので、.gitignoreを作成・追記・修正する
デプロイする際は、Angular2のソースを修正→ng buildコマンドを実行、それからSpringBootをwarファイルにする

Angular2のコンパイル先フォルダの修正

src/main/angular2/angular-cli.json

  "apps": [
    {
      "root": "src",
      "// outDir": "dist",
      "outDir": "../resources/static",
      "assets": [

上記jsonファイルの"outDir"がコンパイル先フォルダなので、これをSpringBootのWeb Applicationのドキュメントルートフォルダである、resources/staticに指定します。

angular-cli.jsonは、angular cliで雛形を生成すると、angular2のプロジェクトルートフォルダにあります。

注意点としては、ng buildでコンパイルしたときに、staticフォルダごと一回消して再生成するので、staticフォルダの中には何も入れてはいけないことです。

.gitignoreの追加・修正

angular2のプロジェクトルートフォルダに.gitignoreがあれば、それをそのまま他のソースと一緒にコピーして持ってきます。
そして、.gitignoreファイルをSpringBootプロジェクトのリポジトリに追加すれば、.gitignoreが有効に働きます。無視すべきフォルダについては、下記に.gitignoreの内容を引用します。

src/main/angular2/.gitignore


# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp

# dependencies
/node_modules

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

# misc
/.sass-cache
/connect.lock
/coverage/*
/libpeerconnection.log
npm-debug.log
testem.log
/typings

# e2e
/e2e/*.js
/e2e/*.map

#System Files
.DS_Store
Thumbs.db

Angular2プロジェクトのコンパイルソース出力先のresources/staticも、リポジトリの管理から外します。

src/main/resources/.gitignore

# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/static
/tmp

# dependencies

#System Files
.DS_Store
Thumbs.db

これで設定は完了です。ng build後にwarファイルを作成、デプロイして動作確認をしてください。