I have created a Docker container with a react app and a flask app. As of now, I am getting the error: Proxy error: Could not proxy request /backend_endpoint from localhost:3000 to http://api:5000. In my package.json, I have the line "proxy": "http://api:5000". I read on another post that you are supposed to rename localhost:5000 to container_name:5000 in package.json, which is why I have "proxy": "http://api:5000",. I would appreciate any advice/insight! thank you. Here is my docker-compose.yml:
updated docker-compose.yml
```version: '3.7'
services:
client:
build:
context: ./react-app
dockerfile: Dockerfile
tty: true
ports:
- "3000:3000"
volumes:
- ./react-app:/app
- /app/node_modules
api:
build:
context: ./react-app/api
dockerfile: Dockerfile
ports:
- "5000:5000"```
Error message:Proxy error: Could not proxy request /user_entry from localhost:3000 to http://api:5000. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
Related
new to Docker and containers in general. Trying to containerize a simple MERN-based todo list application. Locally on my PC, I can successfully send HTTP post requests from my React frontend to my Nodejs/Express backend and create a new todo item. I use the 'proxy' field in my client folder's package.json file, as shown below:
React starts up on port 3000, my API server starts up on 3001, and with the proxy field defined, all is good locally.
My issue arises when I containerize the three services (i.e. React, API server, and MongoDB). When I try to make the same fetch post request, I receive the following console error:
I will provide the code for my docker-compose file; perhaps it is useful for helping provide me a solution?
version: '3.7'
services:
client:
depends_on:
- server
build:
context: ./client
dockerfile: Dockerfile
image: jlcomp03/rajant-client
container_name: container_client
command: npm start
volumes:
- ./client/src/:/usr/app/src
- ./client/public:/usr/app/public
# - /usr/app/node_modules
ports:
- "3000:3000"
networks:
- frontend
stdin_open: true
tty: true
server:
depends_on:
- mongo
build:
context: ./server
dockerfile: Dockerfile
image: jlcomp03/rajant-server
container_name: container_server
# command: /usr/src/app/node_modules/.bin/nodemon server.js
volumes:
- ./server/src:/usr/app/src
# - /usr/src/app/node_modules
ports:
- "3001:3001"
links:
- mongo
environment:
- NODE_ENV=development
- MONGODB_CONNSTRING='mongodb://container_mongodb:27017/todo_db'
networks:
- frontend
- backend
mongo:
image: mongo
restart: always
container_name: container_mongodb
volumes:
- mongo-data:/data/db
ports:
- "27017:27017"
networks:
- backend
volumes:
mongo-data:
driver: local
node_modules:
web-root:
driver: local
networks:
backend:
driver: bridge
frontend:
My intuition tells me the issue(s) lies in some configuration parameter I am not addressing in my docker-compose.yml file? Please help!
Your proxy config won't work with containers because of its use of localhost.
The Docker bridge network docs provide some insight why:
Containers on the default bridge network can only access each other by IP addresses, unless you use the --link option, which is considered legacy. On a user-defined bridge network, containers can resolve each other by name or alias.
I'd suggest creating your own bridge network and communicating via container name or alias.
{
"proxy": "http://container_server:3001"
}
Another option is to use http://host.docker.internal:3001.
I have fronted in react and backend in java. I would like to call backend API in docker and indicate host properly in docker compose from frontend container.
docker-compose.yml
services:
app:
image: 'image1'
container_name: app
ports:
- "8080:8080"
volumes:
- app:/var/lib/app/data
client:
image: 'image2'
build:
context: .
args:
REACT_APP_API_BASE_URL: http://app:8080
container_name: client
depends_on:
- app
ports:
- "80:80"
volumes:
- client:/var/lib/client/data
Network is prepared. What should I put in REACT_APP_API_BASE_URL? http://app:8080 is not working. If I put http://localhost:8080 all is working fine but on prod environment localhost isn't correct.
I have a React and .NET 6 project, each in separate containers and brought up together on the same Docker Virtual Network via Docker Compose. Both start and run fine but the React frontend is unable to communicate to the backend.
For whatever reason, I can access the weather api on my backend using my browser (doesn't work on the frontend) but not any other endpoint. https://localhost:5001/api/weatherforecast returns the generated weather data (default tutorial weather api).
But when I go to other endpoints like https://localhost:5001/api/user?userId=1, I get the following: Error: The SSL connection could not be established, see inner exception.
I'm not sure if it is an issue with the setupProxy.js or something wrong with the self-signed cert on the .NET backend.
docker-compose.yml
version: "3.8"
networks:
api-network:
services:
server:
build:
context: ./server-testing/server
args:
PROXY: ${PROXY}
container_name: 'server'
ports:
- '5000:5000'
- '5001:5001'
networks:
- api-network
environment:
- ASPNETCORE_ENVIRONMENT=Development
- ASPNETCORE_Kestrel__Certificates__Default__Password=${PW}
- ASPNETCORE_Kestrel__Certificates__Default__Path=/https/aspnetapp.pfx
volumes:
- ~/.aspnet/https:/https:ro
client:
build:
context: ./client
args:
PROXY: ${PROXY}
container_name: 'client'
depends_on:
- server
ports:
- '3000:3000'
networks:
- api-network
stdin_open: true # Keep STDIN open even if not attached
tty: true # Allocate a pseudo-TTY
Frontend Setup
The build is served by an nginx layer to serve a production React build.
In my package.json, I have "start": "set HTTPS=true&&react-scripts start" instead of "start": "react-scripts start".
// setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
const context = [
"/api"
];
module.exports = function (app) {
const appProxy = createProxyMiddleware(context, {
target: 'https://server:5001/',
secure: false,
changeOrigin: true
});
app.use(appProxy);
};
Backend Setup
Self-signed certs generated with dotnet dev-certs https -ep %USERPROFILE%\.aspnet\https\aspnetapp.pfx -p { password here }
Three endpoints:
/weatherforecast
/user/
/cart/
Endpoints are accessed as https://localhost:5001/api/endpoint?params
If you need any more information, please let me know. Thanks!
Consider the Docker compose
version: '3'
services:
frontend:
build:
context: ./frontend
container_name: frontend
command: npm start
stdin_open: true
tty: true
volumes:
- ./frontend:/usr/app
ports:
- "3000:3000"
backend:
build:
context: ./backend
container_name: backend
command: npm start
environment:
- PORT=3001
- MONGO_URL=mongodb://api_mongo:27017
volumes:
- ./backend/src:/usr/app/src
ports:
- "3001:3001"
api_mongo:
image: mongo:latest
container_name: api_mongo
volumes:
- mongodb_api:/data/db
ports:
- "27017:27017"
volumes:
mongodb_api:
And the React Dockerfile :
FROM node:14.10.1-alpine3.12
WORKDIR /usr/app
COPY package.json .
RUN npm i
COPY . .
Folder Structure :
-frontend
-backend
-docker-compose.yml
And inside Frontend :
And inside src :
When I change files inside src it doesn't reflect on the Docker side.
How can we fix this ?
Here is the answer :
If you are running on Windows, please read this: Create-React-App has some issues detecting when files get changed on Windows based machines. To fix this, please do the following:
In the root project directory, create a file called .env
Add the following text to the file and save it: CHOKIDAR_USEPOLLING=true
That's all!
Don't use same name dir for different services like you use /usr/app change this to /client/app for client and server/app for backend and then it all works and use environment:- CHOKIDAR_USEPOLLING=true and use FROM node:16.5.0-alpine and can use stdin_open: true
So I'm running a web app which consist of 3 services with docker-compose.
A mongodb database container.
A nodejs backend.
A nginx container with static build folder which serves a react app.
Locally it runs fine and I'm very happy, when trying to deploy to a vps I'm facing an issue.
I've set the vps' nginx to reverse proxy to port 8000 which serves the react app, it runs as expected but I can not send requests to the backend, when I'm logged in the vps I can curl it and it responds, but when the web app sends requests, they hang.
My docker-compose:
version: '3.7'
services:
server:
build:
context: ./server
dockerfile: Dockerfile
image: server
container_name: node-server
command: /usr/src/app/node_modules/.bin/nodemon server.js
depends_on:
- mongo
env_file: ./server/.env
ports:
- '8080:4000'
environment:
- NODE_ENV=production
networks:
- app-network
mongo:
image: mongo:4.2.7-bionic
container_name: database
hostname: mongo
environment:
- MONGO_INITDB_ROOT_USERNAME=...
- MONGO_INITDB_ROOT_PASSWORD=...
- MONGO_INITDB_DATABASE=admin
restart: always
ports:
- 27017:27017
volumes:
- ./mongo/init-mongo.js:/docker-entrypoint-initdb.d/init-mongo.js:ro
networks:
- app-network
client:
build:
context: ./client
dockerfile: prod.Dockerfile
image: client-build
container_name: react-client-build
env_file: ./client/.env
depends_on:
- server
ports:
- '8000:80'
networks:
- app-network
networks:
app-network:
driver: bridge
volumes:
data-volume:
node_modules:
web-root:
driver: local