docker-compose up stuck on attaching to - reactjs

Im trying to dockerize my react app.
Whenever i run docker-compose up it gets stuck on "Attaching to"
Dockerfile
# Stage 0 - Pre-requisite: Based On Node.js to BUILD and compile App.
FROM node:10.15.0-alpine as node
WORKDIR /app
COPY package.json /app/
RUN npm install
COPY ./ /app/
RUN npm run build
# Stage 1 - Based On Nginx to have ONLY a compiled and PRODUCTION ready build.
FROM nginx:1.15.8-alpine
COPY --from=node /app/build/ /usr/share/nginx/html
COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf
docker-compose.yml
version: '3'
services:
idcheck-demo:
image: idcheck-demo
build:
context: .
dockerfile: Dockerfile
ports:
- 8080:8080
nginx-custom.conf
server {
listen 8080;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
Ive tried attempting to access it by going to 0.0.0.0:8080 but it just returns me with the following error in the browser
This page isn’t working 0.0.0.0 didn’t send any data.
ERR_EMPTY_RESPONSE

In my case was a port forwarding at the docker-compose.yml. I was doing the forward to 8080 when the exposed port was the 80 so when I've changed the port forwarding to 80 at the docker-compose.yml the service have done as should be.

First check if the container is up. You can do this by running:
docker-compose ps
In case of your configuration I got:
Name Command State Ports
---------------------------------------------------------------------------------------
54368216_idcheck-demo_1 nginx -g daemon off; Up 80/tcp, 0.0.0.0:8080->8080/tcp
as you can see container is running with nginx not being daemonized which explains why the console is hanging after you run docker-compose up.
You can also run a quick telnet to see if the HTTP service is responding correctly:
telnet localhost 8080
Trying ::1...
Connected to localhost.
Escape character is '^]'.
Bottom line is that console stuck on "Attaching to..." is caused by the nginx process not running as a daemon.
You can put the container into background running:
docker-compose up -d

I got this problem when I start nginx using "docker-compose up". And the reason is Port Conflict, so I fix it by changing Ports Configuration.

Related

Nginx docker react ec2 https connection refused

Tried a number of different versions of nginx.conf, but nothing appears to be mitigate the classic connection refused page when I enter my https://domain.
It should be noted that the domain ends with .dev, wondering if this matters.
The domain was purchased on google domains, and there are A record mappings to a public EC2 instance that has the running nginx server (inside the docker container).
nginx.conf:
server {
listen 80;
server_name random.dev www.random.dev;
return 301 https://random.dev$request_uri;
}
server {
listen 443 default_server ssl;
server_name random.dev www.random.dev;
ssl on;
ssl_certificate /etc/ssl/certs/ssl-bundle.crt;
ssl_certificate_key /etc/ssl/private/private.key;
index index.html index.htm;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html;
}
}
Dockerfile:
FROM node:17.7.1 as builder
WORKDIR /usr/src/app
COPY package*.json /usr/src/app/
RUN npm install
COPY . /usr/src/app/
RUN npm run build
FROM nginx:latest
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d
COPY ./ssl /etc/ssl
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
docker-compose:
version: "3"
services:
ui:
image: <image>
ports:
- 80:80
- 443:443
EC2 instance has an Amazon Linux 2 flavor.
Security group mapping appears to be correct, with ssh (22), http (80), and https (443) accepting inbound from everywhere.
Network ACL is default (open to all, inbound and outbound).
After running docker-compose, I've also tried checking using netstat (inside ec2 outside docker) whether 80 and 443 were listening, and they were.
http on the raw IP (not domain) has worked when I commented out the 443 nginx conf code, but the domain does not work because .dev and .app automatically redirects to https on chrome (and firefox I believe).
Given this, wondering if anyone else faced any problems similar to mine. Is this an Amazon Linux 2 problem, or is it a .dev problem, or could it possibly be an ssl problem?
A series of changes were made, but the fix appears to have something to do with assigning an elastic IP address to the ec2 instance.
For some reason the local wifi I was using (Verizon) always led to a timeout request to the IP address on ping <ip-address>. However, on the other networks we tested (comcast as well as ATT mobile data), the IP address was not refused. This is likely to have something to do with the IP address being blacklisted by Verizon. I am not sure if all static IPs are blacklisted or we just got unlucky. The elastic IP that was assigned seemed to fix the issue.

Unexpected Token Error in React When Hosting on a Subpath Using Nginx + Traefik

