docker内部で、nuxtのasync/awaitを使おうとすると connect ECONNREFUSED 127.0.0.1のエラーがでる問題

掲題の通りなのですが、async/awaitを理解する上で、いくつかパターンを試しました。

export default {
  components: {
    Logo,
    VuetifyLogo
  },
  data: {
    test: ""
  },
  // mounted: function () {
  //   axios.get(`https://local.api.iwamoto-lease.jp:56050/test`)
  //   .then((res) => {
  //     console.log(res.data)
  //   })
  // },
  async asyncData({ $axios }) {

    // ケース１
    // dataに値が保持されるか確認
    return "yamada" // 文字列長でsplitされた配列で保持される

    // ケース２
    // dataに値が保持されるか確認
    return { "name" : "yamada" } // name:"yamada"の形式で保持される。これがasyncDataかと理解しかけるも、、、

    // ケース３
    const ip1 = await $axios.$get('https://icanhazip.com')
    console.log(ip1) // "187.34.143.170"
    return ip1 // ケース１と同じ。

    // ケース４
    const ip2 = await $axios.$get('https://icanhazip.com')
    console.log(ip2) // "187.34.143.170"
    return { ip2 } // ip2:"187.34.143.170\n"が保持される。

    // ケース５
    // ということは、、、
    const name = "yamada"
    return { name } // やはり。ケース２と同じ形式で保持されていた。変数名がkeyになっている模様。

    // ケース６
    // 同じnginxサーバーのapiドメインからオブジェクト形式のレスポンスを受け取ってみる。
    // ちなみに現在動かしているのは https://local.iwamoto-lease.jp:56050
    // nginxでドメインによって参照パスを変えている。
    const data = await $axios.$get('https://local.api.iwamoto-lease.jp:56050/test')
    // NuxtServerError
    //    connect ECONNREFUSED 127.0.0.1:56050
    // 上記のエラーが出て以下には到達していない。
    console.log(data)
    return data

    // ケース７
    // awaitとやらをとってみる。
    const data = $axios.$get('https://local.api.iwamoto-lease.jp:56050/test')
    console.log(data)
    return data
    // NuxtServerError
    //    connect ECONNREFUSED 127.0.0.1:56050
    // return dataで、上記のエラーが出ている模様。

    // ケース８
    // awaitとreturnをとってみる。
    const data = $axios.$get('https://local.api.iwamoto-lease.jp:56050/test')
    console.log(data) // なんやらpromiseとかいうオブジェクトが表示されている
    return data    // とりあえずここでreturn しないとdataに保持されないんだよな...

    // ケース９
    $axios.get(`https://local.api.iwamoto-lease.jp:56050/test`)
      .then((res) => {
        console.log(res.data) // {"0":"one","two":["ni"],"three":{"san":["sum"]}}
      })
    // 普通に通信取得できてるみたいなので、、、

    // ケース１０
    $axios.get(`https://local.api.iwamoto-lease.jp:56050/test`)
      .then((res) => {
        console.log(res.data) // {"0":"one","two":["ni"],"three":{"san":["sum"]}}
        return res.data // エラーはおきないが、dataに保持されていない...
      })

    // ケース１１
    // こうか？
    return $axios.get(`https://local.api.iwamoto-lease.jp:56050/test`)
      .then((res) => {
        console.log(res.data) // {"0":"one","two":["ni"],"three":{"san":["sum"]}}
        return res.data // エラーはおきないが、dataに保持されていない...
      })
    // これは、、、ケース６と７のエラーと同じ内容がでました。

    /*
    整理タイム

    $axios.$getの結果をreturnしたらエラーが出るという点では、ケース１１はケース７と同等。
    じゃあ、awaitってなんぞや？
    awaitとconnect ECONNREFUSED 127.0.0.1:56050の関係性は？
     */
    
    // ケース１２
    // とりあえず思いつく方法をやってみる。
    $axios.get(`https://local.api.iwamoto-lease.jp:56050/test`)
      .then((res) => {
        console.log(res.data) // {"0":"one","two":["ni"],"three":{"san":["sum"]}}
        this.test = res.data //  The "data" option should be a function that returns a per-instance value in component definitions.
      })
    // 「データ」オプションは、コンポーネント定義でインスタンスごとの値を返す関数でなければなりません。。。どうすればいいんだー。

    // $axios.getをreturn したら connect ECONNREFUSED 127.0.0.1:56050がでるんだよ。。。
    
  }

}

ちなみに、上記のnuxtはdocker内でyarn devしていて、nginxからnodeにプロキシかましていますが、
docker内ではなく、PC側でyarn devしたサーバー（localhost:3000）からasync/awaitで通信すると正常に動作します。

@nuxtjs/axios側でなにか設定するか、nginxの設定かとは思うのですが解決策がわからず
docker側でもasync/awaitを使える状態まで持っていきたいです。

以下参考にしましたが、あまり理解できず。。。

追記

dockerとapiとclientでリポジトリ分けていますが、確認用に公開しています。
３ステップで確認できます。

https://github.com/GILD-MasayaGoto/iwamoto-lease

nuxtを実行しているnodeコンテナからcurlで疎通確認

t_obara

2019/09/04 01:30

確認コードをよくみていませんが、docker内からasync/awaitなしでの接続は確認していて正常に動作するのでしょうか。 ipやホスト名の意味するところがわかりませんが、どこにあるのでしょうか。ネットワーク関連の問題の場合、ネットワーク構成がわからないと問題が見えてきません。

退会済みユーザー

2019/09/04 03:09 編集

サーバー構成は文字で説明するより見てもらった方がわかると思いますので、リポジトリ公開しました。質問に追記しています。

退会済みユーザー

2019/09/04 15:58 編集

行動規範の内容に同意します

回答2件

ベストアンサー

リポジトリの確認までは行っていないのですが、取り急ぎ問題と思われることを挙げます。

■ 前提
NuxtサーバはSPAではなくSSRで動いている

■ 問題: Nuxtサーバ側からAPIサーバへアクセスできていない
asyncData()でAPIをコールしているので、Nuxtサーバから「https://local.api.iwamoto-lease.jp:56050」をコールできない状態だと思います。
つまり、「local.api.iwamoto-lease.jpを名前解決して得られるIPアドレスが誤っている」 or 「56050ポートでアクセスできない」のいずれか原因だと思います。

原因特定のために、Nuxt.jsが動いているサーバからCurl等でAPIをコールしてみてください。
「connect ECONNREFUSED」となれば、原因と見て良いと思います。

■ 対策: Docker環境の見直し
Nuxtサーバ側からAPIサーバへアクセスできるよう設定を修正してください。

■ 検証内容について

APIの疎通がうまくいく場合とうまく行かない場合の差分について

未検証ですが、うまくいくケースではawaitをつけていないので、おそらくクライアントサイドから実行されているのかなと考えています。
うまくいくケースの場合、ブラウザのディベロッパーツール > ネットワークでAPIへの通信が発生しているか確認してみてください。

投稿2019/09/06 04:37

yuhigash

総合スコア327

退会済みユーザー

2019/09/06 09:04 編集

回答ありがとうございます。「portの同じ(56050)複数のサブドメイン」を１つのサーバーで受けて、ドメインによってアクセス先pathを分岐させる構成にしています。 local.api.iwamoto-lease.jpであればapiのプロジェクトを配置してるpathへ。 local.iwamoto-lease.jpであれば、localhost:3000へproxyをかましています。（nuxt.js） apiはとりあえず確認を安易にしたいため、現段階ではブラウザでもjson形式で返ってきてることを確認しています。まず、apiプロジェクトが動いていることは確定です。次に、nuxt側でaxiosを使ってブラウザで確認した値を取得できるかを確認するために、asyncDataは使わず普通にcratedやmountedなどでconsole表示しました。これも確認できています。お待ちかねのasyncDataです。 componentにdata定義しなくていいので、これは絶対使えるようにしておきたいです。しかし、何度やっても以下のエラーがでます。 `connect ECONNREFUSED 127.0.0.1: 56050` api側はlaravelで作っているのですが、 https://127.0.0.1: 56050にブラウザアクセスすると、laravelの404画面じゃなくて、nuxtのエ404画面がでてきました。 axios側で、ドメインを指定しているのに、名前解決されて127.0.0.1に変換されるのはさていおき、少なくとも、https://127.0.0.1: 56050でアクセスしたらlaravel側のpathにいっていないとだめだろう。ということで、nginx.confのserverディレクティブを入れ替えて、apiのserverディレクティブが一番上にくるように修正してみました。再度、https://127.0.0.1: 56050でアクセスしたらlaravel側のエラー画面にはなりました。しかし、 nuxt側からapiアクセスしようとするとconnect ECONNREFUSED 127.0.0.1のエラーのままです。 > つまり、「local.api.iwamoto-lease.jpを名前解決して得られるIPアドレスが誤っている」 or 「56050ポートでアクセスできない」 https://127.0.0.1: 56050でブラウザアクセスできてる以上、この疑いはなくなってしまいました。 local.api.iwamoto-lease.jpも local.iwamoto-lease.jpも /etc/hostsで設定しているものなので元を辿れば127.0.0.1だけど、実際の環境でも stg.api.iwamoto-lease.jpも stg.iwamoto-lease.jpも EIPに紐つくはずだから、１つのpiv4になるはずだけど、こういう構成はできないのか？ということで、すごく面倒でしたが、昨日実際にEC2立てて検証しました。余っているドメインがあったので、 route53でサブドメインを２つ作り、その２つをEIPにくっつけ、そのEIPをEC2にマウントして、EC2にSSHアクセスしてnginx入れて、ドメインで分けるようにserverディレクティブ作って、それぞれでアクセスしてみました。なんと、いけました。 nuxtm側でselfなんちゃらってエラーはでましたが、オレオレ証明書で手っ取り早くやっていたのでhttpsじゃなくてhttpだけlistenするようにしたら、asyncdate内でreturnしてもconnect ECONNREFUSEDはでませんでした。 pageComponentにもdate持っていました。便利すぎるので、絶対になんとか解決したい。開発環境、、、とりあえず、nuxt側に限ってはdocker使うのやめようかと考えています。 docker通さずに、普通にyarn devとかで試したらすんなりいきました。でも、開発環境はなるべく本番環境に合わせた形で構成したいので、可能でしたらdocker仲介させたいです。 > Nuxtサーバ側からAPIサーバへアクセスできるよう設定を修正してください。その方法がわかれば良いのですが `nuxt connect ECONNREFUSED 127.0.0.1 docker` とかでかなり調べまわっていますが、vue-cliでプロジェクト生成してくださいとか、axiosのproxy設定が、、、とか根本的な回答が得られずにいる状態です。開発環境でもlocalhostじゃなくてドメインでアクセスできるようになりたいのもあります。。。

yuhigash

2019/09/06 10:15 編集

ご回答ありがとうございます。上記の私の回答についてですが、もしかすると説明が悪くうまく伝えられていないかと思い、再度説明させて頂きます。今回の問題の原因は、Nuxt.jsのサーバサイドからAPIをコールできないことだと考えています。話を具体化するために、各環境に名前をつけます。・Nuxt.jsのクライアントサイド　・ブラウザ・Nuxt.jsのサーバサイド　・Dockerにて構築。ExpressのミドルウェアとしてNuxt.jsを利用 Nuxt.jsのクライアントサイド、つまり、ブラウザからのアクセスの場合、正常にAPIをコールできていると思います。一方でNuxt.jsのサーバサイド、つまり、Docker環境からのアクセスの場合、正常にAPIをコールできていないと思います。原因として、Nuxt.jsのサーバサイドからAPIをコールした場合に、・local.api.iwamoto-lease.jpを名前解決して得られるIPアドレスが誤っている・local.api.iwamoto-lease.jpを名前解決して得られるIPアドレスは正しいが、アクセスに制限が掛かっている・56050ポートでアクセスできないなどが考えられるかなと思います。 ※ 「Nuxt.jsをSSRモードで起動」かつ「asyncDataメソッド内でaxiosでAPIをコール」した場合、Nuxt.jsのサーバサイドからAPIがコールされます。上記の推測が正しいかどうか、Nuxt.js (express) が動いているDocker環境にSSHログインし、その中でCurl等でAPIをコールできるか検証してみてください。 ---- 上記の説明はあくまで推測ですので、実際のリポジトリの方を時間が空いた際に確認してみようと思います。その際、何かわかることがありましたらコメントさせて頂きます。

