現状

現在、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/  // 変更前
3↓
4/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

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

行動規範の内容に同意します

回答1件

自己解決

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

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}