Problem of api server url when i hosting vue.js in firebase

vue로 웹을 만들다보면 api를 호출할 일이 생기기 마련이다. frontend와 backend api server 도메인이 다르다면, CORS문제도 생기게 된다.
proxy 를 설정해줌으로써 local에서만 문제를 해결할 수 있다.
vue.config.js 부분에

module.exports = {
  // options...
  devServer: {
        proxy: 'https://backend.test/',
    }
}

코드를 삽입해주면 해결 된다.

그렇지만 실제 호스팅에서는 프록시를 찾지 못하고 frontend 서버도메인으로 연결되는 문제가 생긴다.

이때 .env.production 파일을 새로 생성 하면 된다.

.env.production 파일에 변수명을 설정한다.

APP_API_URL = https://backend.test/

다음 axios를 쓰는 부분에가서

axios
  .get('https://backend.test/v1/bpi/currentprice.json')
  .then(response => (this.info = response.data.bpi))
  
  => 이부분을 수정한다.
  
axios
  .get(`${process.env.APP_API_URL}/v1/bpi/currentprice.json`)
  .then(response => (this.info = response.data.bpi))
  

이라고 쓰고 호스팅하면 해결된다.

이렇게 쓰면 proxy를 쓰는것이 아니므로 .env 파일 안에도 똑같이 변수를 선언해주면 개발 환경에서도 동시에 사용할 수 있게된다.

.env

APP_API_URL = https://backend.test/