java Spring Vue

Vue.js + Spring Boot + Heroku(プロジェクト作成~ビルド)

更新日:

内容

Vue.js + Spring Boot + HerokuでSPAを作成しました。
Vue.jsとSpring Bootは同じリポジトリ上で管理し、ビルドも同時に実施します。
それにより、最低限のソースコード管理とHerokuへのデプロイ時にまとめてビルドする状態を実現しました。
本記事は第一弾として、プロジェクト作成〜ビルドまでを紹介します。

Github

Vue.js + Spring Boot + Heroku(はじめに 兼 まとめ)

Vue.js + Spring Boot + Heroku(プロジェクト作成~ビルド)

Vue.js + Spring Boot + Heroku(Herokuへデプロイ〜環境毎プロパティファイル作成)

Springで環境毎に異なるDBを設定する。

Vue.js + Spring Boot + Heroku(認証作成 Spring Boot編)

Vue.js + Spring Boot + Heroku(認証作成 Vue編)

Vue.js + Spring Boot + Heroku(サンプルAPI作成)

前提

・Herokuに登録済であること。
・Heroku CLIがインストール済であること。
・SprintToolSuiteがインストール済であること。(プロジェクト作るだけ)
・IntelliJがインストール済であること。(IDEとして使うだけ)
・npmが使用可能であること。
・Vue-CLIがインストール済であること。
・ポート8080と8081が使用されていないこと。

ディレクトリ構成

src配下は下記の通りです。
vue配下にソースコード管理して、ビルド時にresorce/vue配下に生成しSpringが使用される。

Spring Bootプロジェクト作成

Spring Bootのプロジェクトを作成します。
IntelliJで作成したかったのですが、(コミュニティだから?)作成するものが見当たらず、STS(Spring Tool Suite)で作成しました。

新規のワークスペースを作成し、「新しいSpringスターター・プロジェクトを作成する」から作成開始。
とりあえずデフォルト設定+(java11は用意してないので)java 8を指定。

Spring webを追加して完了をクリック。

STS(というかEclipse)は使いづらいので一旦終了。IntelliJ(コミュニティ版)で開発します。

IntelliJを開き、
Open or Importからdemo(作成したプロジェクトのディレクトリ)を指定
聞かれたらMaen projectを選択

DemoApplicationを右クリックし、RunすることでSpring bootを起動できます。

以降は右上の▶︎で起動できます。

Spring Bootの作成は一旦完了です。

Vueプロジェクトを作成

Vueの作成をします。事前にVue CLIをインストールしてください。
まずはコマンドラインからVue CLI UIを起動。

Vueプロジェクトマネージャで作成をクリック
「demo(プロジェクト名)/src」を開き、「ここに新しいプロジェクトを作成する」をクリック
プロジェクトフォルダに「vue」と入力して次へをクリック

デフォルトプリセットを選択して「プロジェクトを作成する」をクリック

プロジェクト作成後はVue用のディレクトリに配置したいので、設置→Vue CLI→公開パスに「/vue」を指定して変更を保存をクリック。

設定を完了するとvue.config.jsが作成されます。

package.jsonのscriptsを修正して、ビルド時の出力先を指定。
加えて、Vue CLIのローカルサーバのポートがSpring Bootと被るため8081へ変更。

Spring BootのビルドでVueもビルドする

heroku gitによるソースコード管理は「.vue」ファイルのみにして、ビルドして生成される「.js」は管理せずにHerokuによるSpringのビルド時に一緒にビルドされ配置されることが理想的です。

pom.xmlへmavenでvueのビルドを追記。
参考:A Lovely Spring View: Spring Boot & Vue.js
ついでにlombokも追加


pom.xml

右側のMavenタブを開き、グルグルマーク(Reload All Maven Projects)をクリック

src > main > java > com.example.demo配下にBaseController.javaを作成して設定。


BaseController.java

historyモードを実現する場合、API以外のURLに対するアクセスはSPAを返却する必要があるため、存在しないULRへのアクセスは固定でファイルを返すよう指定。
参考:SPA(Nuxt.js)をSpring Bootからホストする方法
src > main > java > com.example.demo配下にHtml5HistoryModeResourceConfig.javaを作成。


Html5HistoryModeResourceConfig.java

右側のmavenタブを開き、cleanとinstallを実行してVueをビルド。

【追記】windows環境の場合、npmコマンドの–prefixオプションが意図した動作をしません。手動でのビルドが必要です。

Spring Boot起動中の場合は一旦終了(■マーク)し、Spring Bootを起動(▶︎マーク)してサーバを起動。http://localhost:8080/へアクセスし、トップページを確認。

demo配下の.gitignoreへ追記

次章

-java, Spring, Vue

Copyright© 若手SIerサラリーマンの独学メモ , 2021 All Rights Reserved Powered by STINGER.