SpringBootとReactの簡単な環境構築
Spring BootとReactを使ってログイン画面、新規登録画面、Home画面を実装するための環境構築手順
- Node.jsのインストール
Reactを使用するために、まずNode.jsをインストールします。
Node.jsの公式サイトからインストーラーをダウンロードしてインストールします。
Windows:
winget install OpenJS.NodeJS
Mac (Homebrewを使用):
brew install node
インストールが完了したら、Node.jsとnpmのバージョンを確認します。
node -v
npm -v
- Reactプロジェクトの作成
次にReactプロジェクトを作成します。
新しいReactアプリを作成します。
npx create-react-app frontend
フロントエンドの依存関係を追加します（必要であれば）：
cd frontend
npm install react-router-dom axios
- Spring Bootプロジェクトのセットアップ
Spring BootプロジェクトはSpring Initializrを使って設定できます。
Spring Initializrにアクセスし、以下の設定を行います：
Project: Maven
Language: Java
Spring Boot Version: 最新の安定版
Project Metadata: 適切な名前とパッケージ名を設定
Dependencies: Spring Web, Spring Security, Spring Data JPA, H2 Database (または他のデータベース)
必要な依存関係を設定して生成されたプロジェクトをダウンロードします。
ダウンロードしたプロジェクトをIDE（例えばVSCodeやIntelliJ）で開きます。
- Spring Bootの設定
SecurityConfig.javaやWebConfig.javaを使ってSpring Securityの設定を行います。
必要に応じてCORS（Cross-Origin Resource Sharing）を許可します。
User.java, UserRepository.java, AuthController.javaなどを作成して、ユーザー認証とデータベースアクセスを実装します。
- フロントエンドとバックエンドの接続
axiosを使ってReactからSpring BootのAPIにリクエストを送ることができます。
AuthControllerで定義したエンドポイント（例：/api/login, /api/register）をReactのログイン、新規登録画面から呼び出します。
- アプリケーションの実行
Reactの実行
フロントエンドプロジェクトのルートディレクトリに移動し、以下のコマンドで開発サーバーを起動します。
npm start
Spring Bootの実行
IDEからSpring Bootアプリケーションを実行するか、コマンドラインから以下のコマンドで実行します。
./mvnw spring-boot:run
- 環境変数と設定
application.properties でサーバーポートやデータベース接続を設定します。
フロントエンドとバックエンドでCORSの問題が発生する可能性があるため、Spring SecurityでCORSの設定を適切に行います。
- フロントエンドの構造
Login.js と Register.js: ログインと新規登録のUIを作成。
Home.js: ログイン後のホーム画面を作成。
App.js: React Routerを使用して、各ページをルーティングします。
まとめ
上記の手順により、Spring BootとReactを用いた認証機能付きのWebアプリケーションを構築することができる。これでフロントエンドとバックエンドが連携し、ログインや新規登録機能を提供することが可能👍
Discussion