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

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

ただいまの
回答率

87.36%

【Nuxt】SSRモード時に、サーバサイドでAxiosを実行してもconnect ECONNREFUSED 127.0.0.1:8000のエラーが出力され、結果が取得出来ない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,320

score 117

現状

現在、Nuxt.jsを使用してSSRでの開発を行っております。
store/index.jsのactionに、nuxtServerInitメソッドを用意し、axiosを実行したところ下記のエラーが出力されデータを取得することが出来ません。
下記エラーの対処方法をご教授頂けると幸いです。

※APIには、Django REST Frameworkを使用しております。
※クライアントサイドでAxiosを実行した際には問題なくデータは取得出来ております。

エラー内容

connect ECONNREFUSED 127.0.0.1:8000                                                                                                                                                                                                05:22:57

  at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1128:16)

ソースコード

store/index.js

export const actions = {
    nuxtServerInit () {
        this.$axios({
            url: 'http://localhost:8000/api/article/recent_articles/',
            method: 'GET',
        })
        .then(res => {
            console.log(res)
        })
        .catch(e => {
            console.log(e)
        })
    },
}

docker-compose.yml

version: '3'
services:
    server:
        image: drf-base
        container_name: server
        working_dir: /home/app/server/
        command: gunicorn server.wsgi:application --bind 0.0.0.0:8000
        ports:
            - '8000:8000'
        volumes:
            - .:/home/app
        tty: true

    client:
        image: vue-base
        container_name: client
        working_dir: /home/app/client
        ports:
            - '3000:3000'
        volumes:
            - .:/home/app
        tty: true

Client Dockerfile

FROM node:latest

RUN apt-get update
RUN apt-get install -y --no-install-recommends \
    net-tools \
    sudo \
    bzip2 \
    curl \
    gcc \
    vim
RUN apt-get clean

RUN npm install -g @vue/cli

Server Dockerfile

FROM python:3

ENV PYTHONUNBUFFERED 1

RUN apt update
RUN apt install -y --no-install-recommends \
    net-tools \
    sudo \
    bzip2 \
    curl \
    gcc \
    python3-dev \
    vim
RUN apt clean

RUN pip install --upgrade pip
RUN pip install \
    django \
    djangorestframework \
    djangorestframework-jwt \
    django-filter \
    django-environ \
    django-cors-headers \
    gunicorn \
    Pillow

nuxt.config.js

import colors from 'vuetify/es5/util/colors'

export default {
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    titleTemplate: '%s - nuxt-app',
    title: 'nuxt-app',
    htmlAttrs: {
        lang: 'ja'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
      '@/assets/scss/main.scss',
  ],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
      '@/plugins/filter.js',
      { src: '@/plugins/cookieStorage.js' },
      '@/plugins/http.js',
      '@/plugins/mixin.js'
  ],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify'
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/style-resources',
    '@nuxtjs/auth',
    '@nuxtjs/proxy',
  ],
  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {
     baseURL: process.browser ? '' : 'http://localhost:8000',
    // proxy: true,
  },
  proxy: {
      '/api': {
          target: 'http://server:8000/api',
          pathRewrite: {
              '^/api/': '/'
          }
      }
  },
  server: {
      host: '0.0.0.0',
      port: 3000
  },
  router: {
      middleware: ['global']
  },
  watchers: {
      webpack: {
          poll: true
      }
  }
}

試したこと

fetch内で実行

index.vueコンポーネント内のfetchで同じようにAxiosを実行してみましたが、結果は同じでした。

<script>
    export default {
        async fetch () {
            const { data } = await this.$axios.$get('http://localhost:8000/api/article/recent_articles/')
            console.log(data)
        }
    }
</script>

axiosに渡すURLを変更

// urlを下記のように修正
http://localhost:8000/api/article/recent_articles/  // 変更前
↓
/api/article/recent_articles/   // 変更後

nuxt.config.jsのproxyの設定を変更

nuxt.config.js内のproxyのtargetプロパティの設定をdockerの名前空間を指定していましたが、localhostに変更してみました。

proxy: {
    '/api': {
        target: 'http://localhost:8000/api',
        pathRewrite: {
            '^/api/': '/'
        }
    }
},

実行環境

Docker : 19.03.13
docker-compose : 1.27.4
nuxt : 2.14.7
node.js : 15.1.0
npm : 7.0.8
OS : Debian GNU/Linux 9


以上、よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

下記実装で解決することが出来ました。

// nuxt.config.js
axios: {
  baseURL: process.browser ? 'http://localhost:8000' : 'http://localhost:3000',
},
proxy: {
  '/api': {
    target: 'http://server:8000',
    pathRewrite: {
      '^/api/': '/api/'
    }
  }
}
// store/index.js
export const action = {
  nuxtServerInit (param) {
    this.$axios({
      url: '/api/article/recent_articles/',
      method: 'GET'
    })
  }
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • トップ
  • Node.jsに関する質問
  • 【Nuxt】SSRモード時に、サーバサイドでAxiosを実行してもconnect ECONNREFUSED 127.0.0.1:8000のエラーが出力され、結果が取得出来ない