Docker network 名前解決できない

Question

前提・実現したいこと

Dockerを使いnginxをリバースプロキシとして、ドメインごと2つのプロジェクト(apache2つ)に振り分けを行うことを行いたいです。
リバースプロキシ、２つのapacheを同じネットワークproxy_networkに接続していますが、portfolio_php_app(php)の方は、名前解決されうまくページが表示されますが、quize_de_pon_php_app(Laravel)の方は上手く名前解決されず下記のエラーが起きてしまいます。なぜ名前解決されないのか原因がわかりません。

発生している問題・エラーメッセージ

GET http://quize_de_pon_php_app/js/app.js net::ERR_NAME_NOT_RESOLVED

該当のソースコード

--省略
  server {
        listen 80;
        server_name localhost;
        location / {
            proxy_pass http://portfolio_php_app:80;
        }
    }
    server {
        listen 80;
        proxy_set_header    Host    $host:8000;
        proxy_set_header    X-Real-IP    $remote_addr;
        proxy_set_header    X-Forwarded-Host       $host;
        proxy_set_header    X-Forwarded-Server    $host;
        proxy_set_header    X-Forwarded-For    $proxy_add_x_forwarded_for;

        server_name quize.localhost;
        location / {
            proxy_pass http://quize_de_pon_php_app:80;
        }
    }

[
    {
        "Name": "proxy_network",
        "Id": "b793cb8afd49a372f0a12f215c8f9df9676d764d2b90a97270214132d73483d6",
        "Created": "2021-09-25T05:43:01.6472596Z",
        "Scope": "local",
        "Driver": "bridge",
        "EnableIPv6": false,
        "IPAM": {
            "Driver": "default",
            "Options": {},
            "Config": [
                {
                    "Subnet": "192.168.224.0/20",
                    "Gateway": "192.168.224.1"
                }
            ]
        },
        "Internal": false,
        "Attachable": false,
        "Ingress": false,
        "ConfigFrom": {
            "Network": ""
        },
        "ConfigOnly": false,
        "Containers": {
            "52fdf2e5e7d6ffbd52cd8b91af4b738ee31a6fb1d5691c776729e806dd6259f0": {
                "Name": "portfolio_php_app",
                "EndpointID": "488a763516dd84b5d0f097a1355c0eb2e1cce017647d6a5a2f42fdbc77b1bc13",
                "MacAddress": "02:42:c0:a8:e0:02",
                "IPv4Address": "192.168.224.2/20",
                "IPv6Address": ""
            },
            "5723ed3924d03c1f60869691fc37bf7d5f41766f81f592f181fce7b38456210d": {
                "Name": "reverse-proxy",
                "EndpointID": "492f17d14ca55b94f2fd10c988b6cc599de13a3eeeb0d6915c31eeada0afa763",
                "MacAddress": "02:42:c0:a8:e0:04",
                "IPv4Address": "192.168.224.4/20",
                "IPv6Address": ""
            },
            "e912a03fd4cabc5a1fd0bd8a0b0031809872ec0ab81ac74297dd0e57da81fcc0": {
                "Name": "quize_de_pon_php_app",
                "EndpointID": "bfe14785913a62e2dae4c9508853c44bc7d0a2db613fbece0128886b06c577dc",
                "MacAddress": "02:42:c0:a8:e0:03",
                "IPv4Address": "192.168.224.3/20",
                "IPv6Address": ""
            }
        },
        "Options": {},
        "Labels": {}
    }
]

version: '3'
services:
  reverse-proxy:
    build: ./
    container_name: reverse-proxy
    ports:
      - 8000:80
    networks:
      - proxy_network
networks:
  proxy_network:
    external: true

version: '3'
services:
    quize_de_pon_db:
        image: mariadb
        container_name: 'quize_de_pon_db'
        volumes:
            - ./docker/db/data:/var/lib/mysql
            # - ./docker/db/my.conf:/etc/mysql/conf.d/my.conf
        environment:
            MYSQL_ROOT_PASSWORD: root
            MYSQL_DATABASE: quize_de_pon
            MYSQL_USER: patao
            MYSQL_PASSWORD: patao
            TZ: 'Asia/Tokyo'
        networks:
            - quize_de_pon_network
    quize_de_pon_php_app:
        build: ./docker
        container_name: 'quize_de_pon_php_app'
        volumes:
            - .:/var/www/html
            - ./docker/apache/virtual.conf:/etc/apache2/conf-enabled/vhost.conf
        ports:
            - '8080:80'
        networks:
            - proxy_network
            - quize_de_pon_network
