LoginSignup
2
1

More than 3 years have passed since last update.

Vue.js + Jerseyデスクトップアプリ

Last updated at Posted at 2020-05-07

先日、簡易的なデスクトップアプリの実装例としてvue-nest-desktop-appVue.js + NestJSでデスクトップアプリを実装する)を紹介したが、バックエンドの開発はNode.jsよりもJava(Spring Boot + Jersey)の方が慣れているので、バックエンドをJavaで置き換えたvue-jersey-desktop-appを作成した。

以下では開発のポイントを簡単にまとめている。

アプリケーション構成

システム構成.png

  • バックエンドはSpring Bootで開発している。埋め込みTomcatを組み込んだ実行可能jarファイル(いわゆるfat jar)にビルドして配布し、ローカルで起動したアプリケーションサーバーにブラウザからアクセスして利用する構成としている。
  • フロントエンドはVue.jsで実装し、ビルドしたHTML、CSS、JavaScriptをバックエンドのWebサーバー機能(spring-boot-starter-web)で静的ファイルとして配信する。
  • 主な機能はバックエンドでRestful API(spring-boot-starter-jersey)として提供し、フロントエンドからのAPI呼び出しで利用する形としている。

Spring Bootのデスクトップアプリ化

Spring Bootをデスクトップアプリ化するために以下の工夫を入れている。

  • ログをSwingで実装したウィンドウに表示し、ウィンドウを閉じたときにアプリケーションが停止するようにする。(jarを実行したときにアプリケーションがバックグラウンドで起動するだけでは、起動中かどうかの判別や、プリケーションの停止がしにくいため。)
  • アプリケーションサーバーはローカルマシンの空きポートを探して起動し、起動後にシステム(デフォルト)ブラウザでフロントエンドのトップ画面を自動で開く処理を入れている。

外部のRestful APIの呼び出し

ローカルで動作するWebサーバーでホストされたフロントエンドにブラウザでアクセスするため、他のオリジンとなる外部のWeb APIにフロントエンドから直接アクセスすることができない。そのため、バックエンド側でAPIのプロキシ機能(開発用のクローズドなAPIにもアクセスできるようにSSHポートフォワーディングにも対応)じを実装している。

参考:ApiProxy.java

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1