node and react app with nginx connectivity issue - node.js

i am trying to setup a node + react app for local develpoment environment using docker + nginx
nginx is running on 3002
for route /api strip off the /api and redirect to service api i.e. the node app
redirect other routes to service client i.e. react app
docker-compose file
version: "3"
services:
api:
build:
context: api
dockerfile: Dockerfile.dev
ports:
- 3000:3000
volumes:
- ./api:/app
client:
stdin_open: true
build:
context: client
dockerfile: Dockerfile.dev
ports:
- 3001:3000
volumes:
- ./client:/app
nginx:
restart: always
build:
context: nginx
dockerfile: Dockerfile.dev
ports:
- 3002:80
volumes:
- ./nginx/default.dev.conf:/etc/nginx/conf.d/default.conf
depends_on:
- client
- api
nginx default.dev.conf
upstream api {
server api:3000;
}
upstream client {
server client:3001;
}
server {
listen 80;
location / {
proxy_pass http://client;
}
location /sockjs-node {
proxy_pass http://client;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
location /api {
rewrite /api/(.*) /$1;
proxy_pass http://api/;
}
}
client Dockerfile.dev
FROM node:alpine
WORKDIR /app
CMD ["npm", "run", "start"]
api Dockerfile.dev
FROM node:alpine
WORKDIR /app
CMD ["npm", "run", "dev"]
nginx Dockerfile.dev
FROM nginx
on visiting http://localhost:3002/api - works
on visiting http://localhost:3002 - i get 502 Bad Gateway
http://localhost:3000 and http://localhost:3001 work
on docker exec -it bytecode_api_1 sh (i.e. going inside terminal of api container) ping client and ping nginx work
the issue is in the connection between reat-app and nginx i.e. neither is reqeust from react going to nginx and nor is a request to http://localhost:3002 being directed to react-server
EDIT: figured it out with the help of some good people on discord, i had made a silly mistake, it should be
upstream client {
server client:3000;
}
i.e. the container port

Related

Docker - React app not reachable with nginx

I have backend express js, frontend react js . Express api reachable but not React
===> React Dockerfile :
FROM node:16 as client-build
WORKDIR /front
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 80
# Setup the server
FROM nginx
WORKDIR /front
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=client-build /front/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
===> Backend Dockerfile :
FROM node:16
WORKDIR /back
COPY package*.json ./
RUN npm install
COPY . .
CMD npm run start
===> docker-compose :
version: "3.8"
services:
mongodb:
image: mongo:3.6.8
restart: unless-stopped
ports:
- "27017:27017"
volumes:
- db:/data/db
networks:
- backend
back:
depends_on:
- mongodb
build: ./back
ports:
- "9000:9000"
networks:
- backend
- frontend
restart: on-failure
front:
depends_on:
- back
build: ./front
ports:
- "80:9001"
networks:
- frontend
restart: unless-stopped
volumes:
db:
driver: local
networks:
backend:
frontend:
I use docker on windows ps and on ubuntu server, both results are same.
localhost:9000 or domain.com:9000 - backend reachable
but localhost / localhost:9001 / domain.com / domain.com / 9001 not reachable
Only when i run a curl on terminal with local ip (that i got from docker 192.172****) i get result but not from outside
I'm new at docker. My goal is make the frontend accessable via domain and api private. But for the very next step all i need is to access frontend via browser.
===> Nginx conf
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
server_name _;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /api/ {
proxy_pass http://back:9000/api/;
}
}
}

node App not reachable from outside docker

