SpringBoot+Vueなアプリケーションを構築する

目標

• サーバーサイドはSpring
• フロントはVue
• npmの恩恵を受けたい
• アウトプットはJarだけ

リポジトリ

構築

ディレクトリ構成

• Spring Initializr等で出来たSpringプロジェクト直下にwebディレクトリを作成
• そこにvue-cliを使ってvueのプロジェクトを作成する

.
├── .gitignore
├── build.gradle
├── gradle
├── gradle.properties
├── gradlew
├── gradlew.bat
├── settings.gradle
├── src
|   ├── main
|   └── test
└── web
    ├── public
    ├── src
    ├── .gitignore
    ├── babel.config.js
    └── package.json

VueProjectの設定

• デフォルトのポートがSpringと被るので8081へ変更
• build時の出力先を/src/main/resources/static/に指定

package.json

  "scripts": {
    "serve": "vue-cli-service serve --port 8081",
    "build": "vue-cli-service build --dest ../src/main/resources/static/",
    "lint": "vue-cli-service lint"
  }

SpringProjectの設定

• 画面のリソースはVue側で自動生成するのでstaticディレクトリを.gitignoreにまるっと登録

.gitignore

src/main/resources/static/

• リソース生成時にvue側のbuildを実行する
• --prefixでnpmを実行するディレクトリを直接指定する
• node_modulesディレクトリが存在しないときのみnpm installする

build.gradle

task npmRunBuild() {
    if (!file("${rootDir}/web/node_modules").exists()) {
        "npm --prefix ${rootDir}/web install ${rootDir}/web"
                .execute()
                .waitForProcessOutput(System.out, System.err)
    }
    "npm --prefix ${rootDir}/web run build"
            .execute()
            .waitForProcessOutput(System.out, System.err)
}

processResources {
    dependsOn npmRunBuild
}

• 開発中はSpringとVueを別々に起動することも考えられる。
  開発中のみ8081からのアクセスを許可するようCorsの設定を追加する

WebConfig.kt

    override fun addCorsMappings(registry: CorsRegistry) {
        registry.addMapping("/**")
            .allowedOrigins("http://localhost:8081")
            .allowedMethods("GET", "POST")
            .allowCredentials(false)
            .maxAge(3600);
    }

実行

$ ./gradlew bootRun

その他

• npmのビルドが毎回走るから起動が物凄く遅い、、、
• フロントエンド作成時はnpm run serveしながら