React + Spring Framework + MongoDBでアプリ作成②

はじめに

この記事は以下の記事の続きです。

今回はバックエンド側のセットアップの手順を共有していきます。

セットアップ

バックエンドの技術スタックは以下の通りです。

開発環境

言語:
Java

フレームワーク：
Spring Boot3.4.0

プロジェクトの作成

Spring Initializrを使用してプロジェクトを作成します。

以下の設定を選択してください。

Project: Maven
Language: Java
Spring Boot: 3.4.0

Project Metadata:
Group: com.example
Artifact: demo
Name: demo
Description: Demo project for Spring Boot
Package name: com.example.demo

プロジェクトによって必要な依存関係を選択してください。
今回は以下の2つを入れておきます。

依存関係

Spring Web

Generateボタンを押してローカルにzipファイルを保存します。
zipファイルを解凍したものをフロントエンドが入っているフォルダに入れます。
(※フロントエンドのプロジェクトの中に入れないように注意してください。)

アプリケーションプロパティの設定

追加したバックエンド側のフォルダ内を確認して、
src/main/resources/application.propertiesに以下の設定を追加します。

application.properties

# サーバーポート設定
server.port=8080

# CORS設定
spring.web.cors.allowed-origins=http://localhost:5173
spring.web.cors.allowed-methods=GET,POST,PUT,DELETE
spring.web.cors.allowed-headers=*

# ログレベル設定（オプション）
logging.level.root=INFO
logging.level.com.example=DEBUG

サンプルコントローラーの作成

mainフォルダ>Java>プロジェクト名フォルダ配下にcontrollerフォルダを作成し、その中にコントローラーファイルを作成します。
ファイルの中はこのような形で記載をしてみました。

HelloController.java

package com.example.demo.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:5173")
public class HelloController {
    @GetMapping("/hello")
    public String hello() {
        return "Hello from Spring Boot!";
    }
}

フロントエンドとの連携

フロントエンドとバックエンドの連携はaxiosで行いますので、インストールを進めます。

npm install axios

フロントエンドのApp.tsxファイルを以下のように変更し、バックエンドのコントローラーのmessageを受け取ります。

App.tsx

// src/App.tsx
import { useEffect, useState } from "react";
import axios from "axios";
import "./App.css";

function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    axios
      .get("http://localhost:8080/api/hello")
      .then((response) => {
        setMessage(response.data);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  }, []);

  return (
    <div>
      <h1>Spring Boot + React</h1>
      <p>Message from backend: {message}</p>
    </div>
  );
}

export default App;

ここまででセットアップが完了です。

両サイドを起動する

まずはバックエンドを以下のコマンドで起動します。

./mvnw spring-boot:run

特にエラーが出ておらず起動が完了していれば、別のコマンド画面を開いてフロントサイドに移動します。
フロントサイドに移動したら以下のコマンドで起動します。

npm run dev

ローカルで起動したらURLをクリックし、画面で以下のような表示がされていれば接続が成功しています。

おわりに

ここまででフロントエンドReactとバックエンドSpringのセットアップが完了しました。
次回はMongoDBを使ったデータベースのセットアップ方法を説明していきたいと思います。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