I have a simple application composed with Express.js as backend API and React.js as Frontend client.
I create a singles image container with frontend and backend Application repo: https://github.com/vitorvr/list-users-kubernetes
Dockerfile:
FROM node:13
WORKDIR /usr/app/listusers
COPY . .
RUN yarn
RUN yarn client-install
RUN yarn client-build
EXPOSE 8080
CMD ["node", "server.js"]
server.js
const express = require('express');
const cors = require('cors');
const path = require('path');
const app = express();
const ip = process.env.IP || '0.0.0.0';
const port = process.env.PORT || 8080;
app.use(express.json());
app.use(cors());
app.use(express.static(path.join(__dirname, 'public')));
app.get('/users', (req, res) => {
res.json([
{ name: 'Jhon', id: 1 },
{ name: 'Ashe', id: 2 }
]);
});
app.listen(port, ip, () =>
console.log(`Server is running at http://${ip}:${port}`)
);
React call:
const api = axios.create({
baseURL: 'http://0.0.0.0:8080'
});
useEffect(() => {
async function loadUsers() {
const response = await api.get('/users');
if (response.data) {
setUsers(response.data);
}
}
loadUsers();
}, []);
To deploy and run this image in minikube I use these follow commands:
kubectl run list-users-kubernetes --image=list-users-kubernetes:1.0 --image-pull-policy=Never
kubectl expose pod list-users-kubernetes --type=LoadBalancer --port=8080
minikube service list-users-kubernetes
The issue occurs when the front end try to access the localhost:
I don't know where I need to fix this, if I have to do some fix in React, or do some settings in Kubernetes or even this is the best practice to deploy small applications as a Container Image at Kubernetes.
Thanks in advance.
