NextJS's Backend service not working when deploying to Docker - docker

Question

So I have made a NextJS App as a frontend and backend server, it works fine when running it locally (by running yarn dev or yarn build then yarn start), but not working on Docker (using the content of Dockerfile from the official Github project). Found out that the whole backend server is not working at all (knew it because I tried to manually access the API outside from the frontend and it all returned NextJS's 404 Not Found Page), what did I do wrong?
Here's the next.config.js:
module.exports = {
output: 'standalone',
async redirects() {
return [
{
source: '/',
destination: `/${process.env.COUNTRY_CODE}/login`,
permanent: false,
basePath: false,
},
{
source: '/login',
destination: `/${process.env.COUNTRY_CODE}/login`,
permanent: false,
basePath: false,
},
]
},
basePath: `/${process.env.COUNTRY_CODE}`,
trailingSlash: true,
env: {
CRMNX_COUNTRY_CODE: process.env.COUNTRY_CODE,
NEXTAUTH_URL: process.env.NEXTAUTH_URL,
NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
}
};
my package.json:
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "node server.js",
"watch": "nodemon server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
},
"dependencies": {
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#headlessui/react": "^1.6.4",
"#heroicons/react": "^1.0.6",
"#mui/icons-material": "^5.10.9",
"#mui/material": "^5.10.12",
"#mui/x-date-pickers": "^5.0.8",
"axios": "^0.27.2",
"bootstrap": "^5.2.2",
"cookie-session": "^2.0.0",
"csurf": "^1.11.0",
"date-format": "^4.0.14",
"dayjs": "^1.11.6",
"express": "^4.18.2",
"express-rate-limit": "^6.4.0",
"express-session": "^1.17.3",
"formik": "^2.2.9",
"iron-session": "^6.3.1",
"jose": "^4.11.1",
"jsonwebtoken": "^8.5.1",
"libphonenumber-js": "^1.10.6",
"moment": "^2.29.4",
"mysql2": "^2.3.3",
"next": "^13.0.6",
"next-auth": "^4.17.0",
"node-cache": "^5.1.2",
"pure-react-carousel": "^1.30.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-device-detect": "^2.2.2",
"react-hook-form": "^7.31.3",
"react-phone-input-2": "^2.15.1",
"sequelize": "^6.25.3",
"sweetalert2": "^11.4.8",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/preset-react": "^7.18.6",
"autoprefixer": "^10.4.7",
"cors": "^2.8.5",
"dotenv": "^16.0.1",
"eslint": "8.20.0",
"eslint-config-next": "^13.0.6",
"nodemon": "^2.0.20",
"postcss": "^8.4.14",
"prettier": "2.7.1",
"react-select": "^5.5.6",
"sequelize-cli": "^6.5.2",
"tailwindcss": "^3.0.24"
}
}
and my server.js:
const next = require("next");
require('dotenv').config()
const port = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== "production";
const hostname = process.env.APP_HOSTNAME || "localhost";
const app = next({
dev,
hostname,
port,
});
const handle = app.getRequestHandler();
app.prepare().then(() => {
const csrf = require("csurf");
const cookieSession = require("cookie-session");
const server = express();
server.disable("x-powered-by");
server.use(express.json());
server.use(express.urlencoded({ extended: true }));
server.use(
cookieSession({
name: "myapp.sid",
keys: [process.env.APP_KEY],
maxAge: 24 * 60 * 60 * 1000,
})
);
const rateLimit = require("express-rate-limit");
const limiter = rateLimit({
windowMs: 15 * 60 * 1000,
max: 100,
});
// server.use('/api', limiter)
const router = require("./server/route");
server.use(`/${process.env.COUNTRY_CODE}/api`, router);
server.all("*", (req, res) => {
return handle(req, res);
});
server.listen(port, (err) => {
if (err) throw err;
console.log(`> Ready on http://localhost:${port}`);
});
});