現状
現在、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
以上、よろしくお願いいたします。
まだ回答がついていません
会員登録して回答してみよう