I have a Docker container running a production React app alongside Nginx for hosting its static files.
Dockerfile
FROM node:16.5.0-alpine AS builder
WORKDIR /app
COPY . .
ENV PUBLIC_URL /trade-journal
RUN npm ci --production
RUN npm run build
FROM nginx:1.23.1-alpine AS production
ENV NODE_ENV production
COPY --from=builder /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
nginx.conf
server {
listen 80;
location / {
# static file hosting location
root /usr/share/nginx/html/;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html;
}
}
Above, you can see that I'm setting a PUBLIC_URL environment variable. This is because I'd like the app to be hosted on a subpath, like this: domain.com/trade-journal. I'm using Traefik to route to this subpath because in the future, I'd like to add more subpaths for other apps.
docker-compose.yml
reverse-proxy:
image: traefik:v2.8
command: --api.insecure=true --providers.docker
ports:
- "80:80"
- "8080:8080"
volumes:
- /var/run/docker.sock:/var/run/docker.sock
labels:
- traefik.enable=false
frontend:
build:
context: ./trade-journal/client
dockerfile: ./Dockerfile
image: "trade-journal-client"
labels:
- traefik.http.routers.frontend.rule=Host(`[MY-PUBLIC-IP-HERE]`) && PathPrefix(`/trade-journal`)
- traefik.http.services.frontend.loadbalancer.server.port=80
links:
- "backend:be"
I understand that React is designed to run on root by default, so I added:
<base href="%PUBLIC_URL%/"> in public/index.html, and
basename={process.env.PUBLIC_URL} to BrowserRouter
I've also alternatively tried setting the subpath with homepage in package.json, and writing the basename as just /trade-journal.
Either way, I get the same error in my browser on a blank page:
For whatever reason, it can't load http://domain/trade-journal/static/js/main.93967f03.js. Actually, I can't even view the code in that file, or any other JS or CSS files in that directory through the browser (even though I can when I bin/sh into the running container); I only ever get a blank index file.
I assume that the problem has to do with routing because when I remove any having to do with the subpath and host on /, the React app loads correctly.
I'm very new to hosting and deploying. How can I solve this problem?
It seems that I fixed it. I needed to use alias, and include the subpath in nginx as well. Now, I'm going to see if I can make this solution any more DRY (so I don't have to repeat the subpath so many times). If anyone has any suggestions, let me know.
location /trade-journal {
# static file hosting location
alias /usr/share/nginx/html/;
include /etc/nginx/mime.types;
try_files $uri $uri/ /trade-journal/index.html;
}

docker-compose - CORS policy error when connecting to back-end from browser

I'm trying to set up a few Docker containers to deploy a web application. I have a PostgreSQL container, a Spring back-end container and a React front-end container. The interaction between the back-end and database works fine, but I'm struggling to set up the interaction between the front-end and back-end. I want to use docker-compose and after setting it up, I want to test this set-up using the browser on my computer (the host).
I followed some tutorials and looked online, but after all changes I made, I still get this error when using my browser on localhost:80.
My docker-compose.yml looks like this
version: '3'
services:
backend:
container_name: backend
image: "backend:latest"
build:
context: ./backend
ports:
- 5002:8080
frontend:
container_name: frontend
image: "frontend:latest"
build:
context: ./frontend
ports:
- 80:80
networks:
default:
external:
name: my-network
The Dockerfile in the front-end directory looks like this.
# build environment
FROM node:13.12.0-alpine as build
WORKDIR .
ENV PATH node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts#3.4.1 -g --silent
COPY . .
RUN npm run build
# production environment
FROM nginx:stable-alpine
COPY --from=build ./build /usr/share/nginx/html
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
After some research, I added a CORS configuration to the nginx.conf, but this doesn't seems to solve the problem.
server {
listen 80;
server_name frontend;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
#
# CORS config for nginx
#
location /api {
#
# the request made to localhost/api are enabled to CORS
#
add_header 'Access-Control-Allow-Origin' '*';
#
# the request made to localhost/api forwards to backend:8080 service
#
proxy_pass http://backend:8080;
}
}
I don't really know where to look for the problem. To make API calls, I use axios and it is set up like this.
const instance = axios.create({
baseURL: "http://localhost:5002/api"
});
Any pointers would be greatly appreciated!

React + Flask Docker-Compose Containers Unable To Communicate Locally, API Calls Returning net::ERR_EMPTY_RESPONSE In Browser

