IntelliJ IDEAで複数モジュールのプロジェクトを作成する手順のメモ

# 概要

IntelliJ IDEAでは1つのプロジェクトに複数のモジュールを含めて管理することができます。この記事は複数モジュール(multiple modules)からなるプロジェクトを作成する手順のメモになります。

作成するプロジェクトのモジュールは、サーバー側の`Rest API`（Java + Spring Bootで開発）および`サービス`（Java + Spring Bootで開発）、フロント側の`SPA`（Vue.jsで開発）ですが、このように異なるアーキテクチャを採用したモジュールをひとまとまりで管理することができます。

※Mavenにもマルチモジュールという機能がありますが、これとは異なります。

**環境**

* Windows 10 Professional 1909
* IntelliJ IDEA 2019.2.4

**参考**

* [Modules - Help | Intellij IDEA] (https://www.jetbrains.com/help/idea/creating-and-managing-modules.html)

# プロジェクトとモジュール

プロジェクト名は `demo-multiple-modules﻿`とし、追加するモジュール名と役割は下記の通りになります。

|モジュール名|主アーキテクチャ               |build  |役割               |
|:----------|:-----------------------------|:-----|:-----------------|
|front      |Vue.js                        |npm   |ブラウザ上で動作するフロントアプリケーションです |
|api        |Spring Boot + WebFlux         |Maven |frontとservice1を連携するモジュール、frontからリクエストに応じて適切なサービスを呼び出します |
|service1   |Spring Boot + WebFlux + R2DBC |Maven |apiからのリクエストに応じてデータソース(DB)からデータを取得して返すモジュールです |

※`service1`は、`service2`～`serviceN`のように多数存在するという想定のモジュールです。下図はモジュールの連携イメージです。

```
                                                                  +----------+
                                                            (8081)| service1 | <----------------->
                                                        +-------> | module   |  access external
                                                        |         +----------+          datasource
                                                        |
 +---------+                 +------------+ <--- http --+         +----------+
 |  front  |           (8080)|            |                 (8082)| service2 | <----------------->
 |  module | <--- http ----> | api module | <--- http ----------> | module   | access external
 |         |                 |            |                       +----------+         datasource
 +---------+                 +------------+ <--- http --+
  (browser)                                             |         +----------+
  　                                                    |   (8083)| serviceN | <----------------->
                                                        +-------> | module   | access external
                                                                  +----------+         datasource
()内の数値はポート
```

最終的なディレクトリツリーは以下のようになります。

```text
/demo-multiple-modules             # プロジェクトルート
  |
  `--- /.idea
  |
  `--- /api                          # コンテンツルート
  |      |
  |      `--- /src
  |      `--- .gitignore
  |      `--- api.iml                  # モジュールファイル
  |      `--- pom.xml
  |
  `--- /front                        # コンテンツルート
  |      |
  |      `--- /node_modules
  |      `--- /public
  |      `--- /src
  |      `--- .gitignore
  |      `--- babel.config.js
  |      `--- front.iml                # モジュールファイル
  |      `--- package.json
  |      `--- package-lock.json
  |
  `--- /service1                     # コンテンツルート
         |
         `--- /src
         `--- .gitignore
         `--- service1.iml             # モジュールファイル
         `--- pom.xml
```




## プロジェクトの作成手順

Welcome画面の`Create New Project`を選択します。
![i01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/8dc1d960-af3f-cf9a-8ff9-6b5ec1f25fb7.png)

次の画面で`Empty Project`を選択し`Next`ボタンを押下します。
![i02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/73f3d6be-b0ab-1910-c713-241e875f610e.png)

Project name:に`demo-multiple-modules﻿`と入力し`Finish`ボタンを押下します。
![i03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/f7f346b4-fcd4-5964-1ab1-80798d0e4884.png)

図は空の状態のプロジェクトが作成された状態です。以降はこのプロジェクトにモジュールを追加していきます。
![i04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/fb441c11-a9a4-222b-4674-eef3ff19bc23.png)

## モジュールの作成手順

### service1モジュール

メニューバーの`File`→`New`→`Module...`をクリックします。
`New Module`画面が開くので、画面左側のメニューから`Spring Initializr`をクリック、Module SDKに`Java 13`を選択し`Next`ボタンを押下します。
![i05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/544ec7e5-4f19-7fa3-6d43-7fa5511c2982.png)

#### Project Metadata画面

|Metadata     |Value                   |
|:------------|:-----------------------|
|Group        |com.example             |
|Artifact     |demo-service1           |
|Type         |Maven Project           |
|Language     |Java                    |
|Packaging    |Jar                     |
|Java Version |13                      |
|Version      |0.0.1-SNAPSHOT          |
|Name         |demo-service1           |
|Description  |Demo Application of Service1 |
|Package      |com.example.demo.service1 |

![i06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/856c2283-8190-ece4-68cf-6448e08c844d.png)

#### Dependencies画面

Spring Bootのバージョンは`2.2.1`を選択。

|Category       |Dependency                       |
|:--------------|:--------------------------------|
|Developer Tools|Spring Boot DevTools             |
|               |Lombok                           |
|               |Spring Configuration Processor   |
|Web            |Spring Reactive Web              |
|SQL            |Spring Data R2DBC [experimental] |
|               |PostgreSQL Driver                |

![i07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/7efe3ba1-7a14-27bc-0247-1869db1dfbaf.png)

Module nameは`service1`とし`Finish`ボタンを押下します。
![i08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/e555a36d-e3f9-c26e-34dc-5287ee3cf9ee.png)

### APIモジュール

メニューバーの`File`→`New`→`Module...`をクリックします。
`New Module`画面が開くので、画面左側のメニューから`Spring Initializr`をクリック、Module SDKに`Java 13`を選択し`Next`ボタンを押下します。
![i09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/5a762212-327d-9eaa-21e7-a8e7b2af142f.png)

#### Project Metadata画面

|Metadata     |Value                   |
|:------------|:-----------------------|
|Group        |com.example             |
|Artifact     |demo-api                |
|Type         |Maven Project           |
|Language     |Java                    |
|Packaging    |Jar                     |
|Java Version |13                      |
|Version      |0.0.1-SNAPSHOT          |
|Name         |demo-api                |
|Description  |Demo Application of API |
|Package      |com.example.demo.api    |

![i10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/8c1a2950-f28a-0aac-fbe0-935e016b76a6.png)

#### Dependencies画面

Spring Bootのバージョンは`2.2.1`を選択。

|Category       |Dependency                       |
|:--------------|:--------------------------------|
|Developer Tools|Spring Boot DevTools             |
|               |Lombok                           |
|               |Spring Configuration Processor   |
|Web            |Spring Reactive Web              |

![i11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/ffebaf3f-8456-d0d7-03d4-7f84fd1442ba.png)

Module nameは`api`とし`Finish`ボタンを押下します。
![i12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/d7a33fde-dab4-1334-bbef-83d8f5b86906.png)

**Servicesツールバー**

モジュール作成後に図のようなポップアップが表示されるので`Show run configurations in Services`をクリックして有効にします。
![Services.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/fc4227f4-70bf-aa00-1c43-f42e5131f2bc.png)

有効にすると`Services`ツールバーでそれぞれのSpring Bootアプリケーションの起動・停止・コンフィグレーションが行えます。
![i13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/7303cfb9-b55e-1ce2-c22c-b1d3422a73c9.png)

図は`Service1`モジュールのアプリケーションを起動しているところです。右側に表示されている青字の数字はポート番号です。
![i21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/cc8fc4dd-7a0a-97d9-e15f-86c5298ad7b6.png)

### frontモジュール

#### 事前準備

**Node.js / npmのインストール**

インストールはnodistで行いました。

```
> node --version
v12.13.0

> npm --version
6.12.0
```

**vue cliのインストール**

```
> npm install -g @vue/cli
```

```
> vue --version
@vue/cli 4.0.5
```

**serveのインストール**

```
> npm install -g serve
```

```
> serve --version
11.2.0
```

#### モジュールの作成と設定

メニューバーの`File`→`New`→`Module...`をクリックします。
`New Module`画面が開くので、画面左側のメニューから`Static Web`をクリック、画面右側のメニューから`Vue.js`を選択し`Next`ボタンを押下します。
![i14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/da99db7a-464a-40b9-a840-6d07d7e5ce78.png)

Module nameは`front`とし`Finish`ボタンを押下します。
![i15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/1b010a21-56c1-c6eb-3cf9-55a2fea23701.png)

vue cliでプロジェクトのひな型が作成されます（経過はターミナル上で確認できます）。
![i16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/60a258bc-0d39-f963-d353-f14b417115f9.png)

#### package managerの設定

メニューバーの`File`→`Settings`→`Languages & Frameworks`→`Node.js and NPM`をクリックします。
Package managerに`C:\Program Files (x86)\Nodist\npmv\6.12.0`を指定して`Apply`ボタンを押下します。
![i17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/bafca2c0-46e2-f115-c8c2-f5748663626f.png)

開発環境でアプリケーションが起動するか確認します。
`npm`ツールバーを開いて`serve`をダブルクリックします。図の通りのメッセージが表示されたら
![i18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/30542ef7-eecc-e0a3-9b3f-457d5d7c2d15.png)

`http://localhost:8080/`にアクセスしてVue.jsプロジェクトのWelcomeページが表示されることを確認します。
![vue.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/8bf20f91-8f41-d098-84da-0722566197b5.png)

**本番環境用ビルドとローカルでの動作確認**

`npm`ツールバーの`build`をダブルクリックすると本番環境用のビルドが行われます。デフォルトではdistディレクトリに出力されます。
![i20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/4b61c3eb-ee45-0ed3-9d3c-e5975369bb18.png)

本番環境へデプロイする前にローカルで動作確認するにはfrontモジュールのルート上(package.jsonがある場所)で以下のコマンドを実行します。

```text
> serve -d dist

   ┌────────────────────────────────────────────────────┐
   │                                                    │
   │   Serving!                                         │
   │                                                    │
   │   - Local:            http://localhost:5000        │
   │   - On Your Network:  http://192.168.21.241:5000   │
   │                                                    │
   │   Copied local address to clipboard!               │
   │                                                    │
   └────────────────────────────────────────────────────┘
```

# プロジェクトとモジュールの作成直後の状態

図はIntellij IDEA上で見えるプロジェクトの作成状態です。
![i19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/54f741d1-10b2-934b-ab9d-5ce577c3c2db.png)
※README.mdは説明外で追加しています。

以上が複数モジュールのプロジェクトを作成する手順となります。