完全なエラーメッセージ:connect ECONNREFUSED 127.0.0.1:30561 at TCPConnectWrap.afterConnect
axios リクエストは Node.js 環境 (Next.js) で実行されており、ここでエラーが発生しますが、奇妙なことに、axios リクエストはブラウザーで実行されているときは完全に正常に機能します。
axios を呼び出すコンポーネント (Node.js で実行):
import axios from 'axios'
import Router from 'next/router'
import React, { Component } from 'react'
import { initializeStore } from '~/reducers'
import { authenticate } from '~/actions/auth'
import { getCookieByName } from '~/helpers/cookie'
const isServer = typeof window === 'undefined'
const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__'
function getOrCreateStore(initialState) {
// Always make a new store if server, otherwise state is shared between requests
if (isServer) {
return initializeStore(initialState)
}
// Create store if unavailable on the client and set it on the window object
if (!window[__NEXT_REDUX_STORE__]) {
window[__NEXT_REDUX_STORE__] = initializeStore(initialState)
}
return window[__NEXT_REDUX_STORE__]
}
export default App => {
return class AppWithRedux extends Component {
static async getInitialProps(appContext) {
const reduxStore = getOrCreateStore()
appContext.ctx.reduxStore = reduxStore
let appProps = {}
if (typeof App.getInitialProps === 'function') {
appProps = await App.getInitialProps(appContext)
}
const JWT = (isServer ? getCookieByName('JWT', appContext.ctx.req.headers.cookie) : getCookieByName('JWT', document.cookie))
const pathname = appContext.ctx.pathname
//set axios baseURL
axios.defaults.baseURL = (isServer ? `${appContext.ctx.req.headers['x-forwarded-proto']}://${appContext.ctx.req.headers.host}` : window.location.origin)
//if user has a JWT
if(JWT){
axios.defaults.headers.common['Authorization'] = `Bearer ${JWT}`
//get user from API layer
reduxStore.dispatch(authenticate())
}
return {
...appProps,
initialReduxState: reduxStore.getState()
}
}
constructor(props) {
super(props)
this.reduxStore = getOrCreateStore(props.initialReduxState)
}
render() {
return <App {...this.props} reduxStore={this.reduxStore} />
}
}
}
具体的にはreduxStore.dispatch(authenticate())
そして、実際の axios 呼び出し (redux thunk を使用) では、authenticate
メソッドを確認します。
import axios from 'axios'
import { setCookieByName } from '~/helpers/cookie'
const BASE_URL = '/api/auth'
export const TYPE_REGISTER = 'TYPE_REGISTER'
export const TYPE_AUTHENTICATE = 'TYPE_AUTHENTICATE'
export const register = values => (dispatch) => {
return axios.post(`${BASE_URL}/register`, values)
.then(function({data: {token, user}}){
setCookieByName('JWT', token, 365)
dispatch({
type: TYPE_REGISTER,
payload: user
})
})
}
export const authenticate = () => (dispatch) => {
return axios.post(`${BASE_URL}/me`)
.then(function({data: {user}}){
dispatch({
type: TYPE_AUTHENTICATE,
payload: user
})
})
.catch(function(err){
console.log(err)
dispatch({
type: TYPE_AUTHENTICATE,
payload: {}
})
})
}
Docker for Mac を使用してローカルの Kubernetes クラスターを実行しており、Ingress コントローラーは でアクセスされていますhttp://kludge.info:30561
。ドメインは、Ingress コントローラーがコンテナーにアクセスできるように、ローカルから にマッピングされています127.0.0.1 kludge.info
。私の考えでは、たとえば にリクエストを送信するとhttp://kludge.info:30561/api/auth/me
、Node.js アプリを実行している docker コンテナーは、それを localhost (コンテナー内) へのリクエストであると認識し、接続エラーが発生します。コンテナー内の Node.js アプリは で実行されていることに注意してくださいhttp://localhost:8080
。基本的に、マシン上で localhost を実行し、Node インスタンス内で localhost を実行しています。Ingress コントローラーが実行されている外部にリクエストを送信するにはどうすればよいでしょうかhttp://kludge.info:30561/
。
axiosでも設定しましたbaseURL
が、問題は解決しません。Ingress コントローラー/api
には PHP インスタンスを指すパスがあるため、コンテナー内で Node.js axios 呼び出しを実行する必要があります。ご協力いただければ幸いです。
Minikube で K8 クラスターを実行したときはこの問題は発生しませんでしたが、Minikube は VM の IP を提供しますが、Docker for Desktop はlocalhost
マシン上で直接使用します。