vue.config.jsの活用例

前提

フロントエンド側をSPAフレームワークを活用して、ウェブサービス・ウェブアプリケーションを開発する際、昨今はRuby on RailsやLaravelなど流行りのバックエンド言語・バックエンドフレームワークと掛け合わせて制作すると思います。
初期開発時にプラグインとしてバックエンド環境に予めVueやReactを実装し、導入しやすくなってきている為です。

今回のプロジェクトでは、Javaを使用しまたディレクトリも分けた状態で開発をした為そういったプロジェクト向けの記事として呼んでいただけますと幸いです。

ログイン機能

おおよそのウェブサービスにあるように今回開発したプロジェクトでもログイン機能がありました。
ログイン画面とログイン処理の責務はJava側で持たせています。
ViewはJavaのテンプレートエンジンのThymeleafを使用しています。

ログイン後、所定のtokenやcookieをブラウザ側に保持させダッシュボードへと繊維します。
ダッシュボードから先の画面および処理はSPA側の責務です。

開発環境での課題

今回のプロジェクトでは前述した通り、Java側とディレクトリが分かれた状態でスタートしています。
つまり、それぞれの開発環境を立ち上げるコマンドもホストも分離した以下の状態になっていました。
Java

• Project起動
• localhost:8080にアクセス
  Vue.js
• $ yarn serve起動
• localhost:8888にアクセス

この為、APIの結合の確認もログイン画面からの繊維およびログイン評価が否定だったときのリダイレクト処理などあらゆる結合関係がローカルで確認することが容易にはできませんでした。

解決策

vue.config.jsのproxyに記載することで解決できました。

module.exports = {
  devServer: {
    port: 8888,
    disableHostCheck: true,
    host: 'localhost',
    proxy: {
      '/api': {
        target: 'http://localhost:8080'
      },
      '/top': {
        target: 'http://localhost:8080'
      },
      '/login': {
        target: 'http://localhost:8080'
      }
    }
  },
}

まとめ

今回のようなシーンはあまり、ないかもしれませんがもし似たようなシーンがあれば参考にしてみてください。
もし、他に良い解決策をご存知の方はコメントでご教示いただけますと幸いです。