networks:
    proxy_network:
        external: true
    quize_de_pon_network:

version: '3'
services:
  portfolio_php_app:
    build: ./docker
    container_name: 'portfolio_php_app'
    volumes:
      - .:/var/www/html
      - ./docker/apache/vhost.conf:/etc/apache2/conf-enabled/vhost.conf
    ports:
      - '8081:80'
    networks:
      - portfolio_network
      - proxy_network
networks:
  portfolio_network:
  proxy_network:
    external: true

###　試したこと
リバースプロキシで"http://quize.localhost"への接続は,nginxが522 BAD_GATEWAYにはならないので、
http://portfolio_php_app:80への接続は出来てるのにコンテンツは名前解決されない状態？になってます。
reverse_proxyから"quize_de_pon_php_app"へのpingはちゃんと通りました。!

Answer 1

見る限りブラウザの方で名前解決できてないようなので、nginx内部の話ではなく、ホストOSの方で名前解決に失敗してると思われます。

その原因としては単純にquize_de_pon_php_appがホストOSのhostsファイルに登録されてないのではないでしょうか？

ちなみにデフォルトで登録されているlocalhostは特殊で、登録されていないサブドメインのquize.localhostであっても、ループバックアドレスへ転送されるので、難なく疎通できてるものと思います。

Comments

[Patao_program]

hostsの設定はすでに行ってます。
nginxのlocationを入れ替えて飛ばすプロジェクトを変えたりしたところ、quize.localhostでも上手く表示されているので、それが問題ではないです。逆にlocalhostがまた上記の画像のようになりました。
http://quize_de_pon_php_app ←　ここのコンテナ名がコンテナに割り当てられた、ipアドレスに置き換わってほしいです。

[surface_0]

ちょっと説明が良く理解できないのですが、
ひとまず、hostsの設定もしているのであればその記述も質問内容に明記していただけますか。

[Patao_program]

説明下手ですみません！
> nginxのlocationを入れ替えて飛ばすプロジェクトを変えたりしたところ
コードで示すと...
server {
listen 80;
server_name localhost;
location / {
　　　　#　ここと
proxy_pass http://quize_de_pon_php_app:80;
}
}
server {
listen 80;
server_name quize.localhost;
location / {
　　　　#ここです
proxy_pass http://portfolio_php_app:80;
}
}
proxy_passの部分を入れ替えテストしたというです。
この場合は、porfolioのプロジェクト(apache)がquize.localhostのドメインに割り当てられることになると思いますが、ちゃんと正常に動いていて、今度は、localhostに割り当てられた、quize_de_ponのプロジェクト(apache)が名前解決エラーになるということです。

[surface_0]

私もちょっと質問の主旨を無視した回答をしてしまっていたので、理解できていないのかもしれないですが
つまりは簡単に言えばブラウザから http://localhost:8000/なんちゃら にアクセスすると、
522 BAD_GATEWAYで『GET http://quize_de_pon_php_app/なんちゃらnet::ERR_NAME_NOT_RESOLVED』というレスポンスが返ってくるという事ですか？
（エラーがブラウザの発してるものだと勘違いしてました）
それでnginxから見てquize_de_ponの名前解決ができていないと。

[surface_0]

あと、522 BAD_GATEWAYって502の間違いなのでは？と思ったのですが。

[surface_0]

追加で確認したいのですが、http://localhost:8080/は疎通確認できていますか？

[Patao_program]

> リバースプロキシで"http://quize.localhost"への接続は,nginxが522 BAD_GATEWAYにはならないので、

もし、リバースプロキシでリクエストを飛ばしてサーバーが存在していなかったら502BAD_GATEWAYになるはずだと思ったからです。

