Angular+Spring BootのアプリケーションをIntelliJ IDEAを使ってMavenでビルドする

## 開発環境
- macOS Caralina 10.15.6
- OpenJDK 14.0.2
- maven 14.0.1
- Spring Boot 2.3.2
- IntelliJ IDEA
- Node.js 12.18.3
- Angular CLI 10.0.5
- Angular 10.0.8
- Visual Studio Code

## 事前準備
Spring Bootの開発環境がない場合は、前回の記事 [IntelliJ IDEAを使ってSpring Bootのアプリケーションを作成する](https://qiita.com/masayuki_200801/items/6a3be801211257934864#comments) も参考にしてください。前回の記事で作成したSpring Bootのプロジェクトに、Angularのプロジェクトを組み込んでいきます。IntelliJ IDEAを使ったMavenのビルド方法なども同じです。

上記に加えて、Node.jsとAngular CLIの環境を[Angularのドキュメント](https://angular.jp/guide/setup-local)を参考に用意してください。

パスおよびバージョンの確認方法

- Node.js ... `node -v`
- Angular CLI、Angular ... `ng --version`

## Spring Bootアプリケーションの作成

`src/main/java/org/example/Application.java`を作成します。プロジェクトの階層構造は`pom.xml`に記述した`groupId`と一致させます(正しく設定しないとビルドエラーとなります)。

Application.javaには以下のコードを作成します。

```java:Application.java
package org.example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

	public static void main(String[] args){
		SpringApplication.run(Application.class, args);
	}
}
```

## Angularアプリケーションの作成
### プロジェクトの作成

[Angularのドキュメント](https://angular.jp/guide/setup-local)にしたがって、アプリケーションを作成していきます。

コマンドプロンプトから、Spring Bootのプロジェクトの`src/main`へ移動して、`ng new client`でプロジェクトを作成します。今後、Angularを使ったフロントエンドの開発はこのディレクトリで行います。

```sh
$ ng new client
? Would you like to add Angular routing? (y/N) 
```

`y`でも`N`でもどちらでも良いです。

```sh
$ ng new client
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? 
  CSS 
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ] 
  Stylus [ http://stylus-lang.com                                         ] 
```

SCSSを選択します。

プロジェクトの作成が終わると以下のメッセージが出力されます。

```sh
$ ng new client
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE client/README.md (1024 bytes)
CREATE client/.editorconfig (274 bytes)
CREATE client/.gitignore (631 bytes)
CREATE client/angular.json (3654 bytes)
CREATE client/package.json (1249 bytes)
CREATE client/tsconfig.base.json (458 bytes)
CREATE client/tsconfig.json (426 bytes)
CREATE client/tslint.json (3184 bytes)
CREATE client/.browserslistrc (853 bytes)
CREATE client/karma.conf.js (1018 bytes)
CREATE client/tsconfig.app.json (292 bytes)
CREATE client/tsconfig.spec.json (338 bytes)
CREATE client/src/favicon.ico (948 bytes)
CREATE client/src/index.html (292 bytes)
CREATE client/src/main.ts (372 bytes)
CREATE client/src/polyfills.ts (2835 bytes)
CREATE client/src/styles.scss (80 bytes)
CREATE client/src/test.ts (753 bytes)
CREATE client/src/assets/.gitkeep (0 bytes)
CREATE client/src/environments/environment.prod.ts (51 bytes)
CREATE client/src/environments/environment.ts (662 bytes)
CREATE client/src/app/app-routing.module.ts (245 bytes)
CREATE client/src/app/app.module.ts (393 bytes)
CREATE client/src/app/app.component.scss (0 bytes)
CREATE client/src/app/app.component.html (25757 bytes)
CREATE client/src/app/app.component.spec.ts (1059 bytes)
CREATE client/src/app/app.component.ts (211 bytes)
CREATE client/e2e/protractor.conf.js (869 bytes)
CREATE client/e2e/tsconfig.json (299 bytes)
CREATE client/e2e/src/app.e2e-spec.ts (639 bytes)
CREATE client/e2e/src/app.po.ts (301 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
```


### アプリケーションの実行
Angularのアプリケーションをサーブして実行できるか確認します。

```sh
cd client/
ng serve --open
```

サーブできると以下のメッセージが表示されます。

```sh
$ ng serve --open
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.9 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.65 MB [initial] [rendered]
Date: 2020-08-10T09:05:15.827Z - Hash: 01fc222c49ed86d5282a - Time: 13820ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
```

この状態で`http://localhost:4200`へアクセスすると、Angularのアプリケーションが起動できていることを確認できます。

![Angualrのサーブ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684932/01248cc4-f2ca-710d-d427-50e5241040a1.png)


### angular.jsonの編集

`src/main/client/angular.json`を編集していきます。
Angularのアプリケーションをビルドした際に、Angularプロジェクトの資源が、Spring Bootプロジェクトの静的ファイルのフォルダに出力されるようにパスを指定します。
angular.jsonの`projects.client.architect.build.options.outputPath`の値が`dist/client`となっているので、`../resources/public`に変更します。

```json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "client": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../resources/public",
			...
			(省略)
		  }
		}
	  }
	}
  }
}
```


### アプリケーションのビルド

angular.jsonの編集ができたら、コマンドプロンプトからビルドを実行します。

```sh
ng build
```

ビルドが終わると、以下のメッセージが出力されます。

```sh
$ ng build

chunk {main} main.js, main.js.map (main) 59.2 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.9 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.31 MB [initial] [rendered]
Date: 2020-08-10T09:18:56.695Z - Hash: 8d6e5f1d928e8568b294 - Time: 16474ms
```

ビルドしたAngularの資源がSpring Bootプロジェクトの`src/resources/public/`に出力されていることを確認します。

![Angularのビルド資源.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684932/b63dd079-7410-2b17-17bb-a155a98cac84.png)


## Spring Bootアプリケーションの実行

IntelliJ IDEAを使って、作成したSpring Bootのアプリケーションを実行します。

![SpringBootの実行.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684932/c40c2415-2582-a560-b097-af9d49fc52fb.png)


Spring Bootのアプリケーションの実行が成功すると、コンソールに以下のメッセージが出力されます。

```sh
  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v2.3.2.RELEASE)

2020-08-10 18:23:14.453  INFO 12759 --- [           main] org.example.Application                  : Starting Application on maa with PID 12759 (/Users/masayuki/Documents/program/spring-boot-app/target/classes started by masayuki in /Users/masayuki/Documents/program/spring-boot-app)
2020-08-10 18:23:14.466  INFO 12759 --- [           main] org.example.Application                  : No active profile set, falling back to default profiles: default
2020-08-10 18:23:19.323  INFO 12759 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8080 (http)
2020-08-10 18:23:19.389  INFO 12759 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2020-08-10 18:23:19.389  INFO 12759 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.37]
2020-08-10 18:23:19.692  INFO 12759 --- [           main] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2020-08-10 18:23:19.693  INFO 12759 --- [           main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 4902 ms
2020-08-10 18:23:20.663  INFO 12759 --- [           main] o.s.s.concurrent.ThreadPoolTaskExecutor  : Initializing ExecutorService 'applicationTaskExecutor'
2020-08-10 18:23:21.054  INFO 12759 --- [           main] o.s.b.a.w.s.WelcomePageHandlerMapping    : Adding welcome page: class path resource [public/index.html]
2020-08-10 18:23:21.448  INFO 12759 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2020-08-10 18:23:21.481  INFO 12759 --- [           main] org.example.Application                  : Started Application in 9.494 seconds (JVM running for 12.194)
2020-08-10 18:24:38.799  INFO 12759 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring DispatcherServlet 'dispatcherServlet'
2020-08-10 18:24:38.803  INFO 12759 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Initializing Servlet 'dispatcherServlet'
2020-08-10 18:24:38.861  INFO 12759 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Completed initialization in 58 ms

```

この状態で`http://localhost:8080`へアクセスすると、[Angularアプリケーションの実行](#angularアプリケーションの実行)で確認した画面が表示されます。

## Angualr+Spring Bootのアプリケーションをビルド

IntelliJ IDEAでSpring Bootのアプリケーションをビルドします。

![maven_package.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684932/e9a6f4dc-e536-99c2-f685-fee668174c2b.png)

作成されたJARファイルを`java -jar [JARファイル名]`で実行します。再度`http://localhost:8080`へアクセスし、[Angularアプリケーションの実行](#angularアプリケーションの実行)で確認したAngularの画面が表示されることを確認します。


以上でAngularの静的ファイルを含んだSpring Bootのアプリケーションを、IntelliJ IDEAを使って実行し、Mavenでビルドできることを確認しました。
次回からは、この環境と構成を使ったアプリケーションの開発について投稿していきます。