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

開発環境

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のアプリケーションを作成するも参考にしてください。前回の記事で作成したSpring Bootのプロジェクトに、Angularのプロジェクトを組み込んでいきます。IntelliJ IDEAを使ったMavenのビルド方法なども同じです。

上記に加えて、Node.jsとAngular CLIの環境をAngularのドキュメントを参考に用意してください。

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

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

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

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

Application.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のドキュメントにしたがって、アプリケーションを作成していきます。

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

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

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

$ 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を選択します。

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

$ 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のアプリケーションをサーブして実行できるか確認します。

cd client/
ng serve --open

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

$ 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のアプリケーションが起動できていることを確認できます。

angular.jsonの編集

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

{
  "$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の編集ができたら、コマンドプロンプトからビルドを実行します。

ng build

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

$ 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/に出力されていることを確認します。

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

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

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

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: 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アプリケーションの実行で確認した画面が表示されます。

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

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

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

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