概要
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
()内の数値はポート
最終的なディレクトリツリーは以下のようになります。
/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を選択します。
次の画面でEmpty Projectを選択しNextボタンを押下します。
Project name:にdemo-multiple-modulesと入力しFinishボタンを押下します。
図は空の状態のプロジェクトが作成された状態です。以降はこのプロジェクトにモジュールを追加していきます。
モジュールの作成手順
service1モジュール
メニューバーのFile→New→Module...をクリックします。
New Module画面が開くので、画面左側のメニューからSpring Initializrをクリック、Module SDKにJava 13を選択しNextボタンを押下します。
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 |
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 |
Module nameはservice1としFinishボタンを押下します。
APIモジュール
メニューバーのFile→New→Module...をクリックします。
New Module画面が開くので、画面左側のメニューからSpring Initializrをクリック、Module SDKにJava 13を選択しNextボタンを押下します。
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 |
Dependencies画面
Spring Bootのバージョンは2.2.1を選択。
| Category | Dependency |
|---|---|
| Developer Tools | Spring Boot DevTools |
| Lombok | |
| Spring Configuration Processor | |
| Web | Spring Reactive Web |
Module nameはapiとしFinishボタンを押下します。
Servicesツールバー
モジュール作成後に図のようなポップアップが表示されるのでShow run configurations in Servicesをクリックして有効にします。
有効にするとServicesツールバーでそれぞれのSpring Bootアプリケーションの起動・停止・コンフィグレーションが行えます。
図はService1モジュールのアプリケーションを起動しているところです。右側に表示されている青字の数字はポート番号です。
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ボタンを押下します。
Module nameはfrontとしFinishボタンを押下します。
vue cliでプロジェクトのひな型が作成されます（経過はターミナル上で確認できます）。
package managerの設定
メニューバーのFile→Settings→Languages & Frameworks→Node.js and NPMをクリックします。
Package managerにC:\Program Files (x86)\Nodist\npmv\6.12.0を指定してApplyボタンを押下します。
開発環境でアプリケーションが起動するか確認します。
npmツールバーを開いてserveをダブルクリックします。図の通りのメッセージが表示されたら
http://localhost:8080/にアクセスしてVue.jsプロジェクトのWelcomeページが表示されることを確認します。
本番環境用ビルドとローカルでの動作確認
npmツールバーのbuildをダブルクリックすると本番環境用のビルドが行われます。デフォルトではdistディレクトリに出力されます。
本番環境へデプロイする前にローカルで動作確認するにはfrontモジュールのルート上(package.jsonがある場所)で以下のコマンドを実行します。
> serve -d dist
┌────────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://192.168.21.241:5000 │
│ │
│ Copied local address to clipboard! │
│ │
└────────────────────────────────────────────────────┘
プロジェクトとモジュールの作成直後の状態
図はIntellij IDEA上で見えるプロジェクトの作成状態です。
※README.mdは説明外で追加しています。
以上が複数モジュールのプロジェクトを作成する手順となります。