一番不思議なのは、画像を追加しましたが、quizeプロジェクトのapacheのDirctryIndexで指定した、index.phpのリクエストが通っていることです。文字だけ表示されているのでおわかりになると思いますが。その他は、名前解決されずにそのままリクエストが走ってしまいDNS側で名前解決されずに、エラーが起きている模様です。

タイポです。失礼しました。
port 8080からだと、何ら問題なく動いています。

[Patao_program]

リンクを押し、別ページへの移動を試みましたが、それも同じようにエラーになりました。

[surface_0]

あれ？追加された画像を見ると、やっぱり勘違いではなかったのでは。
『RequestURL: http://quize_de_pon_php_app/js/app.js』ってことは、
ホストOSのブラウザから http://quize_de_pon_php_app/js/app.js に直接アクセスしようとしてコケているってことですよね？
間違ってますか？

[Patao_program]

あってますよ。
そもそもquize_de_pon_php_appなんてドメイン存在しませんからね。
あと、プロキシがリクエストを代わりに飛ばしているのに、ブラウザがproxy_passにリクエストしてるのはなぜなんでしょうかね？
ここで本当は、Dockerがeginxで記述した
proxy_pass http://quize_de_pon_php_app:80;
のquize_de_pon_php_appが下記のIPv4Addressに自動で置き換えてくれるはずなんですけどね。

"Name": "quize_de_pon_php_app",
"EndpointID": "bfe14785913a62e2dae4c9508853c44bc7d0a2db613fbece0128886b06c577dc",
"MacAddress": "02:42:c0:a8:e0:03",
"IPv4Address": "192.168.224.3/20",
"IPv6Address": ""

[Patao_program]

でもhostsは関係ないと思います。

[surface_0]

ならば単純にブラウザがquize_de_pon_php_appを直接リクエストしてる限り、"リバースプロキシを通過していない"ので名前解決はできません。
また、proxy_passはnginx内部の転送処理であって、クライアント側からはどこに転送されたのかは知る由も無いものです。

つまりサーバーがブラウザに対して、

> proxy_pass http://quize_de_pon_php_app:80;
のquize_de_pon_php_appが下記のIPv4Addressに自動で置き換えてくれる

という処理はあり得ませんし、そもそもDockerコンテナはホストOSとは分離されたネットワークに属しているので、IPアドレスを置き換えたとしても疎通はできません。

ですから、以下の方法のいずれかを取るべきです。

1. portfolio_～PHPアプリから quize_～ とURLを出力しているところを quize.localhost に変更する
2. portfolio_～PHPアプリから quize_～ とURLを出力しているところを相対パスに変更した上で以下のいずれかを実施
- portfolio～コンテナのApacheで quize～ へリバースプロキシする設定する
- nginxで portfolio_～ の特定パス（location)を quize.localhost へリダイレクトさせる設定する
- portfolio_～ のPHP側で quize_～ へプロキシしてやる

[Patao_program]

では、なぜportfolioの方だけ、リバースプロキシが働いているんですか?

>また、proxy_passはnginx内部の転送処理であって、クライアント側からはどこに転送されたのかは知る由も無いものです。

そうですよね。
普通は、http://localhost:8000/js/app.jsなると思ってます。

> proxy_pass http://quize_de_pon_php_app:80;
のquize_de_pon_php_appが下記のIPv4Addressに自動で置き換えてくれる

ドキュメント(ユーザ定義ネットワーク用の内部 DNS サーバ)より https://docs.docker.jp/engine/userguide/networking/configure-dns.html
>Docker 1.10 では、docker デーモンに内蔵 DNS サーバを実装しました。これはコンテナ作成時の有効な 名前 (name) もしくは ネット・エイリアス (net-alias) または リンク (link) の別名を元にしたサービス・ディスカバリを提供します。

コンテナ名でも解決できそうな感じで書いてるんですが...

>つまりサーバーがブラウザに対して、
それはありえないですね。
Dockerコンテナ間の名前解決の話をしています。
http://quize_de_pon_php_app:80のドメインが、Dockerコンテナ(apache)の内部ipに置き換わることによってapacheの方にリクエストを飛ばせると私は考えています。

もしコンテナ名からコンテナの内部ipを解決できなかったとしたら、もう一方のporfolioプロジェクトも同じエラーが発生しているはずだと思います。

