概要
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