Im having troubles while trying to access my NodeJs app on a container.
Resume:
I customized my own image to run pm2 and loopback on my container.
I configured my app to listen to a mongodb on another container within a docker network. This works fine.
I created my docker-compose.yml file to looks like this:
version: '3.5'
services:
webapp:
expose:
- "3000"
ports:
- "3000:3000"
volumes:
- ${NODEJS_PATH}:${NODEJS_PATH_DESTIONATION}
image: ${CUSTOMIZED_IMAGE}
networks:
default:
ipv4_address: ${NODEJS_IP}
db:
image: mongo:4.2.6
container_name: mongodb
restart: always
environment:
MONGO_INITDB_ROOT_USERNAME: ${MONGO_INITDB_ROOT_USERNAME}
MONGO_INITDB_ROOT_PASSWORD: ${MONGO_INITDB_ROOT_PASSWORD}
MONGO_INITDB_DATABASE: ${MONGO_INITDB_DATABASE}
volumes:
- ${MONGO_SCRIPT_PATH}:${MONGO_SCRIPT_DESTINATION_PATH}
networks:
default:
ipv4_address: ${MONGO_INITDB_IP}
networks:
default:
external:
name: ${CUSTOMIZED_NET}
I ran my webapp with docker-compose run webapp for now for customize purposes.
Inside this container I execute the next cmd
pm2 start app.js --env environment_variables
It runs the NodeJS App on http://localhost:3000 inside the docker
I tried to check this from a browser http://{DOCKER_IP}:3000 but it's not working.
I would be eternally grateful with any answer to this trouble.
We used nginx to proxy_pass the service from the docker to the outside world.
We did it this way because we need other services on the docker_network to listen to this one.
Here is the config from the nginx
server {
listen 80;
server_name domain.local;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

How can I use nginx for load balancer -simple node.js with docker compose?

I am googling and trying to use nginx for simple node.js application with docker compose. But when I look at localhost:8081 My request returned me as 502 bad gate way. How can I handle this error?
My file structure below:
Load-Balancer:
DockerFile:
FROM nginx:stable-alpine
LABEL xxx yyyyyy
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 8081
CMD ["nginx", "-g", "daemon off;"]
nginx.conf:
events { worker_connections 1024; }
http {
upstream localhost {
server backend1:3001;
server backend2:3001;
server backend3:3001;
}
server {
listen 8081;
server_name localhost;
location / {
proxy_pass http://localhost;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
}
}
}
docker-compose.yml
version: '3.2'
services:
backend1:
build: ./backend
tty: true
volumes:
- './backend'
backend2:
build: ./backend
tty: true
volumes:
- './backend'
backend3:
build: ./backend
tty: true
volumes:
- './backend'
loadbalancer:
build: ./load-balancer
tty: true
links:
- backend1
- backend2
- backend3
ports:
- '8081:8081'
volumes:
backend:
My repository: https://github.com/yusufkaratoprak/nginx_docker_loadbalancer
There is no command set for the backend container images to run.
The official nodejs images run node by default, which will start the cli when a tty exists. I assuming the tty was enabled in the compose definition to keep the containers from crashing.
A simple Dockerfile for an app would look like:
FROM node:boron
WORKDIR /app
COPY src/. /app/
RUN npm install
EXPOSE 3001
CMD [ "node", "/app/index.js" ]
A tty shouldn't be needed for most daemons, remove the tty settings from the docker-compose.yml. The links are also redundant in version 2+ compose files.
version: '3.2'
services:
backend1:
build: ./backend
volumes:
- './backend'
backend2:
build: ./backend
volumes:
- './backend'
backend3:
build: ./backend
volumes:
- './backend'
loadbalancer:
build: ./load-balancer
ports:
- '8081:8081'
volumes:
backend:

node express with docker-compose returns 502 bad gateway

My application is working. console.log is recorded on logs, and able to display process.env.URL on cmd. However, on the browser, it returns error 502, bad gateway.
This is my docker-compose
version: "2"
volumes:
mongostorage:
services:
app:
build: ./app
ports:
- "3000"
links:
- mongo
- redis
command: node ./bin/www
nginx:
build: ./nginx
ports:
- "80:80"
links:
- app:app
mongo:
image: mongo:latest
environment:
- MONGO_DATA_DIR=/data/db
volumes:
- mongostorage:/data/db
ports:
- "27017:27017"
redis:
image: redis
volumes:
- ./data/redis/db:/data/db
ports:
- "6379:6379"
nginx.conf
events {
worker_connections 1024;
}
http{
upstream app.dev{
least_conn;
server app:3000 weight=10 max_fails=3 fail_timeout=30s;
}
server {
listen 80;
server_name app.dev;
location / {
proxy_pass http://app;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
}
This is app/Dockerfile
FROM node:6.3
WORKDIR /var/www/app
RUN mkdir -p /var/www/app
COPY package.json /var/www/app
RUN npm install
COPY . /var/www/app
This is nginx/Dockerfile
FROM nginx:latest
EXPOSE 80
COPY nginx.conf /etc/nginx/nginx.conf
In your nginx.conf file, In proxy_pass_http you should use the server name i.e
proxy_pass http://app.dev/ instead of proxy_pass http://app and it should work;

Nginx connection refused, when trying to connect to node app as reverse proxy

I trying to build a webapp with docker containers and I am getting connection refused when trying to run Nginx as a reverse proxy to my node app. I am not sure if it is a nginx server config issue or a docker-compose config issue.
[error] 5#5: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.20.0.1, server: foo.com, request: "GET / HTTP/1.1", upstream: "http://127.0.0.1:7770/", host: "foo.com"
I get this error when hitting foo.com, the weird thing is that my app works when the port number is referenced, so foo.com:7770 runs the app.
My nginx server config:
server {
listen 80;
server_name foo.com;
port_in_redirect off;
autoindex on;
location / {
proxy_pass http://127.0.0.1:7770;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
My Docker Compose File: (There might be some redundant things in here)
version: "2"
services:
nginx:
build: ./nginx
ports:
- "80:80"
depends_on:
- app
links:
- app
app:
build:
context: .
dockerfile: DockerFile
ports:
- "7770:7770"
links:
- mongo
depends_on:
- mongo
mongo:
image: mongo
ports:
- "27017:27017"
volumes_from:
- mongodata
depends_on:
- mongodata
mongodata:
image: tianon/true
volumes:
- /data/db
My Node Dockerfile:
FROM node:latest
ADD package.json /tmp/package.json
RUN cd /tmp && npm install
RUN mkdir -p /opt/app && cp -a /tmp/node_modules /opt/app/
WORKDIR /opt/app
ADD . /opt/app
EXPOSE 7770
CMD ["npm", "start"]
My ngnix Dockerfile
FROM nginx:1.10
COPY default.conf /etc/nginx/conf.d/default.conf
On npm start this will run:
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(7770, function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:7770');
});
This is my first run at docker, so I may have muddled up a few things. Also I am pointing foo.com to 127.0.0.1 in /private/etc/hosts.
c-holmes,
First of all, you need to remember each container has its own network stack, so you cannot use localhost inside the container to reach a service running in the docker host.
For this specific project, you will need to point the proxy_pass directive in your Nginx server config to a value what reach the app container. Something like:
proxy_pass http://app:7770;
You will need to do right that because in docker-compose context your container name will be mapped to an internal DNS entry. With that, you will not need to publish 7770 of the app container to the outside world and if your MongoBD will be accessed just by your app container, you will not need to publish the 27017 port either.
If you want to route traffic from nginx to app you have to use ip address or dns of the app container on proxy_pass. With Docker Compose services can discover each other with service names, so change in nginx conf
proxy_pass http://app:7770;
You don't need to publish port 7770 to outside world. Also for mongo you don't need to publish 27017 port.

Resources