IntelliJ + Docker (APP+DB) + SpringBoot (Maven) 環境構築

# 前提
■JAVAがインストールされていること
今回はJava SE 14を使用しています
https://www.oracle.com/java/technologies/javase-downloads.html

■IntelliJがインストールされていること
【公式ダウンロード IntelliJ IDEA】
https://www.jetbrains.com/ja-jp/idea/download/#section=windows


■Dockerがインストールされていること
構築方法は下記を参照
【Windows10でDockerを無料で構築する】
https://qiita.com/SSM3G/items/79b7becc2169aac8ec6f

# 目標
IntelliJを使いつつ
Dockerでアプリケーションサーバとデータベースサーバを構築
サンプルのプロジェクトとソースを用いてデータベースの内容を表示するところまで目指す

**`http://localhost/`にアクセスして下記画面を表示させる**
![screenshot.47.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/e817c65b-1406-9a2c-97de-c88b10609320.jpeg)


# SpringBootのプロジェクトを作成 - Spring Initializr -
https://start.spring.io/
上記URLでプロジェクト作成に必要なものを選択
GENERATEすれば簡単に作成可能です
Dependenciesはとりあえず使いそうなものを追加　あとでpom.xmlから追加可能
![screenshot.41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/9b3fe769-6aa4-719d-bd52-f9eb2d45ea7d.jpeg)

zipファイルで落とせるので解凍して適当なディレクトリに格納

# IntelliJ

「Open or Import」から先ほど作成したファイルを開く

「demo」配下にdocker-compose.ymlを作成

**追記**
docker-compose.ymlに書いてあることが1行もわからない人はこちらへ
【docker-compose.ymlをなんとなく理解する】
https://qiita.com/SSM3G/items/4e5fc3e880fff0de3bfe

```yml:docker-compose.yml
version: '3'
services:
  app:
    image: openjdk:14-jdk-alpine
    ports:
      - "80:8080"
    volumes:
      - .:/app
    working_dir: /app
    command: ./mvnw spring-boot:run
    environment:
      DATASOURCE: jdbc:mysql://db:3306/sample
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: sample
      MYSQL_USER: user
      MYSQL_PASSWORD: passwrod
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
    volumes:
      - ./docker/mysql:/docker-entrypoint-initdb.d
    ports:
      - "3306:3306"
```

src\main\resources\application.properties
にDBに接続するための設定を書き込む
今回はJDBCを用いてDB接続を行う

```properties:application.properties
spring.datasource.url=${DATASOURCE:jdbc:mysql://localhost:3306/sample}
spring.datasource.username=root
spring.datasource.password=password
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
```

次はサンプルのデータを作成します
「demo」配下にdocker\mysql\sample.sqlを作成

```sql:sample.sql
SET CHARSET UTF8;
create table sample.users(
  id bigint(20) unsigned AUTO_INCREMENT PRIMARY KEY,
  name varchar(100),
  age tinyint,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at DATETIME
);
INSERT INTO sample.users(name,age) VALUES ('太郎',30),('次郎',25),('三郎',19);
```

あとはお馴染みのControllerとHTMLを作成
src\main\java\com\example\demo\controller\AppController.java

```java:AppController
package com.example.demo.controller;

import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;
import java.util.Map;

@Controller
public class AppController {
    final
    JdbcTemplate jdbcTemplate;

    public AppController(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    @RequestMapping("/")
    String index(Model model) {
        List<Map<String, Object>> users = jdbcTemplate.queryForList("select * from sample.users");
        model.addAttribute("title", "ユーザ一覧");
        model.addAttribute("users", users);
        return "index";
    }
}

```

src\main\resources\templates\index.html

```html:index.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border-collapse: collapse;
        }

        th, td {
            padding: 3px 5px 3px 5px;
            border: 1px solid #aaa;
        }

        th {
            background-color: #eee;
        }
    </style>
</head>
<body>
<h1 th:text="${title}"></h1>
<table>
    <thead>
    <tr>
        <th>#</th>
        <th>name</th>
        <th>age</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user: ${users}">
        <td th:text="${user['id']}"></td>
        <td th:text="${user['name']}"></td>
        <td th:text="${user['age']}"></td>
    </tr>
    </tbody>
</table>
</body>
</html>
```

# Docker
次はDockerの準備を行います
Dockerを無事にインストールすることができれば
右下にDockerのアイコンが表示されるのでSetting画面を開く
Expose daemon on tcp://localhost:2375 without TLS
にチェックを入れてTLC なしに変更する
![screenshot.48.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/13145276-7546-c4d4-ed61-cd1cce4a00c3.jpeg)

IntelliJでSetting画面を開く `Ctrl + Alt + S`
Pluginsで「Docker」をインストールする
するとSetting画面にDockerの項目が表示されます。
＋を押してDockerを追加して完了です
※Spring関連とThymeleafのプラグインがインストールされていなかった場合はインストールして下さい
![screenshot.49.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/7add6e81-48bb-7917-0d11-01aa290c4713.jpeg)

IntelliJの下メニューのServicesからDockerを起動
問題なければ起動すると思います
![screenshot.51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/9fd5618c-1269-f383-1173-6b16d40f81b6.jpeg)

docker-compose.ymlを開き起動する
![screenshot.62.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/cbd4e380-b10a-e27f-575d-c20b57411bd8.jpeg)

appとdbのコンテナが起動していれば問題ないです
![screenshot.63.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/155fb3ab-5770-b798-6458-96568961c2da.jpeg)
![screenshot.64.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/d2f54c54-0efe-5886-ec48-07496c952a14.jpeg)


**注意**
appは初回起動時に時間がかかるので3～5分くらい待ちましょう
しばらくすると起動します
![screenshot.56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/f9fa2407-bb3e-114d-f566-da2baf7fd7fa.jpeg)

# 動作確認
`http://localhost/`にアクセスしてみましょう
ユーザ一覧が表示されれば完了となります

# IntelliJからDB操作を行う
右側のメニューにDatabaseがあるので＋を押してください
Data Source > MySQL
![screenshot.66.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/10bc5222-fbef-dad5-df1a-89ce7b41e730.jpeg)

![screenshot.67.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/7ee6f1aa-4489-0195-7314-c80230d37eab.jpeg)

上記画像の通りに記入
User：root
Password：password

```yml:docker-compose.yml
MYSQL_ROOT_PASSWORD: password
```
と設定しているので上記に値になります。後でお好きに編集してください

Schemasも忘れずに選択してください
![screenshot.68.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/ec6bb0c9-9c2e-c3a7-4251-4d38f8abffa3.jpeg)

DBのテーブルが表示されるので
試しにレコードを追加してみましょう
![screenshot.69.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/fe786b0d-67ef-08f1-270f-036128acf5cf.jpeg)
![screenshot.70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/d66d7c9d-51ae-7ecc-72db-39e4442c2ade.jpeg)
![screenshot.71.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/7079662b-a7a1-fe44-0eb4-dae803ab00db.jpeg)
![screenshot.72.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619433/7afbee89-73e3-6c08-504e-34252798b7d2.jpeg)


ローカルホストにアクセスして更新されていれば完了です！
お疲れ様です＼(^o^)／あとは自分の好きなようにカスタマイズして知識を深めていってください