Vue.js + Spring Boot + Heroku（サンプルAPI作成） – 若手SIerサラリーマンの独学メモ

内容

Vue.js + Spring Boot + HerokuでSPAを作成しました。
Vue.jsとSpring Bootは同じリポジトリ上で管理し、ビルドも同時に実施します。
それにより、最低限のソースコード管理とHerokuへのデプロイ時にまとめてビルドする状態を実現しました。
本記事は第五弾最終回として、APIサンプルを実装し、ログイン有無によるアクセス制御が実施されているか確認します。

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作成）

Spring BootにサンプルAPIを実装

Spring BootでサンプルAPIを作成します。
src/main/java/com/example/demo/配下にSampleController.javaを作成します。

SampleController.java

src/main/java/com/example/demo/
├── BaseController.java
├── DemoApplication.java
├── Html5HistoryModeResourceConfig.java
├── SampleController.java
├── SecurityConfig.java
├── SpaAuthenticationFilter.java
└── UserForm.java

src/main/java/com/example/demo/

├── BaseController.java

├── DemoApplication.java

├── Html5HistoryModeResourceConfig.java

├── SampleController.java

├── SecurityConfig.java

├── SpaAuthenticationFilter.java

└── UserForm.java

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api")
public class SampleController {

    @GetMapping("/sample")
    @ResponseBody
    public String getSample(){
        return "リクエスト成功";
    }
    
}

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.bind.annotation.RestController;

@RestController

@RequestMapping("/api")

public class SampleController {

@GetMapping("/sample")

@ResponseBody

public String getSample(){

return "リクエスト成功";

}

Spring Boot起動中の場合は一旦終了（■マーク）し、Spring Bootを起動（▶︎マーク）。

VueにサンプルAPIを実装

コンポーネント内でaxiosを使用できるようにするため、src/vue/src配下のmain.jsに追記。

main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios';
import store from './store';

Vue.config.productionTip = false

axios.defaults.baseURL = '/api';

// 追記
Vue.prototype.$axios = axios;

// Cookieを有効にする。
axios.defaults.withCredentials = true;

new Vue({
    store,
    render: h => h(App)
  }).$mount('#app');

import Vue from 'vue'

import App from './App.vue'

import axios from 'axios';

import store from './store';

Vue.config.productionTip = false

axios.defaults.baseURL = '/api';

// 追記

Vue.prototype.$axios = axios;

// Cookieを有効にする。

axios.defaults.withCredentials = true;

new Vue({

store,

render: h => h(App)

}).$mount('#app');

src/vue/src配下のApp.vueにサンプルAPIへリクエストするボタンを設置。

App.vue

<template>
    <div>
      <template v-if="!this.$store.getters.isAuthenticated">
        <input type="text" v-model="id">
        <input type="password" v-model="password">
        <button @click="login">ログイン</button>
      </template>
      <template v-if="this.$store.getters.isAuthenticated">
        <p>{{this.$store.getters.id}}さん</p>
        <button @click="logout">ログアウト</button>
      </template>
      <!-- ↓追記↓ -->
      <button @click="requestApi">ログインしないと失敗するリクエスト</button>
      <p>{{result}}</p>
      <!-- ↑追記↑ -->
    </div>
</template>


<script>
export default {
  data() {
    return {
      id: '',
      password: '',
      // ↓追記↓
      result: '',
      // ↑追記↑
    };
  },
  methods: {
    login() {
      this.$store.dispatch('login', {
        id: this.id,
        password: this.password
      });
      this.id = '';
      this.password = '';
    },
    logout() {
      this.$store.dispatch('logout');
    },
    // ↓追記↓
    requestApi() {
      this.$axios
        .get('/sample')
        .then(response => {
          this.result = response.data;
        })
        .catch(error => {
          this.result = error;
        })
    }
    // ↑追記↑
  }
};
</script>

<div>

</template>

<p>{{this.$store.getters.id}}さん</p>

<button @click="logout">ログアウト</button>

</template>

<button @click="requestApi">ログインしないと失敗するリクエスト</button>

<p>{{result}}</p>

</div>

</template>

export default {

data() {

return {

id: '',

password: '',

// ↓追記↓

result: '',

// ↑追記↑

};

methods: {

this.$store.dispatch('login', {

id: this.id,

password: this.password

});

this.id = '';

this.password = '';

logout() {

this.$store.dispatch('logout');

// ↓追記↓

requestApi() {

this.$axios

.get('/sample')

.then(response => {

this.result = response.data;

})

.catch(error => {

this.result = error;

})

}

// ↑追記↑

}

};

</script>

(vue-CLIでの確認は省略します。)
Spring Bootでホストした挙動を確認するため、IntelliJ右側のMavenタブを開き、maven installを実行してVueをビルド。

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

cd src/vue
npm install
npm build

cd src/vue

npm install

npm build

Spring Boot起動中の場合は一旦終了（■マーク）し、Spring Bootを起動（▶︎マーク）。http://localhost:8080/へアクセスし、トップページを確認。
※Springで環境変数毎に異なるDBを設定する。のデータであれば「user1, password」「user2, password」でログインできます。

Herokuにデプロイ

Herokuにデプロイして挙動を確認します。

$ heroku login
# Enterキーをクリックしてログイン。
$ cd demo/   # プロジェクトのあるディレクトリ
$ git add .
$ git commit -m 'ログインログアウトサンプルを実装'
$ git push heroku master

$ heroku login

# Enterキーをクリックしてログイン。

$ cd demo/ # プロジェクトのあるディレクトリ

$ git add .

$ git commit -m 'ログインログアウトサンプルを実装'

$ git push heroku master

Herokuコンソール情のOpen Appまたは、https://[アプリ名].herokuapp.com/へアクセスし、動作を確認。

これにて完了です。おつかれさまでした。