React×Spring Bootな構成をAWS Fargateで動かす(3)

Pocket

Spring BootでバックエンドAPIを実装する

前回からしばらく間が空いてしまいましたが、第3回となる今回は、Spring BootでバックエンドAPIを作っていこうと思います。
ちなみに前回の記事はコチラ。

 

今回はSpring BootのJavaアプリケーションをVSCodeで開発していきますので、VSCodeに以下の拡張機能を入れておいてくださいね。

  • Extension Pack for Java
  • Spring Boot Extension Pack
  • Postman(REST APIのテストで使用)

プロジェクトの作成

それではまずプロジェクトを作成していきます。
VSCodeで前回までのワークスペースを開いたら、Crtl+Shift+pコマンドパレットを起動します。
ここにspringと入力して、Spring Initializr: Create a Maven Project…を選択します。


選択するといくつか情報を聞かれるので入力します。今回入力した値は以下の通りです。

入力項目 入力値
Specify Spring Boot version. 3.3.5
Specify project language. Java
Input Groud Id for your project. jp.co.tdi
Input Artifact Id for your project. miso-backend
Specify packaging type. Jar
Specify Java version. 17
Choose dependencies Spring Boot DevTools、Spring Web、lombok

これでプロジェクトが作成されたと思います。
Springの設定ファイルは、プロパティファイルよりもYAMLのほうが好みなので、src\main\resourcesの下にあるapplication.propertiesを右クリックして、Convert .properties to .yamlしておきます。(application.propertiesは削除しておきます)

バックエンドAPIの実装

パスワードを生成するバックエンドAPIを実装していきます。
簡単なロジックなので、コントローラだけで済ませてしまいます。
まず、VSCodeのsrc\main\java\jp\co\tdi\miso-backendを右クリックして、New Java Package…を選択してcontrollerパッケージを作成してください。
controllerパッケージが作成できたら、さらにそれを右クリックして、New Java FileClass…を選択してPasswordGeneratorクラスを作成してください。
PasswordGeneratorクラスを次のように実装します。

/passwordというURIにリクエストがあったときにランダムなパスワードを生成して返すREST APIができました。
実行して確認してみましょう。
メニューから実行デバッグなしで実行を選択し、Postmanの拡張機能からリクエストを投げてみます。

Postmanから正常にランダムなパスワードが生成されたことを確認できました。

コンテキストルートの変更およびCORS設定の追加

/apiへのリクエスト時にバックエンドアプリケーションを実行したいので、コンテキストルートを/apiに変更します。
また、REST APIなのでCORS対応します。
一旦はローカルで動いているフロントエンドからのリクエストなので、http://localhost:3000から受け付けられるようにします。
ただし、この値は環境によって変わるのが目に見えているので、環境変数から与えられるようにしておきます。
はじめにapplication.ymlを以下のように変更します。

この変更により、先ほどhttp://localhost:8080/passwordだったURLが、http://localhost:8080/api/passwordになりました。
次はこの値を読み取って、CORS設定するようにします。
VSCodeのsrc\main\java\jp\co\tdi\miso-backendを右クリックして、New Java Package…を選択してconfigパッケージを作成してください。
configパッケージが作成できたら、さらにそれを右クリックして、New Java FileClass…を選択してCorsPropertiesクラスを作成してください。
CorsPropertiesクラスを次のように実装します。

このクラスがapplication.ymlから値を取得してくれます。
configパッケージを右クリックして、New Java FileClass…を選択してWebConfigクラスを作成してください。

ローカルでの実行時に環境変数を設定するために起動構成を作成します。
メニューから、実行構成の追加…を選択してください。
ワークスぺスルートの.vscodeの下にlaunch.jsonというファイルが作成されるので、これを編集します。

一度Spring Bootのプロセスを停止してから再び実行すると、この起動設定で実行されます。

フロントエンドからの呼び出し

作成したREST APIを前回作成したフロントエンドから呼び出すようにします。
呼び出すために以下のコマンドを実行して、axiosのパッケージをインストールします。

インストールできたら、App.tsxを変更してAPIを呼び出すようにします。

少々長いので、変更点を解説します。

  • 生成されたパスワードとスナックバーの表示状態を管理するためにステートを定義しました。(11、12行目)
  • パスワード生成のREST APIを呼び出す関数generatePasswordを追加しました。(38~47行目)
    • 環境変数VITE_API_URL_BASEがあるときはそれを、ないときはリクエストされたオリジンに/apiを付与したURLを使用
    • AXIOS経由でREST APIを呼び出し
    • REST APIのレスポンスでパスワードのステートを更新
  • スナックバーの表示関数handleClickを追加しました。(49~55行目)
    • パスワードをクリップボードにコピー
    • 2秒間スナックバーを表示
  • GenerateボタンのクリックイベントでgeneratePassword関数を呼び出すようにしました。(86行目)
  • パスワードのステートの値が入っている場合に、パスワードの値を表示するようにしました。(96~99行目)
    • パスワードの値をクリックイベントでhandleClick関数を呼び出し

また、これに合わせてApp.cssにスナックバー用のスタイルも追加しています。

環境変数にVITE_API_URL_BASEを追加したので、.envファイルにも追加します。

実行してみると、無事にAPIを呼び出すことができました😆

ちなみに別途HTMLを作成して、このAPIを呼び出してもCORSにひっかかり実行できないことは確認しています。

今回思ったより記事が長くなってしまい、Cognito認証ユーザーだけが実行できるAPIの実装までたどり着きませんでしたので、次回はそれについて書きたいと思います!
それでは、また次回に👋

過去の記事

お問い合わせ先

執筆者プロフィール

Hayakawa Masafumi
Hayakawa Masafumitdi デジタルイノベーション技術部
昔も今も新しいものが大好き!
インフラからアプリまで縦横無尽にトータルサポートや新技術の探求を行っています。
週末はときどきキャンプ場に出没します。
Pocket

関連記事