【Windows向け】Spring Boot × React 開発環境の作り方（①環境構築）

対象

• HTML/CSS/JavaScript は触ったことがある
• Spring Boot＋Thymeleaf の簡単な Web アプリは作ったことがある
• React は ゼロから 学び始める

ゴール

• Windows 上で Spring Boot（バックエンド） と React（フロントエンド） を 別プロセス で起動できるようにする
• 今後の回（②〜⑦）で使うフォルダ構成・基本コマンドをそろえる

---

この記事で作る構成

todo-tutorial/
├─ backend/   … Spring Boot（8080）
└─ frontend/  … React（3000）

• 開発時は http://localhost:3000（React）→ http://localhost:8080（Spring Boot）へアクセス
• フロントとバックを分離して、モダンな SPA＋API 方式で進めます

---

事前インストール（Windows）

1. Git

   • 公式インストーラで OK（git --version が出れば完了）

2. JDK（Java 21 LTS 推奨）

   • 例：Adoptium Temurin 21
   • 確認：java -version

3. Node.js（LTS 推奨）

   • 例：Node 20 LTS / npm 同梱
   • 確認：node -v / npm -v

4. IDE/エディタ

   • Java 用：IntelliJ IDEA or Eclipse（どちらでも）
   • フロント用：VS Code 推奨（もちろん IntelliJ でも可）

つまずき対策：

• java や node コマンドが認識されない → PATH を再読み込み（PowerShell を再起動）
• 会社/学校 PC でインストール制限がある場合は IT 管理者に相談

---

1) 作業用フォルダの作成

# 任意の場所で
mkdir todo-tutorial
cd todo-tutorial

---

2) Spring Boot プロジェクト（backend）を作る

2-1. プロジェクト作成（Gradle・Java 21）

Spring Initializr で作成（Web UI or IDE ウィザードどちらでも可）

• Project: Gradle
• Language: Java
• Spring Boot: 3.3.x（例）
• Packaging: Jar
• Java: 21
• Group: com.example
• Artifact: backend
• Dependencies: Spring Web, Lombok（任意）, Spring Boot DevTools（任意）

生成した zip を展開して todo-tutorial 配下へ置くか、IDE からそのまま作成先を todo-tutorial/backend に指定します。

todo-tutorial/
└─ backend/
   ├─ build.gradle
   └─ src/...

2-2. 動作確認（Hello エンドポイントは②で作るので、ここでは起動のみ）

cd backend
# 初回は依存解決に少し時間がかかる
.\gradlew bootRun

• Started BackendApplication と出て 8080 で待ち受けていれば OK
• ブラウザで http://localhost:8080 → 404 が返っても正常（まだコントローラを作っていないため）

補足：IDE(Eclipse) 派は「Run」から BackendApplication を起動しても OK

---

3) React プロジェクト（frontend）を作る

授業では create-react-app（CRA） を使います。React の入門では設定項目が少なく、教材化しやすいのが理由です。

cd ..   # todo-tutorial 直下へ戻る
npx create-react-app frontend
cd frontend
npm start

• 初回は依存のダウンロードに少し時間がかかります
• 自動で http://localhost:3000 が開き、React のデフォルト画面が表示されれば成功
  （もし空白のままなら、コンソールのエラーを確認）

---

4) バックエンドとフロントエンドの同時起動

• バックエンド：todo-tutorial/backend で .\gradlew bootRun（ポート 8080）
• フロントエンド：todo-tutorial/frontend で npm start（ポート 3000）

以降の回では、フロントからバックへ HTTP でアクセスします。

---

5) 開発を楽にする最低限の準備

5-1. 開発時の CORS／プロキシ

学習のしやすさを優先し、フロント側のプロキシ を使います（CORS 設定を最小化）。

frontend/package.json に以下を追加：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8080",
  ...
}

これでフロントから

// 例（②以降で使用）
fetch("/api/hello")

と書くだけで http://localhost:8080/api/hello へ転送されます（同一オリジン扱いになり、CORS を気にしなくてよい）。

補足：

• 本番配備ではプロキシ設定を使わず、バック側で CORS を開ける／リバースプロキシ（Nginx 等） を置く、が定石。
• 授業の段階では 開発用 と割り切るのがコツ。

5-2.（任意）Spring Boot 側で CORS を明示したい場合

将来の参考に、グローバル CORS の例（Boot 3.x）を載せておきます。
backend/src/main/java/.../config/WebConfig.java

package com.example.backend.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.*;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource; // ←誤りに注意
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;        // ←これ（MVC）

@Configuration
public class WebConfig {
    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration cors = new CorsConfiguration();
        cors.addAllowedOrigin("http://localhost:3000");
        cors.addAllowedHeader("*");
        cors.addAllowedMethod("*");
        cors.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", cors);
        return source;
    }
}

※ MVC 用は org.springframework.web.cors.UrlBasedCorsConfigurationSource。
WebFlux 用（reactive パッケージ）と取り違えないよう注意。

---

6) よくあるハマりどころ

• 8080 が埋まっていて起動できない
  → PowerShell で netstat -ano | findstr :8080、タスクマネージャで該当 PID を終了
• 3000 が埋まっている
  → npm start 実行時に別ポートを尋ねられたら Y
• npm start がすぐ落ちる
  → Node のバージョンが古い／壊れていることが多い。LTS を再インストール
• 社内プロキシ環境で npx create-react-app が失敗
  → npm config set proxy http://... / https-proxy 設定を確認、もしくは自宅ネットで一度セットアップしてから持ち込む

---

7) 今日のチェックリスト

• todo-tutorial/backend で Spring Boot を起動できる（8080）
• todo-tutorial/frontend で React を起動できる（3000）
• frontend/package.json に "proxy": "http://localhost:8080" を追加済み
• 2 つのサーバを同時に起動できる

---

次回（②）予告

• Spring Boot：最小のコントローラで Hello World を返す
• React：バックエンドの値を取得して画面に表示（fetch を体験）

---

付録：コマンド早見表

# 起動
# backend
cd backend
.\gradlew bootRun

# frontend
cd ..\frontend
npm start

# 停止
# backend: Ctrl + C
# frontend: ブラウザ閉じる or ターミナルで Ctrl + C

---

ライセンス／注意

• 本記事内のサンプルコードは学習用途を想定しています。プロダクション利用時はセキュリティ設定（CORS、CSRF、認証、エラーハンドリング等）を適切に行ってください。

---