質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.80%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 628

msickpaler

score 10

お世話になっております。
今回は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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/04/30 20:41

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る