Vue3 + Spring Bootでフロント・バックを分離したアプリのDev環境API通信設定

なにこれ？

フロントエンドとバックエンドアプリケーションを分離したときにAPI通信をする必要があるわけですが、ポート指定とかどうすんのってところで詰まったので備忘録です。

環境

• フロントエンド：Vue3 (vue-cli3)
• バックエンド：Java (Spring Boot)

フロントエンドはvue-cli、バックエンドはSpring Bootでプロジェクトを新規生成して、ざっくりと下のようなフォルダ構成になっているものとします。

root/
  ├ frontend
  │     └　vue-cliで生成したディレクトリ構成
　└ backend
        └  Spring Bootで生成したディレクトリ構成

バックエンド側の設定

Vue側でリクエスト先のポート指定をするために、バックエンド側のポートを設定しておきます。

application.ymlで起動構成を設定できるので、下のようにポート番号を指定しておきます。DBの接続情報なんかもここで設定していますね。

application.yml

spring:
  datasource:
    url: jdbc:postgresql://localhost:5432/hoge
    username: fuga
    password: fuga
    driver-class-name: org.postgresql.Driver
server.port: 8081

application.ymlの場所はsrc/main/resources配下です。

フロントエンド側の設定

vue-cli3でフロントエンドプロジェクトを生成した際はvue.config.jsに起動構成を設定します。詳しいことはvue-cli公式を参照してください。パスによって振り分けるみたいなこともできるそうです。

vue.config.js

module.exports = {
    devServer: {
        proxy: 'http://localhost:8081'
    }
}

vue.config.jsの場所はこの記事の例でいうとfrontend配下で、package.jsonとかがいる場所になります。