So I've created a MERN stack web application and I'm using docker. one image for my react app and one image for the express app. my database is still in the production stage and it's on Mlab. It may be not relevant but I want to provide full information to get my exact answer. here is my docker config files:
backend Dockerfile:
FROM node
WORKDIR /app
COPY package.json .
COPY package-lock.json .
RUN npm install pm2 -g
RUN npm install
RUN npm audit fix
COPY . .
COPY .env .
EXPOSE 2424
CMD ["npm","run","server"]
Front Dockerfile:
FROM node as builder
RUN mkdir -p /app
RUN chmod -R 777 /app
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json .
RUN npm install
COPY . .
COPY .env .
FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
and my docker-compose file:
version: "3"
networks:
now-net:
driver: bridge
services:
nowfront:
container_name: frontapp
build:
context: ./front
dockerfile: ./Docker/Dockerfile
volumes:
- "./front:/app"
- "/app/node_modules"
ports:
- 60:80
stdin_open: true
tty: true
restart: always
environment:
- CHOKIDAR_USEPOLLING=true
networks:
- now-net
backend:
container_name: backapp
restart: always
stdin_open: true
tty: true
build:
context: ./backend
dockerfile: Dockerfile
volumes:
- "./backend:/app"
- "/app/node_modules"
ports:
- 40:2424
networks:
- now-net
my server is listening to port 40 and front is listening to port 60. they're both on the same server. for example HTTP://222.222.22.22:40 and HTTP://222.222.22.22:60 And I'm using pm2 to run the server using "pm2 start app.js". in my express app, I've allowed all origins using cors npm module:
app.use(cors({ origin: "http://222.222.22.22:60", credentials: true }));
app.use(fileupload({ useTempFiles: true }));
app.use(express.json({ limit: "200mb" }));
app.use(express.urlencoded({ extended: true, limit: "200mb" }));
Now before using pm2, everything was working fine. after using pm2, I get this error every time I make a request to my backend. for example I get this error in Firefox dev tools:
"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://222.222.22.22:40/api/instruments/get-all-instruments-public. (Reason: CORS request did not succeed)"
and in the Network tab: Firefox network tab
I send this specific request like this:
export const getAllInstrumentsPublic = () => (dispatch) => {
axios
.get(`${uri.BaseURI}/api/instruments/get-all-instruments-public`)
.then((result) => {
const instruments = result.data;
dispatch({
type: types.GET_ALL_INSTRUMENTS,
payload: instruments,
});
})
.catch((err) => {
dispatch({
type: types.GET_ERROR,
payload: err.response ? err.response : {},
});
});
};
Now, the question is simple. What am I doing wrong?
So I changed the Dockerfile and package.json to run the server with nodemon again, and it works fine now. It is weird. because using pm2 is so simple and straightforward and I want to use pm2 in production so the server could be reliable. If anyone can suggest a complete solution to my problem, I'd appreciate it.