タスク管理システム #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版をダウンロード

2.Docker（コンテナ管理）

Docker公式サイトからDocker Desktopをダウンロード

3.JDK 21（Kotlinバックエンド用）

1.Adoptium JDK 21からダウンロード

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公式サイトからダウンロード

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