React/TypescriptとJava Springで環境構築してみた

要約

おしゃれなポートフォリオを作成するために、Mac上でReact/TypeScriptとSpring Bootを使用して環境構築を行いました。この記事では、その手順を備忘録として記録します。

構成

Frontend: React/TypeScript
Backend: Spring Boot
エディタ: VSCode

フォルダ構成

/my-project
├── backend
│   ├── src
│   │   └── main
│   │       ├── java
│   │       └── resources
│   ├── pom.xml
│   └── ...（他のSpring Bootのファイル）
├── frontend
│   ├── src
│   │   ├── components
│   │   ├── pages
│   │   └── index.js
│   ├── package.json
│   └── ...（他のReactのファイル）
├── .gitignore
└── README.md

環境構築手順

1. VS Codeにプラグイン追加
   ・Open JDK
   ・Spring Boot Extension Pack

2. MacにJava JDKをダウンロード
   ・Homebrewを使用してJava JDKをインストールします。

brew install openjdk@17

※Homebrewをまだインストールしていない場合は、最初にHomebrewをインストールする必要があります。

3.シェルの設定ファイルを編集

ターミナルでnanoエディタを使用して、~/.zshrcファイルを開きます。

nano ~/.zshrc

以下の2行を末尾に追加します。

export JAVA_HOME=/usr/local/opt/openjdk@17/libexec/openjdk.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH

上記で~/.zshrcを変更したので適用します。

source ~/.zshrc

パスが正しく通っていることを確認します。

echo $JAVA_HOME
java -version

以下のように表示されればパスの設定は完了です。

/usr/local/opt/openjdk@17/libexec/openjdk.jdk/Contents/Home
openjdk version "17.0.11" 2024-04-16
OpenJDK Runtime Environment Homebrew (build 17.0.11+0)
OpenJDK 64-Bit Server VM Homebrew (build 17.0.11+0, mixed mode, sharing)

4.プロジェクトのリポジトリ作成
GitHubで管理するために、リポジトリを作成してデスクトップにクローンします。（Githubで管理したい人向け）
Githubが必要なければ任意の箇所にディレクトリ作成してください。

5.バックエンドの作成

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

Spring Initializrの設定
・Project: Gradle Project
・Language: Java
・Spring Boot Version: 2.7.0 (または最新の安定版)
・Project Metadata:
　・Group: com.example
　・Artifact: demo
　・Name: demo
　・Description: Demo project for Spring Boot with React and TypeScript
　・Package name: com.example.demo
　・Packaging: jar
　・Java Version: 17
　・Dependencies:
　　・Spring Web
　　・Spring Data JPA
　　・H2 Database
　　・Spring Boot DevTools
　　・Lombok
　　・Spring Security

上記の設定でプロジェクトを生成し、
ダウンロードされたzipファイルを解凍して先ほどクローンしたディレクトリに配置します。

分かりやすいようにフォルダ名をbackendに変更します。

6.フロントエンドの作成

プロジェクトのルートディレクトリで以下のコマンドを実行してReactアプリを作成します。

npx create-react-app frontend --template typescript

7.起動

プロジェクトのルートディレクトリをVS Codeで開き
各ディレクトリで以下のコマンドをターミナルで実行してアプリケーションを起動します。

フロントエンド

cd frontend
npm start

バックエンド

cd backend
./gradlew bootRun

※Mavenを使用する場合は以下のコマンドを使用します。
./mvnw spring-boot:run

まとめ

React/TypeScriptとSpring Bootを使用した環境構築の手順を説明しました。これにより、フロントエンドとバックエンドが統合されたアプリケーションをMac上で開発できるようになります。ぜひ試してみてください！

補足

・　JAVA_HOMEのパスをVS Codeにも設定が必要そう

ターミナルで下記を実行する

echo $JAVA_HOME

私の場合は下記が出力されました。
/usr/local/opt/openjdk@17/libexec/openjdk.jdk/Contents/Home

上記をVSCodeのsettings.json の"jdk.jdkhome":の値へペーストしてVS Codeを再起動して完了