docker-compose up時にNuxt.jsがAPIと通信できない

Question

お世話になっております。
今回はNuxt.jsのAPIとの接続に関する質問です。
よろしくお願い致します。

前提・実現したいこと

現在Nuxt.jsとrailsAPIでアプリをdocker-composeにて開発しております。普段はnuxt.jsをlocalで、railsAPIを$docker-compose runで立ち上げています。

そこで、
$docker-compose up
でアプリを立ち上げたらフロントエンドとバックエンドが通信できませんでした。

Nuxt.jsはhttp://0.0.0.0:3000
railsAPIはhttp://0.0.0.0:3001
です。

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

######ターミナルのエラーメッセージ

front_1  |  ERROR  Request failed with status code 504
front_1  |
front_1  |   at createError (node_modules/axios/lib/core/createError.js:16:15)
front_1  |   at settle (node_modules/axios/lib/core/settle.js:17:12)
front_1  |   at IncomingMessage.handleStreamEnd (node_modules/axios/lib/adapters/http.js:236:11)
front_1  |   at IncomingMessage.emit (events.js:327:22)
front_1  |   at IncomingMessage.EventEmitter.emit (domain.js:485:12)
front_1  |   at endReadableNT (_stream_readable.js:1218:12)
front_1  |   at processTicksAndRejections (internal/process/task_queues.js:84:21)

該当のソースコード

######nuxt.config.js

// const config =
export default {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#00448c' },
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
    'bootstrap-vue/nuxt'
  ],
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {
    proxy: true
  },
  proxy: {
    '/api': {
      target: 'http://localhost:3001',
      pathRewrite: {
        '^/api': ''
      }
    }
    // ここにプロダクションの時のかけばいける。書かんでもlocalhostでいけるかも
  },
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  }
}

######index.vue

<template>
  <div class="container">
    <h2>Users</h2>
    <ul class="users">
      <li v-for="user in users" :key="user.id">
        <NuxtLink :to="'/users/' + user.id">
          {{ user.name }}
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>
<!-- v-forを使ってリスト化する？ -->
<script>
export default {
  async asyncData({ $axios }) {
    const users = await $axios.$get('/api/api/users')
    return {
      users,
      title: 'users list'
    }
  },
  head() {
    return {
      title: this.title
    }
  }
}
</script>

<style scoped>
.container {
  text-align: center;
  margin-top: 100px;
  font-family: sans-serif;
}
.users {
  list-style-type: none;
}
.users li a {
  display: inline-block;
  width: 200px;
  border: 1px #ddd solid;
  padding: 10px;
  text-align: left;
  color: #222;
  text-decoration: none;
}
.users li a:hover {
  color: orange;
}
</style>

######api/users_controller.rb

lass Api::UsersController < ApplicationController
  def index
    users = User.all
    render json: users
  end
end

######front/Dockerfile(Nuxt.js)

FROM node:14-buster

ENV LANG=C.UTF-8 \
    TZ=Asia/Tokyo \
    APP=/usr/src/app

ENV HOST 0.0.0.0

WORKDIR $APP

COPY package.json $APP
COPY yarn.lock $APP
RUN yarn install


COPY . $APP

CMD ["yarn", "run", "dev"]

######back/Dockerfile(railsAPI)

FROM ruby:2.6.3
RUN apt-get update -qq && apt-get install -y nodejs && \
    apt-get clean
ENV TZ=Asia/Tokyo

ENV APP /usr/src/app
WORKDIR $APP
COPY Gemfile* $APP/

RUN bundle install -j4
COPY . $APP

# Add a script to be executed every time the container starts.
COPY docker-entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/docker-entrypoint.sh
ENTRYPOINT ["docker-entrypoint.sh"]
EXPOSE 3001

# Start the main process.
CMD ["rails", "server", "-p", "3001", "-b", "0.0.0.0"]

試したこと

• localのNuxtとdockerのrailsAPIは問題なく通信可能。
• docker-compose upで立ち上げた場合に、通信不可能。
• 最近dockerをアップデートしたので、ダウングレードしてみました。効果なし。
• フロントのbaseImageを更新してみました。効果なし。
• docker-compose up時にlocalから $curl http://localhost:3001/api/usersを投げるとユーザー一覧が返ってきました。
• docker-compose up時にNuxtのシェルからpingを送信したら、応答がありました。
• docker-compose up時にNuxtのシェルからcurl http://localhost:3001/api/usersを投げると失敗して、下記が返ってきました。

# curl http://localhost:3001/api/users
curl: (7) Failed to connect to localhost port 3001: Connection refused

他にも以下を試しました。

• docker-compose.ymlではrailsAPIの名前をbackにしていたので、Nuxtのシェルから $ curl back:3001/api/usersを投げたところ、railsAPIのdevelopment.rbにconfig.hosts << "back"を追加しろ、と出てきたので追加して再度curlを投げたらユーザー一覧が返ってきました。

次に、Nuxtのproxyでターゲットをlocalhost:3001からback:3001に変えてみましたが500エラーが返ってきました。（指定方法に自信がありません）。　railsのdev環境ではデフォルトでlocalhostと0.0.0.0からの通信が許可されているので、backを指定しなくても問題ないはずだと考えております。

• axiosのリトライ回数を3にしてみましたが、効果なし。
• GETだけじゃなく、ユーザー登録でPOSTでの通信(axios使用)を試しましたが、やはり通信不可能。このことからindex.vueは問題ではないと考えております。

試したのは以上です。
初学者ゆえ無知で申し訳ございませんが、アドバイスよろしくお願い致します。

• proxyを使わずに以下のようにフルパスで指定してみたところ、504errorが消えECONNREFUSED127.0.0.1:3001が出ました。

  async asyncData({ $axios }) {
    const res = await $axios.$get('http://localhost:3001/api/users')
#localhostでなく、0.0.0.0にしても同じ結果でした

• railsAPIのコンテナの内部IPを調べてproxyにそれを入れたらとりあえず無事に通信できました。

  proxy: {
    '/api': {
      target: 'http://172.22.0.3:3001'
    }
  },

他の方はlocalhostでやっているようなので、その方法を引き続き求めております。

補足情報（FW/ツールのバージョンなど）

Nuxt.jsのbaseImageはnode:14-buster
Nuxt 1.0.0
@nuxtjs/proxy@1.3.3
@nuxtjs/axios@5.9.7

Answer 1

https://ja.nuxtjs.org/faq/host-port/

ここはいじりましたか？ Nuxtのコンフィグでhostが0.0.0.0じゃないと他のコンテナ(NW)からの通信を通さないはずです。

Comments

[msickpaler]

回答ありがとうございます！

すみません、私の記述間違いです。
Dockerfileにて、Nuxt, railsAPI両者ともにHOSTを0.0.0.0に指定しております。
試しにnuxt.config.jsに書いてみましたが、変わりませんでした。