タスク管理システム #1 （開発環境構築 Kotlin + React + TypeScript + Docker）

# 1.必要なツールのインストール
開発環境を構築するための、以下ツールをインストールします。
| ツール | バージョン | 用途 |
|:-:|:-:|:-:|
| Node.js | LTS版 | React + TypeScriptの開発 |
| Docker | 最新版 | コンテナ管理 |
| JDK 21 | Adoptium JDK推奨 | Kotlin + Gradleの実行環境 |
| Gradle | 8.13以上 | Kotlinバックエンドのビルド |

### 1.Node.js（フロントエンド用）
Node.js公式サイトからLTS版をダウンロード

https://nodejs.org/ja

### 2.Docker（コンテナ管理）
Docker公式サイトからDocker Desktopをダウンロード

https://www.docker.com/products/docker-desktop/

### 3.JDK 21（Kotlinバックエンド用）
##### 1.Adoptium JDK 21からダウンロード

https://adoptium.net/

##### 2.JAVA_HOME、PATHの設定
・JAVA_HOME：C:\Program Files\Eclipse Adoptium\jdk-21.0.6.7-hotspot
・PATH：C:\Program Files\Eclipse Adoptium\jdk-21.0.6.7-hotspot\bin
を追加

### 4.Gradle（ビルドツール）
Gradle公式サイトからダウンロード

https://gradle.org/releases/

# 2.プロジェクトフォルダの作成
任意のフォルダに移動し、下記コマンド実施
```
mkdir my-task-manager
cd my-task-manager
mkdir backend frontend
```

# 3.バックエンド（Kotlinのセットアップ）
### 1.Gradleプロジェクトの初期化
以下コマンドを実施
```
cd backend
gradle init
```

### 2.backend/build.gradle.ktsの作成
backend直下にbuild.gradle.ktsを作成し、以下を記載
```
plugins {
    kotlin("jvm") version "2.1.0"
}

repositories {
    mavenCentral()
}

dependencies {
    implementation(kotlin("stdlib"))
    testImplementation("org.jetbrains.kotlin:kotlin-test")
}

java {
    toolchain {
        languageVersion.set(JavaLanguageVersion.of(21))
    }
}

tasks.withType<Test>().configureEach {
    useJUnitPlatform()
}
```

### 3.バックエンド動作確認
以下コマンドを実施
```
gradle build
```
backend/build/libsにjarファイルが生成されることを確認

garadle build初回時、以下のような質問あり
※私は以下のように選択した
```
Select type of build to generate:
  1: Application
  2: Library
  3: Gradle plugin
  4: Basic (build structure only)
Enter selection (default: Application) [1..4] 1

Select implementation language:
  1: Java
  2: Kotlin
  3: Groovy
  4: Scala
  5: C++
  6: Swift
Enter selection (default: Java) [1..6] 2

Enter target Java version (min: 7, default: 21): 21

Project name (default: backend):

Select application structure:
  1: Single application project
  2: Application and library project
Enter selection (default: Single application project) [1..2] 1

Select build script DSL:
  1: Kotlin
  2: Groovy
Enter selection (default: Kotlin) [1..2] 1

Select test framework:
  1: kotlin.test
  2: JUnit Jupiter
Enter selection (default: kotlin.test) [1..2] 1

Generate build using new APIs and behavior (some features may change in the next minor release)? (default: no) [yes, no] no
```

# 4.フロントエンド（React + TyoeScript）のセットアップ
```
cd ../frontend
npx create-react-app . --template typescript
```

### 1.開発サーバの起動
```
npm start
```
ブラウザで「 http://localhost:3000 」 にアクセス
※サーバの停止は「Ctrl + C」

# 5.Dockerの設定
### 1.backkend/Dockerfileの作成
backkend直下にDockerfileを作成し、以下を記載
```
FROM openjdk:21-jdk-slim
WORKDIR /app
COPY build/libs/*.jar app.jar
CMD ["java", "-jar", "app.jar"]
EXPOSE 8080
```

### 2.frontend/Dockerfileの作成
frontend直下にDockerfileを作成し、以下を記載
```
FROM node:18-alpine
WORKDIR /usr/src/app
COPY package.json ./
RUN npm install
COPY . .
CMD ["npm", "start"]
EXPOSE 3000
```

### 3.docker-compose.ymlの作成
my-task-manager直下にdocker-compose.ymlファイルを作成し、以下を記載
```
version: '3'
services:
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=production

  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    depends_on:
      - backend
```

# 6.Dockerを使用して開発環境を起動
以下コマンドを実施
```
docker-compose build
docker-compose up -d
```
バックエンドとフロントエンドがそれぞれ起動される

以上で開発環境構築は終了です。
何かおかしなところがありましたら、ご指摘お願いいたします。

# 7.フォルダ構成
```
my-task-manager/
│── backend/
│   ├── .gradle/
│   ├── .kotlin/
│   ├── app/
│   ├── build/
│   ├── gradle/
│   ├── .gitattributes
│   ├── .gitignore
│   ├── build.gradle.kts
│   ├── Dockerfile
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradle.bat
│   ├── setting.gradle.kts
│── frontend/
│   ├── node_modules/
│   ├── public/
│   ├── src/
│   ├── .gitignore
│   ├── Dockerfile
│   ├── package-lock.json
│   ├── package.json
│   ├── REDUME.md
│   ├── tsconfig.json
│── docker-compose.yml
```