> DockerコンテナはホストOSとは分離されたネットワークに属しているので、IPアドレスを置き換えたとしても疎通はできません。

ホストOSとDockerコンテナ間のやり取りではなく、コンテナ間のやり取りではないですか？
リクエストをリダイレクトするのは、nginxコンテナとapacheコンテナ感の通信だと思います。

> 以下の方法のいずれかを取るべきです。
何をしているのがよくわからないです。すみません。

いやーお互い文字だけで説明するのってめっちゃ難しいですね笑

[surface_0]

コメント欄はマークダウンも使えないから書きづらいですよね・・・

> では、なぜportfolioの方だけ、リバースプロキシが働いているんですか?

portfolioについては画像を見る限り、伝送路を具体的に書くと、

ブラウザ --> http://localhost:8000 -- (ポートフォワード）--> reverse_proxyコンテナ:80（nginx)
--（Dockerネットワーク）--> portfolio_php_appコンテナ:80(apache)

一方はquizeの方は、

ブラウザ --> http://quize_de_pon_php_app:80 --> x 名前解決できずエラー

となっていると思うんですが、想定と違いますでしょうか？
違っていれば同様の書き方で具体的に書いてもらえると助かります。

> コンテナ名でも解決できそうな感じで書いてるんですが...

これはDockerのネットワーク内では自動で名前解決できるようになったという話で、ホストOSからコンテナ名でアドレスを解決できません。

> ホストOSとDockerコンテナ間のやり取りではなく、コンテナ間のやり取りではないですか？
リクエストをリダイレクトするのは、nginxコンテナとapacheコンテナ感の通信だと思います。

リバースプロキシはリダイレクトはしません。
この場合はnginxがapacheにリクエストして、その結果を代理でnginxが返すものです。
これは認識のとおりでしょうか？

> 何をしているのがよくわからないです。すみません。

想像で言っているので、わかりにくいかもしれません。
具体的には出力されているhttp://localhost:8000にアクセスしたときに取得できるHTMLのコード内に、

<script src="http://quize_de_pon_php_app/js/app.js"></script>

というようなコードがあると思っているので、これをこのように↓に出力するようにすればいいのでは、ということを言っています。

<script src="http://quize.localhost/js/app.js"></script>

これも違っていたら実際のコードを提示していただけると助かります。

[Patao_program]

> portfolioについては画像を見る限り、伝送路を具体的に書くと、
おっしゃるとおりです！
> これはDockerのネットワーク内では自動で名前解決できるようになったという話で、ホストOSからコンテナ名でアドレスを解決できません。
僕も同じ認識です！
同じネットワークなのに解決されないので困ってます...
>この場合はnginxがapacheにリクエストして、その結果を代理でnginxが返すものです。
大丈夫です！
> これをこのように↓に出力するようにすればいいのでは、ということを言っています。

<script src="http://quize.localhost/js/app.js"></script>
↑
最終的には自然にこうなるはずなんですよね。apacheの方のドメイン(名前解決されていないドメイン)が見えてしまうのはありえないので。
http://portfolio_php_app:80への振り分けの場合は、ブラウザのリクエストが、
http://localhost/**/*　←このような形式になっているので期待したとおり
になっています。
何が原因なのかさっぱりわからないんですよね〜名前解決できてないのが今一番の有力説なんです。

[surface_0]

返答くださり、たすかります。
私が飲み込めていない点が絞れてきました。

> <script src="http://quize.localhost/js/app.js"></script>
> ↑
> 最終的には自然にこうなるはずなんですよね。apacheの方のドメイン(名前解決されていないドメイン)が見えてしまうのはありえないので。

ここの「自然にこうなる」という部分が、何を指しているのかが想像できておりません。
多分ここにすべてが詰まってる気がするので、お手数ですが具体的に掘り下げて教えていただけますか？

ちなみに私が提示していることを端的に言うと、例えば以下のようなPHPコードがあったとして、

```
echo '<script src="http://quize_de_pon_php_app/js/app.js"></script>';
```

ブラウザがそれを受け取っても名前解決ができず、JSファイルが取得できないので、
対策として当該部分のPHPコードを修正して以下のように書き換える必要があるのでは？

```
echo '<script src="http://quize.localhost/js/app.js"></script>';
```

