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

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

新規登録して質問してみよう
ただいま回答率
87.20%
docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

解決済

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

stakizawa
stakizawa

総合スコア117

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

1回答

0評価

0クリップ

5575閲覧

投稿2020/12/15 06:36

現状

現在、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

javascript

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

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

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

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

javascript

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を実行してみましたが、結果は同じでした。

vue

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

axiosに渡すURLを変更

javascript

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

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

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

javascript

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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです