DockerでのVue開発: vue.config.jsのプロキシ設定

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Vue.jsの解説シリーズです。

今回はDocker環境でのVue.jsのプロキシ設定について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

Docker環境でのプロキシ設定が出来る

Docker環境でのvue.config.jsの設定
1. vue.config.js
まとめ

Docker環境でのvue.config.jsの設定

Docker使用時にはtargetのパスはlocalhostではなく、
コンテナのバックエンドのサービス名を指定する必要があります

今回は以下のような環境で動いている想定となります。

フロント　→　http://localhost:8080
バックエンド　→ http://localhost:3000

Dockerで動いているサービス名を取得するコマンドだよ！

sudo docker-compose config --service

vue.config.js

module.exports = {
  devServer: {
    port: 8080, // フロントエンドのポート
    proxy: {
      '/api': {
        target: 'http://backend:8000', // コンテナのバックエンドのサービス名
        changeOrigin: true,
        pathRewrite: { '^/api': '' }, // '/api' のプレフィックスを削除
      }
    }
  }
};

これでフロントエンドからHTTP通信ができるよ！

fetch(‘api/user’)

フロントエンド：apiの前のスラッシュは不要
バック　エンド：apiの前のスラッシュが必要

まとめ

Docker環境ではvue.config.jsのtargetにコンテナのサービス名を指定する

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram