フロントエンドVue.jsとバックエンドJavaを同時にローカルで立ち上げて疎通確認

やりたいこと

• フロントエンドとバックエンドの疎通確認をローカルで行いたい
  

状況

• フロントエンドとバックエンドは別々の言語で開発している
  • フロントエンドはJavaScript、Vue.jsで実装
  • バックエンドはJava、Springで実装、REST API
• 実行確認の際は、各プロジェクトを個別にlocalhost:8080で立ち上げて確認していた
• フロントエンドとバックエンドを同時に立ち上げて疎通確認をするにはどうしたらよいのかがわからなかったので調べて実行してみた

どうすればできそうか

• フロントエンドとバックエンドそれぞれを、異なるポート番号を指定して立ち上げる
• フロントエンド側からバックエンド側のAPIをたたく

やったこと

• バックエンドのJavaをlocalhost:8080 で立ち上げ、フロントエンドのVue.jsをlocalhost:3000 で立ち上げる
  • イメージは以下ページの"前提条件"項の末尾にある図
    • https://ichi.pro/java-bakku-endo-o-shiyoshite-vue-js-apuri-o-kaihatsu-oyobi-kochikusuru-hoho-86438141725925
  • フロントエンド側は以下のコマンドで立ち上げる
    • npm run serve -- --port 3000
    • ブラウザでhttp://localhost:3000/ で起動していることを確認
      • https://stackoverflow.com/questions/47219819/how-to-change-port-number-in-vue-cli-project
  • バックエンド側は個別に立ち上げていた時と同じように立ち上げる
    • 自分の場合は使用しているIDEの実行ボタンで実行していた
• フロント側のVue.jsでは、axiosを使用してhttpリクエスト送信
  • 例：axios.get('http://localhost:8080/api/todoList')
  • https://qiita.com/ksh-fthr/items/2daaaf3a15c4c11956e9