I've set up an Ubuntu LXC container on Proxmox, and inside that container, I've configured Docker and Portainer. Within Docker, I'm working on a Node.js (backend) and React.js (frontend) project. While the project functions well outside of Docker, I encounter errors when attempting to set up the entire stack within Docker. The backend operates without issues. Why might I encounter difficulties connecting to the backend within Docker?I have a file named dev-proxy.js that I need to execute to establish a connection to the backend. Subsequently, I run npm start to launch the project. I'm unsure how to incorporate both of these commands into the Dockerfile to ensure proper execution. I tried diff configurations sometimes backend will connect and frontend not working , sometimes vice-versa.
Dockerfile for frontend
FROM node:18.19.0
# Set the working directory
WORKDIR /opt/my-project/
# Copy package.json and package-lock.json (if exists)
COPY package*.json ./
# Install dependencies
RUN yarn
# Copy the rest of the application code
COPY . .
# Run proxy-dev script
CMD ["sh", "-c", "node dev-proxy.js && npm start"]
Browser Network Tab Response
Request URL:
http://192.168.61.112:3000/undefined/Controllers/Login.ashx
Request Method:
GET
Status Code:
500 Internal Server Error
Remote Address:
192.168.61.112:3000
Referrer Policy:
strict-origin-when-cross-origin
How I normally start the frontend locally (Working method) without Docker
git pull my-git-url
yarn
node dev-proxy.js
# Then, in another terminal window
npm start
How can Configure API connectivity and starting the project from the Docker file? or Can I use NGINX?
If you'd normally run the commands in two separate terminal windows, in Docker you'd generally run them in two separate containers. When you run a container you can override the image's CMD, so you can use this to run two containers with alternate commands.
In the Dockerfile, pick one thing or the other to be the default CMD
CMD ["npm", "start"]
If you're running this in Compose, for the two containers, use the same build: or image: line. If it's build:, Compose will go through the mechanics of building the image twice, but the second image will come entirely from the cache and run quickly, and you'll wind up with two generated names for the same single underlying image. Then override the command: as needed.
services:
backend: { ... }
frontend:
build: ./frontend
ports: ['3000:3000']
proxy:
build: ./frontend
command: node dev-proxy.js