ピン留めされたアイテム

 前提OS　windows10

VSCode 以下の通りです。

vue.jsの知識あり vue.jsを例に出したりします。

tomonori

 1.VSCode上でSpring Bootプロジェクトを追加するこの記事(Spring Boot をvscodeで立ち上げ)を参考に進めていきます。

 拡張機能のインストール以下の2つをインストールします。
Etension Pack for Java：VSCode上でJava実行環境の構築などができるようになります。

Spring Boot Extension Pack：VSCode上でプロジェクト作成などができるようになります。

 プロジェクト作成
 1.コマンドパレット上で「>Spring Initializr: Create a Gradle Project ...」と入力して選択

 2.Spring Bootのバージョンを選択私は「3.3.3」を選択しました。

 3.プロジェクトの言語で「Java」を選択

 4.Grout IDを入力

 5.プロジェクト名を入力

 6.パッケージングの方法を選択私は「Jar」を選択しました。今回はWebアプリの作成なので「War」を選択するべきだったのかも。現状デプロイは考えていないので「Jar」のままでいきます。
「Jar」と「War」の違い「Jar」と「War」はどちらもJava仕様に準拠して定義されたZIP形式のパッケージです。「Jar」はJavaのクライアントアプリケーションやライブラリとして使用されるのに対し、「War」はJavaのWebアプリケーション（サーブレットやJSPなど）をWebサーバーやアプリケーションサーバー（Tomcat、Jettyなど）にデプロイするために使用されます。

 7.Javaのバージョンを選択私は17を選択しました。

 8.使用パッケージの選択4つ追加しました。必須ではないです。
Lombok：getterとsetterの記述などを書略できます。

Thymeleaf：vueのディレクティブ（v-bind,v-on,v-text,v-html)みたいなことができるようになるパッケージっぽいです。今回は不要でした。
Spring Boot Devtools：本来Javaはサーバー起動後に変更したァイルの状態を反映させたい場合は手動でサーバーを再起動する必要があります。このパッケージを利用することで自動でファイルの変更を検知し、サーバーをリスタートしてくれるようになるため、開発効率が格段に向上します。
Spring Web：Spring MVC を使用して、RESTful を含むWebアプリケーションを構築します。

 9.プロジェクトが作成されたことを確認

tomonori

 2.APIを作成するこの記事（VSCode環境でREST APIを作成してみる）を参考に進めていきます。

 必要に応じてポートの変更フロントエンドとバックエンドのローカルサーバーのポートが被る場合があります。その場合はフロントエンドと被らないポート名（私は8081にします）を選び、src/main/resources/application.propertiesにserver.port=8081を追加します。

 確認用のAPIを作成
 ファイルの追加src/main/java/com/backend/に以下のファイルを作成
Greeting.java：入出力の調整
GreetingController.java：API処理の窓口



 プログラムの追加以下の内容をコピペしてください。
GreetingController.java
package com.backend;

import java.util.concurrent.atomic.AtomicLong;

import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

@RestController
public class GreetingController {
    
    private static final String template = "Hello, %s!";
    private final AtomicLong counter = new AtomicLong();

    @GetMapping("/greeting")
    public Greeting greeting(@RequestParam(value = "name", defaultValue = "World") String name) {
        return new Greeting(counter.incrementAndGet(), String.format(template, name));
    }
    
}
GreetingController.java
package com.backend;

public record Greeting(long id, String content) {
}

 サーバーを起動BackendApplication.javaを開いて、画面右上の実行ボタン「Run java」をクリックします。


 作成したGreetingAPIの結果を確認http://localhost:8081/greetingにアクセスし、以下のようになっていれば成功です。

tomonori

3.フロントエンドからAPIを呼び出す

前章で作成したGreetingAPIをフロントエンドから呼び出してみます。

呼び出してみる

フロントエンド側で以下の処理を追加して呼び出してみます。

try {
    const res = await fetch('http://localhost:8081/greeting')
} catch (e) {
    console.log(e)
}

呼び出した結果、エラーになってしまいました。

これは意図した結果で、ブラウザでは異なるオリジンへのアクセスは許可されていません（同一オリジンポリシー）。しかし、これだと不便な部分が多いのでCORS（Cross-Origin Resource Sharing）を設定することで異なるオリジンへのアクセスを許可させることができます。

そのため、バックエンド側でsrc/main/java/com/backend/配下にconfigフォルダを作成し、以下の内容のWebConfig.javaファイルを作成します。

WebConfig.java

package com.backend.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(@SuppressWarnings("null") CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://localhost:3000")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowedHeaders("*")
                        .allowCredentials(true);
            }
        };
    }
}

CORSの設定をすることで、フロントエンドからGreetingAPIを呼び出せるようになりました。