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

概要

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://qiita.com/kai_kou/items/d581a9f8f3ee8605aed1

Dockerとapi blueprint+aglio+drakovを使ってAPI開発を楽にする
https://qiita.com/kai_kou/items/feca8974f3967a285ff4

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://qiita.com/kai_kou/items/d581a9f8f3ee8605aed1

Dockerとapi blueprint+aglio+drakovを使ってAPI開発を楽にする
https://qiita.com/kai_kou/items/feca8974f3967a285ff4

Vue.js+TypeScriptで開発するときの参考記事まとめ
https://qiita.com/kai_kou/items/19b494a41023d84bacc7