Next.js getServerSideProps is not working using docker - docker

Question

Currently, I am trying to fetch data after communicating with the backend server through SSR through Next.js and sprinkle it on the page.
However, one problem is that when I run npm run dev locally, getServerSideProps runs well, but when I upload it to a container through Docker-compose, my API for getServerSideProps doesn't work.
const ResultMenu: NextPage<Props> = ({ CategoryData }) => {
...
};
export default ResultMenu;
export const getServerSideProps: GetServerSideProps = async (context) => {
try {
const { menuId } = context.query;
const response = await axios.get<CategoryType[]>(
"http://localhost:8080/category/get/menu",
{
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
params: {
menuId: menuId,
},
}
);
const data = response.data;
console.log(data);
return {
props: {
CategoryData: data,
},
};
} catch (err) {
console.log(err);
return {
props: {},
};
}
};
In the frontend container, this error code appears
Error: connect ECONNREFUSED 127.0.0.1:8080
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1195:16) {
errno: -111,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '127.0.0.1',
port: 8080,
config: {
transitional: {
silentJSONParsing: true,
forcedJSONParsing: true,
clarifyTimeoutError: false
},
adapter: [Function: httpAdapter],
transformRequest: [ [Function: transformRequest] ],
transformResponse: [ [Function: transformResponse] ],
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
maxBodyLength: -1,
validateStatus: [Function: validateStatus],
headers: {
Accept: 'application/json, text/plain, */*',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'User-Agent': 'axios/0.26.1'
},
params: { menuId: '1' },
method: 'get',
url: 'http://localhost:8080/category/get/menu',
data: undefined
},
request: <ref *1> Writable {
_writableState: WritableState {
objectMode: false,
highWaterMark: 16384,
finalCalled: false,
needDrain: false,
ending: false,
ended: false,
finished: false,
destroyed: false,
decodeStrings: true,
defaultEncoding: 'utf8',
length: 0,
writing: false,
corked: 0,
sync: true,
bufferProcessing: false,
onwrite: [Function: bound onwrite],
writecb: null,
writelen: 0,
afterWriteTickInfo: null,
buffered: [],
bufferedIndex: 0,
allBuffers: true,
allNoop: true,
pendingcb: 0,
constructed: true,
prefinished: false,
errorEmitted: false,
emitClose: true,
autoDestroy: true,
errored: null,
closed: false,
closeEmitted: false,
[Symbol(kOnFinished)]: []
},
_events: [Object: null prototype] {
response: [Function: handleResponse],
error: [Function: handleRequestError],
socket: [Function: handleRequestSocket]
},
_eventsCount: 3,
_maxListeners: undefined,
_options: {
maxRedirects: 21,
maxBodyLength: 10485760,
protocol: 'http:',
path: '/category/get/menu?menuId=1',
method: 'GET',
headers: [Object],
agent: undefined,
agents: [Object],
auth: undefined,
hostname: 'localhost',
port: '8080',
nativeProtocols: [Object],
pathname: '/category/get/menu',
search: '?menuId=1'
},
_ended: true,
_ending: true,
_redirectCount: 0,
_redirects: [],
_requestBodyLength: 0,
_requestBodyBuffers: [],
_onNativeResponse: [Function (anonymous)],
_currentRequest: ClientRequest {
_events: [Object: null prototype],
_eventsCount: 7,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: true,
chunkedEncoding: false,
shouldKeepAlive: false,
maxRequestsOnConnectionReached: false,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: false,
sendDate: false,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
_contentLength: 0,
_hasBody: true,
_trailer: '',
finished: true,
_headerSent: true,
_closed: false,
socket: [Socket],
_header: 'GET /category/get/menu?menuId=1 HTTP/1.1\r\n' +
'Accept: application/json, text/plain, */*\r\n' +
'Content-Type: application/json\r\n' +
'Access-Control-Allow-Origin: *\r\n' +
'User-Agent: axios/0.26.1\r\n' +
'Host: localhost:8080\r\n' +
'Connection: close\r\n' +
'\r\n',
_keepAliveTimeout: 0,
_onPendingData: [Function: nop],
agent: [Agent],
socketPath: undefined,
method: 'GET',
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
path: '/category/get/menu?menuId=1',
_ended: false,
res: null,
aborted: false,
timeoutCb: null,
upgradeOrConnect: false,
parser: null,
maxHeadersCount: null,
reusedSocket: false,
host: 'localhost',
protocol: 'http:',
_redirectable: [Circular *1],
[Symbol(kCapture)]: false,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype]
},
_currentUrl: 'http://localhost:8080/category/get/menu?menuId=1',
[Symbol(kCapture)]: false
},
response: undefined,
isAxiosError: true,
toJSON: [Function: toJSON]
}
1
undefined
Dockerfile
FROM node:12
ENV PORT 3000
# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
# Installing dependencies
COPY package*.json /usr/src/app/
RUN npm install
# Copying source files
COPY . /usr/src/app
# Building app
RUN npm run build
EXPOSE 3000
# Running the app
CMD "npm" "run" "dev"
docker-compose.yml
version: "3"
services:
frontend:
container_name: frontend
build:
context: ./frontend
dockerfile: Dockerfile
ports:
- "3000:3000"
volumes:
- ./frontend:/usr/src/app
- /usr/src/app/node_modules
- /usr/src/app/.next
networks:
- network-tier
backend:
container_name: backend
build: ./backend
depends_on:
- mysqldb
ports:
- 8080:8080
environment:
spring.datasource.url: "jdbc:mysql://mysqldb:3306/test_db?useSSL=false&useLegacyDatetimeCode=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Seoul&characterEncoding=UTF-8&autoReconnect=true&createDatabaseIfNotExist=true"
volumes:
- ./menu-canvas:/usr/src/backend
networks:
- network-tier
tty: true
mysqldb:
image: mysql:5.7
container_name: mysqldb
environment:
MYSQL_DATABASE: test_db
MYSQL_ROOT_PASSWORD: "0000"
MYSQL_ROOT_HOST: "%"
CHARACTER_SET_SERVER: utf8
command:
[
"--character-set-server=utf8mb4",
"--collation-server=utf8mb4_unicode_ci",
]
volumes:
- ./menu-canvas:/usr/src/db
ports:
- "3306:3306"
networks:
- network-tier
platform: linux/amd64
networks:
network-tier:
external: true
volumes:
menu-canvas:
next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: ["localhost", "*"],
},
reactStrictMode: true,
};
module.exports = nextConfig;
package.json
{
"name": "frontend",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
...
},
"devDependencies": {
...
},
"proxy": {
"*": {
"target": "http://localhost:8080"
}
}
}
I've been thinking a lot all day, but I don't know how... Help!

Answer 1

When running the getServerSideProps the communication would be container to container. So for these requests, routes to localhost would not work. Instead it would need to be something like backend:8080 (when communicating from the frontend service to the backend service).
The localhost domain would work as expected on the client side requests assuming you were exposing all ports as expected.
When you run this without docker everything works because all services are on localhost. When run via docker-compose they no longer are.
If you really wanted to use localhost instead of the service name you may be able to use a network host https://docs.docker.com/network/host/