I have 2 docker containers, the front being a React.js app running on ports 3000:3000 and the back being a Flask API running on 5000:5000.
ISSUE:
I am having an issue with these containers wrapped together in docker-compose where the front will be accessible via localhost:3000 as it would normally run outside a container, however it is unable to communicate with the back container. I receive a net::ERR_EMPTY_RESPONSE in browser when attempting to use any API component. How might I be able to resolve this?
SETUP:
My directory for this docker-compose setup is as follows:
/project root
- docker-compose.yml
/react front
- Dockerfile
/app
/flask back
- Dockerfile
/api
My docker-compose.yml is as follows:
version: "3.8"
services:
flask back:
build: ./flask back
command: python main.py run -h 0.0.0.0
volumes:
- ./flask back/:/usr/src/app/
ports:
- 5000:5000
env_file:
- ./flask back/.env
react front:
build: ./react front
volumes:
- ./react front/app:/usr/src/app
- usr/src/app/node_modules
ports:
- 3000:3000
links:
- flask back
The front Dockerfile:
# pull official base image
FROM node:13.12.0-alpine
# set working directory
WORKDIR /usr/src/app
# add `/react front/node_modules/.bin` to $PATH
ENV PATH /react front/node_modules/.bin:$PATH
# install app dependencies
ADD package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts#3.4.1 -g --silent
# start app
CMD ["npm", "start"]
The back Dockerfile:
FROM python:alpine3.7
WORKDIR /usr/src/app
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
RUN pip install --upgrade pip
COPY ./requirements.txt /usr/src/app/requirements.txt
RUN pip install -r requirements.txt
COPY . /usr/src/app/
TROUBLESHOOTING SO FAR:
So far I have consulted the following threads on SO:
Flask and React Docker containers not communicating via Docker-Compose - where the package.json needed a proxy addition.
ERR_EMPTY_RESPONSE from docker container - where IP addresses needed rewritten to 0.0.0.0 (this appears to be a unique issue to GO as I never used this form of port and IP configuration in my project)
Neither of these very similar issues have resolved my issue. I am also able to ping the back-end container with the front-end and vice versa. Running the React container while running the Flask API outside of its container also works as expected/intended. If there is any other information anyone would like, I would be happy to provide.
Thank you for the time and patience.

Container internal communication [duplicate]

I have the following docker-compose file:
version: "3"
services:
scraper-api:
build: ./ATPScraper
volumes:
- ./ATPScraper:/usr/src/app
ports:
- "5000:80"
test-app:
build: ./test-app
volumes:
- "./test-app:/app"
- "/app/node_modules"
ports:
- "3001:3000"
environment:
- NODE_ENV=development
depends_on:
- scraper-api
Which build the following Dockerfile's:
scraper-api (a python flask application):
FROM python:3.7.3-alpine
WORKDIR /usr/src/app
COPY requirements.txt ./
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
CMD ["python", "./app.py"]
test-app (a test react application for the api):
# base image
FROM node:12.2.0-alpine
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:/app/src/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install --silent
RUN npm install react-scripts#3.0.1 -g --silent
RUN npm install axios -g
# start app
CMD ["npm", "start"]
Admittedly, I'm a newbie when it comes to Docker networking, but I am trying to get the react app to communicate with the scraper-api. For example, the scraper-api has the following endpoint: /api/top_10. I have tried various permutations of the following url:
http://scraper-api:80/api/test_api. None of them have been working for me.
I've been scavenging the internet and I can't really find a solution.
The React application runs in the end user's browser, which has no idea this "Docker" thing exists at all and doesn't know about any of the Docker Compose networking setup. For browser apps that happen to be hosted out of Docker, they need to be configured to use the host's DNS name or IP address, and the published port of the back-end service.
A common setup (Docker or otherwise) is to put both the browser apps and the back-end application behind a reverse proxy. In that case you can use relative URLs without host names like /api/..., and they will be interpreted as "the same host and port", which bypasses this problem entirely.
As a side note: when no network is specified inside docker-compose.yml, default network will be created for you with the following name [dir location of docker_compose.yml]_default. For example, if docker_compose.yml is in app folder. the network will be named app_default.
Now, inside this network, containers are reachable by their service names. So scraper-api host should resolve to the right container.
It could be that you are using wrong endpoint URL. In the question, you mentioned /api/top_10 as an endpoint, but URL to test was http://scraper-api:80/api/test_api which is inconsistent.
Also, it could be that you confused the order of the ports in docker-compose.yml for scraper-api service:
ports:
- "5000:80"
5000 is being exposed to host where docker is running. 80 is internal app port. Normally, flask apps are listening on 5000, so I thought you might have meant to say:
ports:
- "80:5000"
In which case, between containers you have to use :5000 as destination port in URLs: http://scraper-api:5000 as an example (+ endpoint suffix, of course).
To check connectivity, you might want to bash into client container, and see if things are connecting:
docker-compose exec test-app bash
wget http://scraper-api
wget http://scraper-api:5000
etc.
If you get a response, then you have connectivity, just need to figure out correct endpoint URL.

Resources