IK.AM

@making's tech note


Spring WebFlux.fnハンズオン - 5. Web UIの追加


本ハンズオンで、次の図のような簡易家計簿のAPIサーバーをSpring WebFlux.fnを使って実装します。 あえてSpring BootもDependency Injectionも使わないシンプルなWebアプリとして実装します。

ハンズオンコンテンツ

  1. はじめに
  2. 簡易家計簿Moneygerプロジェクトの作成
  3. YAVIによるValidationの実装
  4. R2DBCによるデータベースアクセス
  5. Web UIの追加 👈
  6. 例外ハンドリングの改善
  7. 収入APIの実装
  8. Spring Bootアプリに変換
  9. GraalVMのSubstrateVMでNative Imageにコンパイル

Web UIの追加

APIに対するWeb UIを追加します。

pom.xmlに次のrepositoryを追加してください。

    <repositories>
        <!-- 追加 -->
        <repository>
            <id>jitpack.io</id>
            <url>https://jitpack.io</url>
        </repository>
        <!-- ... -->
    </repositories>

pom.xmlに次のdependencyを追加してください。

        <dependency>
            <groupId>com.github.making</groupId>
            <artifactId>moneyger-ui</artifactId>
            <version>master-SNAPSHOT</version>
        </dependency>

App.javaに次のメソッドを追加してください。

    static RouterFunction<ServerResponse> staticRoutes() {
        return RouterFunctions.route()
            .GET("/", req -> ServerResponse.ok().bodyValue(new ClassPathResource("META-INF/resources/index.html")))
            .resources("/**", new ClassPathResource("META-INF/resources/"))
            .filter((request, next) -> next.handle(request)
                .flatMap(response -> ServerResponse.from(response)
                    .cacheControl(CacheControl.maxAge(Duration.ofDays(3)))
                    .build(response::writeTo)))
            .build();
    }

routesメソッドを次の箇所を

    static RouterFunction<ServerResponse> routes() {
        // ...

        return new ExpenditureHandler(new R2dbcExpenditureRepository(databaseClient, transactionalOperator)).routes();
    }

次のように変更してください。

    static RouterFunction<ServerResponse> routes() {
        // ...

        return staticRoutes()
            .and(new ExpenditureHandler(new R2dbcExpenditureRepository(databaseClient, transactionalOperator)).routes());
    }

Appクラスのmainメソッドを実行して、http://localhost:8080にアクセスしてください。

image

image

Cloud Foundryにデプロイ

ビルドしてcf pushしてください。

./mvnw clean package -DskipTests=true
cf push

image

Kubernetesにデプロイ

$ pack build <image-name> --builder cloudfoundry/cnb:bionic --publish

# 例: pack build making/moneyger --builder cloudfoundry/cnb:bionic --publish

または

$ ./mvnw clean package -DskipTests=true
$ pack build <image-name> -p target/moneyger-1.0.0-SNAPSHOT.jar --builder cloudfoundry/cnb:bionic --publish

# 例: pack build making/moneyger -p target/moneyger-1.0.0-SNAPSHOT.jar --builder cloudfoundry/cnb:bionic --publish

を実行して、

kbld -f moneyger.yml | kubectl apply -f - 

を実行してください。


興味があれば自分の好みのUIを実装してください。


✒️️ Edit  ⏰ History  🗑 Delete