という事なので、自然的なものではなく明示的な書き換えを意図しています。

[Patao_program]

>ここの「自然にこうなる」という部分が、何を指しているのかが想像できておりません。
今、アドレスバーで、http://quize.localhostに対してリクエストしているので、コンテンツもそれに準ずる形になるはずだということです。↓
<script src="http://quize.localhost/js/app.js"></script>';
>ブラウザがそれを受け取っても、名前解決ができず、JSファイルが取得できないので、
ブラウザが名前解決できない以前の話で、http://quize_de_pon_php_app/js/app.jsこのドメイン状態でリクエストが走ることが異常なんです。だからこの問題は、ブラウザが不正なリクエストをする以前で何らかしらのエラーが発生しているはずだと言うことです。

対策として当該部分のPHPコードを修正して以下のように書き換える必要があるのでは？
それだと、保守性の観点から最悪だと思います。修正箇所が相当数あります。

portfolioのほうは上手く行っているんですけどねー同じように設定しているはずですけど。

解決できなそうなら、サーバーの構成を変えるしかないと思ってます。

[surface_0]

> 今、アドレスバーで、http://quize.localhostに対してリクエストしているので、コンテンツもそれに準ずる形になるはずだということです。

すいません、まだ抽象的なので具体的にどういうプロセスでそういう形になるのか、教えてもらえれば把握できそうな気がします。
プログラムコードやフレームワーク、ロジック等の提示をしていただいていないので、まだ問題の核と思われる部分がブラックボックス状態です。

ちなみに私が提示したコードはあくまで説明の為に最大元簡素化したものなので、まったく同様の記述で実装する事は想定しておりません。

[Patao_program]

まずは自分が思う理想の形は、
ブラウザ --> http://quize.localhost:8000 -- (ポートフォワード）--> reverse_proxyコンテナ:80（nginx)
--（Dockerネットワーク）--> quize_de_pon_php_appコンテナ:80(apache)
この理想の形の場合ブラウザでのリクエストを見ると、上手く行っていればhttp://quize.localhost/js/app.js
という形になりませんか？http://quize_de_pon_php_appに直でリクエストが飛ぶはずないですよね？おかしくないですか?
ブラウザがなぜこのような挙動を起こすのかっていうのも焦点な気がします。

フレームワークは、Laravelです。localhost:8080のほうはちゃんと機能しているのでアプリ側は問題ないかと。

役に立つかわかりませんが、reverse-proxyとquize_de_pon_php_appの１ロードのログを表示しました。indexしかリクエストが走っていない状態です。

なぜindexのリクエストだけ走ってそれ以外はちゃんと走らないのかは、本当に謎です。

[surface_0]

なるほど、概ね分かってきた気がします。
簡潔にまとめるとこういうことでしょうか？

http://quize.localhost:8000 にアクセスしたとき、
出力されたHTML内には http://quize.localhost:8000/js/app.js へのリンクが記述されているのに
ブラウザはなぜか http://quize_de_pon_php_app/js/app.js を参照しようとしている

[Patao_program]

申し訳ないです。画像ではhtmlを移してませんでしたが、html内も、 http://quize_de_pon_php_app/js/app.js
こういう意図しない形になってしまっています。
プロキシにリクエストをおくっているので、ここも本来、http://quize.localhost:8000/**/*にならなければならないのですが...
意図しない形になってしまう、何らかしらの原因があるはずなんですが...ここが焦点という感じです。
こういう結果になってしまう原因を突き止めるために、なにか確認したほうが良さそうなポイントとか怪しいと思うことなどもしありましたら、教えていただきたいです。

[退会済みユーザー]

うまくいくportfolio_php_app
うまくいかないquize_de_pon_php_app

それぞれの実際にHTMLを吐き出している部分(php側で　route()等)が
一方は相対パス、もう一方は絶対パスとかはないですかね

少し前の記事ですが
https://qiita.com/tkek321/items/0f0b6294222cace14dbf

あと、それに関連して

リバプロ側でクライアントからのリクエスト(host名とか)を配下に伝搬するように
してなければ　配下のコンテナが生成する絶対パスはコンテナのホスト名で作られるかもしれません

