[Docker] Vueでaxiosを使うときにbaseurlを設定する方法

はじめまして、普段はproduct managerをやっているtatsukenと申します。
研修の一環でvue.js、expressを書くことがあったので、そのことを中心にまとめていきたいと思います

はじめに

フロントエンドとapiをdockerで別々のサーバーとして立ち上げているときに、フロントからいちいちエンドポイントを指定するのが面倒だったので、いろいろ調べたmemo

何をするのか

vueからaxiosを用いてapiリクエストを行う際、いちいちURLを指定するのは面倒。

sample.js

import Axios from 'axios'
async getAmount() {
        try {
            const res = await Axios.get(`http://localhost:8081/hoge`);
            console.log(res.data);
        } catch (error) {
            console.log(error);
        }
    }

このように毎回http://localhost:8081/hogeというようにurlを指定するのは面倒
できれば/hogeというように簡潔にエンドポイントを指定したい

解決策

まずdocker-compose.ymlでvueプロジェクトのdockerイメージ以下のenvironmentにVUE_APP_API_ENDPOINT: http://http://localhost:任意のport番号を追加する

docker-compose.yml

services:
  web:
   ...
    environment:
       VUE_APP_API_ENDPOINT: http://localhost:8081 //任意のport番号を指定
   ...

vueプロジェクト内のmain.jsに以下を追記

main.js

import Axios from 'axios'
Axios.defaults.baseURL = process.env.VUE_APP_API_ENDPOINT;

これで以下のように簡潔に書けるようになります

sample.js

import Axios from 'axios'
async getAmount() {
        try {
            const res = await Axios.get(`/hoge`);
            console.log(res.data);
        } catch (error) {
            console.log(error);
        }
    }

最後に

エンドポイントへのリクエストが増えれば増えるほどURLの指定は面倒になってくるので、よければ試してみてください。
なにか間違いなどありましたら指摘していただけると幸いです。