React との連携

Spring Boot を API サーバー、React (Vite) を UI として分離するのが基本です。開発時は別ポートで起動し、proxy で接続すると効率よく開発できます。

連携アーキテクチャ

CORS 設定

開発時に React と API が別オリジンになる場合、CORS 設定が必要です。

@Configuration
public class CorsConfig implements WebMvcConfigurer {
  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/api/**")
      .allowedOrigins("http://localhost:5173")
      .allowedMethods("GET", "POST", "PUT", "DELETE");
  }
}

Vite proxy 設定

React 側で proxy を使うと、フロント側コードは常に相対パスで API を呼べます。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

React 側 API 呼び出し

import { useEffect, useState } from 'react'

export default function BookList() {
  const [books, setBooks] = useState([])

  useEffect(() => {
    fetch('/api/books')
      .then((res) => res.json())
      .then((data) => setBooks(data))
  }, [])

  return (
    <ul>
      {books.map((b) => <li key={b.id}>{b.title}</li>)}
    </ul>
  )
}

本番配信パターン

1. 分離配信: React 静的ファイルを CDN / Nginx、API を Spring Boot で配信
2. 同居配信: React の build 成果物を Spring Boot の `src/main/resources/static` に配置