docker composeのdocker networkでフロントエンドとバックエンドの通信が名前解決できない
概要
docker-compose で、フロントエンド、バックエンド、DB サーバのコンテナを立ち上げました。
そのときに、コンテナネットワークでそれぞれの通信をすれば、開発者以外からは完全に閉じているネットワークができると思って作成しました。
今回作成した docker-compose は以下ようになります。
フロントエンドが React、バックエンドが Node.js(TypeORM)、DB サーバが MySQL といった構成で作成して、それぞれのコンテナに名前をつけました。
backend-container が db-container を参照し、frontend-container が backend-container を参照するように名前解決をしています。
version: "3.5"
services:
frontend:
build:
context: "./project01_frontend"
dockerfile: "Dockerfile.prod"
container_name: frontend-container
restart: always
tty: true
ports:
- "80:80"
env_file:
- "./project01_frontend/.env"
depends_on:
- "db"
- "backend"
backend:
build:
context: "./project01_backend"
dockerfile: "Dockerfile.dev"
container_name: backend-container
restart: always
tty: true
expose:
- "4000"
env_file:
- "./project01_backend/.env"
depends_on:
- "db"
command: ["./wait-for-db-container.sh", "yarn", "start"]
db:
image: mysql:5.7.34
command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
container_name: db-container
volumes:
- ./project01_backend/initdb.d:/docker-entrypoint-initdb.d
environment:
MYSQL_DATABASE: "typeorm_db"
MYSQL_ROOT_PASSWORD: "password"
TZ: "Asia/Tokyo"
restart: "always"
expose:
- "3306"
結論
できません。ブラウザでnet::ERR_NAME_NOT_RESOLVED
というエラーが発生します。
コンテナ内で frontend-container から backend-container の名前解決はできます。
しかし、ブラウザからすると backend-container の名前解決ができないので、エラーが発生しています。
backend-container から db-container の名前解決は一応できています。
ですので、docker-compose を使うとしても DB とバックエンドをまとめてフロントエンドは別にするか、docker-compose を使わずに別々に作成することになります。
参考
https://codechacha.com/ja/dockerizing-react-with-nginx/?_gl=17ol36q_ga*MGVZRGtkTVFIUk8xaUllRlZiQTk1TmRoay00UU92ZDJNUFZTb2NrUHJRTEFsZnpGZmZRWjdxYldtUTlHMzdyVQ
Discussion
フロントエンドが違うので参考なるか分かりませんが、nuxtでは以下の様に解決しました。
フロントエンド起動時に環境変数を渡せればなんとかなります。コメントのほどありがとうございます。
紹介していただいた記事は、バックエンドもコンテナで起動してコンテナ名を与えている場合ですかね?
この記事で書きたかったのはコンテナに環境変数を与える方法ではなく、「docker-composeで複数のコンテナを起動したときに、コンテナ名をつける。そのコンテナ名をつかってブラウザからバックエンドにアクセスできるか」ということでした。
結局のところ、フロントエンドのコンテナがバックエンドのコンテナを名前解決できても、ブラウザはバックエンドのコンテナを名前解決できない、ということを伝えたかった次第です。
そういう意味では、フロントエンドとバックエンドは直接通過は出来ませんね。