概要

docker-composeを利用して、Vue.jsのコンテナ、APIモックサーバのコンテナを作成して、開発をしているのですが、gitリポジトリを別にしようとするとdocker-compose.ymlを分割→ネットワークが別になってコンテナ内からAPIへアクセスできなくなって困った。ので、どうにかならないか調べて見ました。

解決

docker-compose で別の docker-compose.yml で作ったコンテナとリンクする (ネットワークを繋げる)
https://qiita.com/reneice/items/20e981062b093264cd0a

上記記事がとても参考になりました。感謝!

参考までにdocker-compose.ymlの定義です。

Vue.jsやモックサーバのコンテナ構築については下記をご参考ください。

DockerでVue.js+TypeScript開発環境を構築する
https://cloudpack.media/43078

Dockerとapi blueprint+aglio+drakovを使ってAPI開発を楽にする
https://cloudpack.media/43386

APIのdocker-compose.yml

docker-compose.yml

version: '3'

services:
  drakov:
    build: .
    ports:
      - "3001:3001"
    volumes:
      - "./docs:/projects"
    tty: true
    command: drakov -f "**/*.md" --public --watch --p 3001

Vue.js側

docker-compose.yml

version: '3'

services:
  app:
    build: .
    ports:
      - "8080:8080"
    volumes:
      - ".:/projects"
    tty: true
    networks:
      - [APIのネットワーク名]
networks:
    [APIのネットワーク名]:
      external: true

[APIのネットワーク名]はAPIのコンテナを実行後、以下コマンドで取得できるネットワークのリストのNAME になります。

> docker network ls

NETWORK ID          NAME                    DRIVER              SCOPE
xxxxxxxxxxxx        xxxxxx_default          bridge              local

これで、Vue.jsのコンテナ内からAPIモックサーバのコンテナへアクセスできるようになりました。

> curl http://xxxxxx_drakov_1:3001/

やったぜ。

参考

docker-compose で別の docker-compose.yml で作ったコンテナとリンクする (ネットワークを繋げる)
https://qiita.com/reneice/items/20e981062b093264cd0a

DockerでVue.js+TypeScript開発環境を構築する
https://cloudpack.media/43078

Dockerとapi blueprint+aglio+drakovを使ってAPI開発を楽にする
https://cloudpack.media/43386

Vue.js+TypeScriptで開発するときの参考記事まとめ
https://cloudpack.media/43084

元記事はこちら

別docker-compose同士のネットワークを繋げる方法