apiサーバーにリクエストで「net::ERR_NAME_NOT_RESOLVED」を解決したい

Question

環境
Next.js
Go
Docker
docker-compose

docker上で動かしているアプリケーションでapi通信を行うとき、コンソールに以下エラーが表示されます。
「Failed to load resource: net::ERR_NAME_NOT_RESOLVED」

行ったこと
docker-compose.ymlにnetworkの設定を追加

serice:
  front:
    networks:
      - app_network
  api:
    networks:
      - app_network

networks: 
  app_network:

エラー部分
fetchのURL部分でエラーが表示されます。
fetchには、パッケージではなくFetch APIでリクエストしています。

try {
      const data = await fetch('http://api:8888/login', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(input)
      }).then(res => console.log(res))
    } catch (error) {
      console.warn(error);
    }

これでもエラーが解決しないので、分かる方お願いします。

Answer 1

サービス群が起動中にdocker psしてみましょう。
NAMESの項目に表示される名前が解決可能な名前です。
docker-compose.ymlに書かれたサービス名は最終的なコンテナ名ではありません。
特にymlで指定しない場合、<親フォルダ名>_<サービス名>_<インスタンス番号（１からの連番）>になります。

サービスにhostname: apiなどをつけるとその名前で名前解決できる様になります。

Answer 2

networks の部分全部いらねっす。デフォルトで通信できます。
Compose のネットワーク機能 — Docker-docs-ja 17.06 ドキュメント

Comments

[kagepedia]

ありがとうございます。
http://api:8888/loginではなく、
http://localhost:8888/loginだとCORSでエラー出ますが、net::ERR_NAME_NOT_RESOLVEDのエラーはなくなりました。
dockerで構築したとき、ドメイン名がサービス名でなくlocalhostにしないと動かない理由がわかりません。