ハマったところをメモしていきます。

若手SIerサラリーマンの独学メモ

java Spring Vue

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

更新日:

内容

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

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

VueにサンプルAPIを実装

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

main.js

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

App.vue

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

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

Herokuにデプロイ

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

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

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

-java, Spring, Vue

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