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

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

新規登録して質問してみよう
ただいま回答率
86.02%
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つです

Q&A

解決済

【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クリップ

8060閲覧

投稿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

1export const actions = { 2 nuxtServerInit () { 3 this.$axios({ 4 url: 'http://localhost:8000/api/article/recent_articles/', 5 method: 'GET', 6 }) 7 .then(res => { 8 console.log(res) 9 }) 10 .catch(e => { 11 console.log(e) 12 }) 13 }, 14}

docker-compose.yml

yml

1version: '3' 2services: 3 server: 4 image: drf-base 5 container_name: server 6 working_dir: /home/app/server/ 7 command: gunicorn server.wsgi:application --bind 0.0.0.0:8000 8 ports: 9 - '8000:8000' 10 volumes: 11 - .:/home/app 12 tty: true 13 14 client: 15 image: vue-base 16 container_name: client 17 working_dir: /home/app/client 18 ports: 19 - '3000:3000' 20 volumes: 21 - .:/home/app 22 tty: true 23

Client Dockerfile

Dockerfile

1FROM node:latest 2 3RUN apt-get update 4RUN apt-get install -y --no-install-recommends \ 5 net-tools \ 6 sudo \ 7 bzip2 \ 8 curl \ 9 gcc \ 10 vim 11RUN apt-get clean 12 13RUN npm install -g @vue/cli

Server Dockerfile

Dockerfile

1FROM python:3 2 3ENV PYTHONUNBUFFERED 1 4 5RUN apt update 6RUN apt install -y --no-install-recommends \ 7 net-tools \ 8 sudo \ 9 bzip2 \ 10 curl \ 11 gcc \ 12 python3-dev \ 13 vim 14RUN apt clean 15 16RUN pip install --upgrade pip 17RUN pip install \ 18 django \ 19 djangorestframework \ 20 djangorestframework-jwt \ 21 django-filter \ 22 django-environ \ 23 django-cors-headers \ 24 gunicorn \ 25 Pillow

nuxt.config.js

javascript

1import colors from 'vuetify/es5/util/colors' 2 3export default { 4 // Global page headers (https://go.nuxtjs.dev/config-head) 5 head: { 6 titleTemplate: '%s - nuxt-app', 7 title: 'nuxt-app', 8 htmlAttrs: { 9 lang: 'ja' 10 }, 11 meta: [ 12 { charset: 'utf-8' }, 13 { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 14 { hid: 'description', name: 'description', content: '' } 15 ], 16 link: [ 17 { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 18 ] 19 }, 20 21 // Global CSS (https://go.nuxtjs.dev/config-css) 22 css: [ 23 '@/assets/scss/main.scss', 24 ], 25 26 // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins) 27 plugins: [ 28 '@/plugins/filter.js', 29 { src: '@/plugins/cookieStorage.js' }, 30 '@/plugins/http.js', 31 '@/plugins/mixin.js' 32 ], 33 34 // Auto import components (https://go.nuxtjs.dev/config-components) 35 components: true, 36 37 // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules) 38 buildModules: [ 39 // https://go.nuxtjs.dev/eslint 40 '@nuxtjs/eslint-module', 41 // https://go.nuxtjs.dev/vuetify 42 '@nuxtjs/vuetify' 43 ], 44 45 // Modules (https://go.nuxtjs.dev/config-modules) 46 modules: [ 47 // https://go.nuxtjs.dev/axios 48 '@nuxtjs/axios', 49 '@nuxtjs/style-resources', 50 '@nuxtjs/auth', 51 '@nuxtjs/proxy', 52 ], 53 // Axios module configuration (https://go.nuxtjs.dev/config-axios) 54 axios: { 55 baseURL: process.browser ? '' : 'http://localhost:8000', 56 // proxy: true, 57 }, 58 proxy: { 59 '/api': { 60 target: 'http://server:8000/api', 61 pathRewrite: { 62 '^/api/': '/' 63 } 64 } 65 }, 66 server: { 67 host: '0.0.0.0', 68 port: 3000 69 }, 70 router: { 71 middleware: ['global'] 72 }, 73 watchers: { 74 webpack: { 75 poll: true 76 } 77 } 78} 79

試したこと

fetch内で実行

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

vue

1<script> 2 export default { 3 async fetch () { 4 const { data } = await this.$axios.$get('http://localhost:8000/api/article/recent_articles/') 5 console.log(data) 6 } 7 } 8</script>

axiosに渡すURLを変更

javascript

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

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

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

javascript

1proxy: { 2 '/api': { 3 target: 'http://localhost:8000/api', 4 pathRewrite: { 5 '^/api/': '/' 6 } 7 } 8},

実行環境

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

0

自己解決

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

javascript

1// nuxt.config.js 2axios: { 3 baseURL: process.browser ? 'http://localhost:8000' : 'http://localhost:3000', 4}, 5proxy: { 6 '/api': { 7 target: 'http://server:8000', 8 pathRewrite: { 9 '^/api/': '/api/' 10 } 11 } 12}

javascript

1// store/index.js 2export const action = { 3 nuxtServerInit (param) { 4 this.$axios({ 5 url: '/api/article/recent_articles/', 6 method: 'GET' 7 }) 8 } 9}

投稿2020/12/18 08:37

stakizawa

総合スコア117

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

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つです