react+express(docker)環境構築での問題

問題内容

reactコンテナからexpressコンテナに向けてコンテナ間通信しようと思ったら、なぜか名前解決できないと言われた。

背景

コンテナでreactとexpressの開発環境を構築。

ディレクトリ構造は以下。

app_name/
　┣client/
　┃　┣dockerfile
　┃　┗app/(react)
　┣server/
　┃　┣dockerfile
　┃　┗app/(Express)
　┗docker-compose.yaml

docker-compose.yaml

version: "3"
services:
  client:
    build: ./client
    container_name: client
    hostname: client
    environment:
      - NODE_ENV=DEVELOPMENT
      - PORT=3000
    volumes:
      - ./client/app:/usr/src/app
    ports:
      - 3000:3000
    working_dir: /usr/src/app
    command: sh -c "npm start"
  server:
    build: ./server
    container_name: server
    hostname: server
    environment:
      - NODE_ENV=DEVELOPMENT
      - PORT=3001
    volumes:
      - ./server/app:/usr/src/app
    ports:
      - 3001:3001
    working_dir: /usr/src/app
    command: sh -c "npm install -g nodemon && nodemon index.js"

composeファイルにcmdやらを全て書いている。

ローカルのディレクトリとコンテナのディレクトリを共有するように書いている。

これは、ローカルでコードを更新してもそれがコンテナ内で反映されるようにバインドマウントを採用している。

reactの場合、ホットリロードするためにはpackage.jsonにちょっと書き加えないといけない。

package.json

"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",

本題

reactコンテナからexpressコンテナに向けてコンテナ間通信しようと思い、

http://server:3001/apiみたいな感じでgetやpostしに行ったら

net::ERR_NAME_NOT_RESOLVEDというエラーが出て名前解決されないと出た。

記憶では同じネットワークにあるコンテナ同士はコンテナ名で通信するんじゃなかったっけな、

と思い調べるとそれで合っていた。

だけど名前解決されず通信されないのはなぜ？と思い調べると、

reactはブラウザ上で動くためコンテナ内で動くことはない、よってコンテナ間通信と思わないで

ローカル→コンテナ間通信のようにhttp://localhost:3001/apiでやらないといけないとのこと。

バックエンドとDB、両方コンテナで行った場合、バックエンドとDB間のコンテナ間通信は

バックエンドはコンテナ内で動くため先ほどのコンテナ名を使ったやり方でOK。

めちゃくちゃ当たり前だけど、分かったとき感動した。

参考