https://www.playframework.com/documentation/ja/2.3.x/HTTPServer
https://qiita.com/undrthemt/items/a0ab7870e4e6eb99b7f6

[surface_0]

これで問題点が明らかになったと思います(;^_^A
どちらかというとLaravelのURL生成プロセスに関わる部分ということですね。
これについては私もhiroshikiさんが推測されているとおりだと思います。

[Patao_program]

> 一方は相対パス、もう一方は絶対パスとかはないですかね
>LaravelのURL生成プロセスに関わる部分ということですね。
ないですね。Laravelは関係ありませんでした。

>リバプロ側でクライアントからのリクエスト(host名とか)を配下に伝搬するように
してなければ　配下のコンテナが生成する絶対パスはコンテナのホスト名で作られるかもしれません
大正解でした！送信元の情報を渡すことによって、
htmlもブラウザのリクエストの絶対パスも、http://quize.localhost/**/*という理想とした形になりました。
なので、net::ERR_NAME_NOT_RESOLVEの問題は解消しました。

しかしですね...新たな問題が発生してしまいました（泣）
新たに問題が起こった箇所の画像に置き換えました。あとは、変更を反映した、nginx.confを掲載しました。後は、エラー時(1回ロードした時)のniginxとログとapacheのログを載せました。

今度は、ブラウザからのリクエスト(ロードした時)がnet:ERR_CONECTION_REFUSEDで弾かれてしまいます。(index.phpとfavicon.icoだけは弾かれずに通っています。)
試したこととしては、ブラウザのコンソールから、fetchをして、http://quize.localhost/js/app.jsを単体で取得することを試みました。
結果は、リクエストは弾かれずに、リバプロを通りapacheまでリクエストがちゃんと通りました！nginx,apacheのログにも反映されてます。curlでも同じことができました。

ブラウザからのロードした時に弾かれないようにできれば、うまく表示されるのですが...

curlやfetchをつかってapacheまでちゃんと届いているので、Dockerがapacheのコンテナの内部ipに名前解決しないことが原因でエラーが起こっているという当初の推測は消えましたね！

[Patao_program]

Refusedってなってますが、nignxのアクセスログには、リクエストが反映されていないということは、ブラウザが拒んでいるんですかね？

[surface_0]

> Laravelは関係ありませんでした。
route()関数がクライアントがリクエストしたホスト名を元にURLを生成してるから、
こうなってるんじゃないかって話で、Laravel自体は大いに関係あると思うのですが…

>>リバプロ側でクライアントからのリクエスト(host名とか)を配下に伝搬するように
してなければ　配下のコンテナが生成する絶対パスはコンテナのホスト名で作られるかもしれません
>大正解でした！
↑結局これがその証拠だと思います。

----
> 今度は、ブラウザからのリクエスト(ロードした時)がnet:ERR_CONECTION_REFUSEDで弾かれてしまいます。(index.phpとfavicon.icoだけは弾かれずに通っています。)
> 試したこととしては、ブラウザのコンソールから、fetchをして、http://quize.localhost/js/app.jsを単体で取得することを試みました。

画像を見る限りではapp.jsのURLのポート番号が8000番になっていないのが原因だと思います。
fetchしてる方は相対パスなので暗黙に8000番になっていると思います。

nginxはからはデフォルトポート（暗黙の80番）でapacheにアクセスしているので、アプリ側ではそれを元にポート無指定の絶対URLを生成していると思われます。
X-Forwarded-Portでポート番号も伝搬するか、相対パスでURL生成させる必要があると思います。

[Patao_program]

>Laravel自体は大いに関係あると思うのですが…
なるほどお！理解しきれてなかったです。確かに大いに関係していますね！！
>画像を見る限りではapp.jsのURLのポート番号が8000番になっていないのが原因だと思います。
ホントですね笑すっかりリバプロを8000でたててるのを忘れてましたー

本当に長い間お付き合いいただきありがとうございます！無事に解決することができました！

ベストアンサーはどうしましょう？お二人方から選べないのですが...

[退会済みユーザー]

本回答オーナーの　surface_0さんがよろしいかと思います

[surface_0]

なにはともあれ解決できて良かったです。お疲れ様でした。
（なぜか退会済みユーザーに…）