退会済みユーザー

2019/09/06 14:47

ご丁寧にありがとうございます！ > かつ「asyncDataメソッド内でaxiosでAPIをコール」した場合、Nuxt.jsのサーバサイドからAPIがコールされます。なんと、新事実でした。 express側で何かしらしないといけないということですね。 > Nuxt.js (express) が動いているDocker環境 image的にはnodeコンテナになります。疎通確認の画像を添付しましたが、Connection refusedエラーがでます.... なにかしてnode側で127.0.0.1を認識させなければならないのはわかるのですが、それが何かが、、、自分でdocker構築しておいて難ですが、ちょっと細かく日本語で整理します。 nodeに存在しているのはnuxtであって、nuxtを動かしているのはexpressだが、expressが動く環境がnode。 asyncData内でreturnせずにhttp://local.api.iwamoto-lease.jp（ここでも実態は127.0.0.1であることに変わりはない）にajax通信したら、ブラウザ側、つまり、dockerの外側から、56050でdockerに侵入して、それが80に変換されて、docker内で80を待ち受けているnginxがlocal.api.iwamoto-lease.jpのルート先であるlaravelの方に行って結果をもらえている。 asyncData内でreturnするajax通信の場合、 dockerの外側からではなく、docker内でnuxtを動かしているexpressの方から、http://local.api.iwamoto-lease.jp(127.0.0.1)に接続しようとしているが、そんなアクセス先は知らないぞとエラーが出ている。なるほどなるほど。。。思い返してみれば、nginx構築するときも似たような現象にあって、、、 docker起動時にnodeコンテナで、yarn devするように設定しているので必然的にlocalhost:3000が立ち上がりまして、nodeのportは57050なので、127.0.0.1:57050でアクセスしてもnuxt画面が表示できます。しかし、nginxを経由させたかったのでproxyで127.0.0.1:57050へ飛ばそうとしたときに、同じようなエラーがでたと記憶しています。このとき、127.0.0.1ではdockr内部から外部のホストを参照できずにいることが原因みたいで以下のようにすることで、docker内部からdocker外部へアクセスできるようになっています。 ``` upstream client { server host.docker.internal:57050; } ``` だとしたら、、、 asyncData内でreturnするajax通信の場合のhttp://local.api.iwamoto-lease.jpへの接続時に、名前解決されてしまうのがどの箇所でされているのかは分からないですが、多分、http://local.api.iwamoto-lease.jpもしくは127.0.0.1をhost.docker.internal:にきました！ここまで書いてもしやと思ってやったらできました。以下が正解です。 ``` async asyncData ({ $axios }) { let {data} = await $axios.get('http://host.docker.internal/test') console.log(data) return { users: data } }, ``` 順序立てて考えるのは大事ですね！根本的な解決かわかりませんが、ありがとうございました！

退会済みユーザー

2019/09/06 14:52

だれかの役にたつかもなので、リポジトリは公開したまま残しておきます。親戚からの依頼なので、企業さんのプロジェクトじゃないのでそこらへん心配ないです。

yuhigash

2019/09/06 15:40

うまく動作したようでよかったです！

行動規範の内容に同意します