はじめに

研究の一環で，DjangoRESTframework(以下DRF)とVue.jsを使ってWebアプリを作ることになり，Webアプリ初心者の私が丸１日嵌ってしまった問題について書いています．同じような方の参考になれば幸いです．

問題背景

Docker ComposeでDRFとVue.jsの環境構築を行いました．以下の記事を参考に，それぞれのコンテナ内でチュートリアルを済ませたものの，コンテナ間のAPI通信がうまくいかず躓いてしまいました．

エラー内容としては，Vue Routeを利用してSPAのルーティングを行なった際，localhostにアクセスすると適切なページが表示されなかった，というものです．

環境

今回問題が発生した環境を以下にまとめます．

バージョン
- vue: 5.0.8
- django: 4.2
DjangoとVue.jsのコンテナは同一のコンテナネットワーク内に配置されている
コンテナのポート番号はそれぞれ8000番と8080番を使用

原因

色々と調べてみると，今回のエラーの原因となっている箇所が２つありました．

その１コンテナ間のURL指定

以下のvue.config.jsファイル内のtarget: "http://localhost:8000/",部分が原因のようです．

vue.config.js

 devServer: {
    host: "localhost",
    hot: "only",
    proxy: {
      "^/api": {
        target: "http://localhost:8000/",
        changeOrigin: true,
      },
    },
  },

どうやらVueコンテナでlocalhostと記述すると，そのコンテナ内でポート番号を探索するため，別のコンテナにアクセスする場合は，localhostの代わりにコンテナのサービス名を記述する必要があるみたいです．

その２　ポート番号の重複

Vueコンテナでは，コンテナ外からのアクセスのポート番号を8080番としている．この状態でVueの開発サーバーをポート番号8080番で立ち上げると，ポートの競合が発生してしまい，コンテナ外との通信がうまういかなくなってしまいます．
そのため，vueの開発サーバーのポート番号を変更する必要があります．

解決方法

上記２つの問題を解決するためにvue.config.jsファイルを以下のように変更します．

vue.config.js

 devServer: {
    host: "localhost",
    port: 8081,      // サーバーのポート番号を8081に変更
    hot: "only",
    proxy: {
      "^/api": {
        target: "http://django:8000/",   // 'localhost'の代わりに'コンテナのサービス名を使用'
        changeOrigin: true,
      },
    },
  },

これにより，DRFコンテナとVueコンテナ間のAPI通信が可能になりました！

参考