1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

開発ド素人がVisual Studio Code を使ってSPA+Spring Boot2なアプリケーションをローカルで稼働させるまで

Last updated at Posted at 2019-08-15

初めての投稿になります。
そのくせ仕事の経験談なのであまりキャプチャを使えず、かといって自分で再現画面を作る技術や時間がないため基本的に文章のみの記事となってしまいますがよろしくお願いします。面倒な方は3-4まで飛んで頂ければ正しい手順が書いてあります。

#1.なぜVisual Studio Codeなのか
タイトルにも書いているようにSpringBootを使っているわけなので当然Javaの開発環境として最もメジャーなEclipseが第一の選択肢になるかと思いますが、ネット情報を見る限りVisualStudioCode(以下VSC)が今最もホットなIDEなのは明らかだったのでやってみることにしました。軽薄ですね。
VSCのインストールにはQiitaの諸先輩方をはじめ、様々なネット記事を参考にさせて頂きました。ありがとうございます。

#2.とりあえずF5してみた。
とりあえずJava11だか12をインストールして、環境変数に入れて、VSCに連携させて...(※1)、Springboot2とJavaの開発に必要なExtentionをモリモリ入れて...ちょくちょくF5ボタンを押して何とかDEBUG CONSOLEでSPRINGのロゴが流れる所までは行きました。ただ、これだとSPA部分は全く動いてないのでまだスタートラインとも言えないようなレベルです。

#3.デバッグ成功に至るまでの長い道のり
##3-1. どうやったらデバッグできるのか?
SPA+Springboot2で開発した事例がレアすぎるのかは分からないけどネット情報を見ても日本語では殆んど事例が発見できなかったので仕方なく英語記事を中心に探しました。そこでようやくMavenがカギを握っているっぽいということには気付けました。(遅い)

##3-2. 足りないのはwarだった?
何でmaven使っていると分かったのかというとpom.xmlというところにmavenと書いてあったからです。色々調べてみた結果JAVAのアプリケーションをビルドするのにはメジャーなOSSだということでこれまたネット検索してみましたが、これまた日本語情報少なくて苦労しました。最終的に「mvn clean package」でwarファイルを作成してTomcatでデプロイすれば何とかなると思ってやってみました。(※2)
ただ、これもリンク先にあるようなVSCの「Deploy to Web App」からやるのか、はたまたできあがったwarファイルを自分でインストールしたTomcat(8? 9?)に入れるのかとかパターンが結構あった割には結局全部ダメでした。Tomcat の画面が出るのですが、application.propertiesで設定したportにアクセスしても404でアクセスできなかったです。

##3-3. 振り出しに戻る...からの大逆転
そろそろ気持ちが折れてしまうかと思われましたが引き続きGoogole先生に「java maven visual studio code deploy build」みたいな感じで英語ページを検索していると、今までなかったやり方で解決方法を紹介しているページがありました。(※3)
またダメかなーと思ってやってみたところ、これで解決できました!
なお、メモリは結構食ってましたが、debug consoleには受け渡ししたパラメータとかリアルタイムで流れるので実際の動作確認とかでも結構使えるのでは?と思いました。

##3-4. 手順まとめ
①VSCから該当プロジェクトのフォルダを開く。 
※このソースが実際に動くものでないと以下手順はどうなるかわかりません。
②コマンドパレット(ctrl+shift+P)を押してTasks: Configure task ⇒Create tasks.json from template (mavenを選択する)
④task.json に以下を追加
{
"label": "compile",
"type": "shell",
"command": "mvn -B compile",
"group": "build"
},
⑤コマンドパレット(ctrl+shift+P)を押してTasks: Run Build Task⇒compile⇒Continue without scanning the task output
⑥必要があればapplication.propertiesの中身をいじる。
※私は開発用のIPアドレスからlocalhostに切り替える必要があったので手順に入ってます。
⑦VSCでtargetフォルダの中にできたコンパイルファイルの一部を適当に選択してF5もしくはctrl+shift+D ⇒JAVAを選択⇒launch.jsonができる
⓼VSCでtargetフォルダの中にできたコンパイルファイルの一部を適当に選択してF5もしくはctrl+shift+D

application.propertiesで指定したアドレスにアクセスしてログイン画面が出たら成功!
ここまで読んでくれた方、ありがとうございました!

#4.そして再度闇の中へ...
成功に気を良くして2週間ほど触らずにいたところ、久しぶりに上記手順を試したら、「method 〇〇 is undefined 」みたいなエラーで全くデバッグ?ビルド?できない事態になってしまいました。直前まで動いていたのであまり気にしていませんでしたが、壮絶にドはまりしました。
解決策をサクッと言ってしまうと、ソースが更新されたことにより使用しているOSSのバージョンが上がったからでした。VSCのTERMINALで「npm outdated」とすると、UPDATEが必要なOSSが赤く表示されていたので、続けて「npm update」するとJavaのエラーは消えました。プログラマーの人たち、ちゃんと最新版にしてて偉いなあ、基本手順をしっかり確認しないといけないなあと気づかされました。

(※1)https://qiita.com/kare/items/11309fef5822788501b5
(※2)https://code.visualstudio.com/docs/java/java-webapp
(※3)https://stackoverflow.com/questions/46671308/how-to-create-a-java-maven-project-that-works-in-visual-studio-code?rq=1

1
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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?