Nginx docker react ec2 https connection refused - reactjs

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.

Related

ERR_CONNECTION_REFUSED AWS EC2 when performing GET to backend server

This is my first AWS deployment and I have what is going to be a simple question (but not for me). I would appreciate any help I can get.
I have a React frontend and a backend node server running on an AWS EC2 instance. I have no problem serving the front end to my browser from port 80 (NGINX server) on the public IP address for the EC2 instance but the GET request to the node server on port 3001 returns an error to the console "net::ERR_CONNECTION_REFUSED".
Troubleshooting so far;
confirmed NGINX and Node servers are running on their proper ports
I performed a curl request from the EC2 terminal (curl -X GET http://127.0.0.1:3001/api/users) to the backend server and the information is served successfully from the server/DB but when the request comes from running the app in the client, the connection is refused.
I made many changes to the NGINX .conf file (one at a time) including using the public IP vs using localhost (or even 127.0.0.1:3001) for the backend express server but with no success.
Made sure to restart the NGINX server to pick up .conf changes.
Since I am able to get a response when I use a "curl" request from the VM terminal but not when I request from the client, I wonder if it has something to do with my security group rules. I have Type "HTTPS" on port 443 and "HTTP" on port 80 with "0.0.0.0/0" and "::/0" on both and SSH on port 22 with "0.0.0.0/0". Is there anything that I am missing?
Here is the NGINX .conf info for the servers
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
#charset koi8-r;
#access_log logs/host.access.log main;
location /{
root /usr/share/nginx/html/aws-thought/client/build;
index index.html;
try_files $uri /index.html;
}
location /api/ {
proxy_pass http://127.0.0.1:3001;
}
}

Use nginx to serve static react files a remote server localhost

all! I am trying to follow this tutorial: https://www.youtube.com/watch?v=tGYNYPKTyno in order to use Nginx to serve my static react files.
In the video, the dev navigates to the IP address of the EC2 instance and the react application is served. I attempted to navigate to the IP address I believe to be for this particular server (ie the name of the server on the bash is like user#123-45-6-789) but I am met with a connection timeout error.
I then attempted to tunnel using putty to the server's port 80 and forwarding to my specific port (ie localhost:6000) but I similarly got a connection timeout error. I know my tunnels work (I can run my api and my react application using yarn build), so the tunnels are not at fault. Also, when I run netstat, I get that the local address 0.0.0.0:80 is currently in use by nginx.
My config file is as follows:
server {
listen 80;
listen [::]:80;
root /home/user/application/deployment/build;
location / {
try_files $uri /index.html;
}
}
Any and all advice would be appreciated!
-- Edit --
My nginx.conf file includes the
include /etc/nginx/conf.d/*.conf
as indicated in the video.
Friends, my current changes are I moved my files to a www folder in the var folder of the root and directed that to be the root folder. See config file below
server {
listen 3500;
server_name localhost;
location / {
root /var/www/appication/deployment/build;
index index.html;
}
}
I then used an ssh tunnel to connect to my localhost port 3500 and can now access it on my local computer. The reason I was not able to access the server by the IP address since it exists only in the private cloude. I am now moving on to the reverse proxying and will later connect this to a domain. Cheers!

React - bundle.js not found (using Nginx setup)

I have a React app set up to run on port 8080. When I run the deployed project using http://example.com:8080, it runs well.
However, I'm using nginx to proxy this url, adding the "location /admins" to etc/nginx/nginx.conf:
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
location /admins {
proxy_pass "http://hadas-ex.co.il:8080";
}
Then, when browsing to hadas.ex.co.il/admins, it serves the app, but I get the following error in my console:
GET http://hadas-ex.co.il/static/js/bundle.js net::ERR_ABORTED 404 (Not Found)
I'm just confused as to why I'm getting this error, as it's working fine when accessing the hadas-ex.co.il:8080 directly.
Port 80 and Port 8080 are not the same. Ports are used to make connections unique and range from 0 to 65535 out of which upto 1024 are called well known ports which are reserved by convention to identify specific service types on a host. 80 is reserved for HTTP. Port 8080 is typically used for a personally hosted web server, when the ISP restricts this type of usage for non-commercial customers. Port 8080 is the just the default second choice for a webserver.
Resources:
Are-port-80-and-8080-the-same
Apache-httpd-vs-tomcat-7-port-80-vs-port-8080

docker-compose up stuck on attaching to

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.

Config problem - Serve react app and spring boot backend with http basic-authentication behind nginx https reverse proxy orchested by docker

Him
I’ve got a problem that I can’t solve.
When I query my springboot backend it works fine. The password is asked then when I’m authenticated, I receive the answer.
But, if I first call the front-end, (the basic authentication also works) but the nginx proxy doesn’t forward queries to the spring-boot backend anymore.
Could you please help me to figure out what’s wrong with my config. Do I have forgotten a https setting?
In fact, if I turn ssl off, then it’s working perfectly. And disabling basic authentication with ssl doens't solve the problem.
Thanks for help
Here are some more details:
I have a react app created with create-react-app tool.
The app call a spring-boot backend.
I use docker to run all that stuff.
I use https to prevent clear-text password of basic authentication.
I serve my app at this example name: https://myPublicHostname (on port 443)
The backend must be reachable with this name: https://myPublicHostname/rest/myapi/
Here is my deploying files structure:
WebDockerService
\-- my-react-app
\-- public
\-- src
\-- package.json
\-- default.conf
\-- Dockerfile
\-- fullchain.pem
\-- htpasswd
\-- privkey.pem
\-- my-api
\-- my-api-0.0.1-SNAPSHOT.jar
\-- Dockerfile
\-- docker-compose.yml
Here is my Docker-compose file
version: '3.1'
services:
frontendwithproxy:
build: ./my-react-app
ports:
- 80:80
- 443:443
springbootbackend:
build: ./my-api
ports:
- 8080:8080
networks:
default:
external:
name: netDev
Here is “my-react-app” Dockerfile to build nginx server
### STAGE 1: Build ###
FROM node:9.11.1 as build
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts -g --silent
COPY . /usr/src/app
RUN npm run build
### STAGE 2: Production Environment ###
FROM nginx:1.13.12-alpine
COPY fullchain.pem /etc/nginx/fullchain.pem
COPY privkey.pem /etc/nginx/privkey.pem
COPY default.conf /etc/nginx/conf.d/default.conf
COPY htpasswd /etc/nginx/conf.d/htpasswd
COPY --from=build /usr/src/app/build /usr/share/nginx/html
EXPOSE 80 443
CMD ["nginx", "-g", "daemon off;"]
Here is the default.conf file for nginx
server {
#To redirect http traffic to ssl
listen 80;
return 301 https://myPublicHostname$request_uri;
}
server{
listen 443 ssl;
server_name myPublicHostname;
#root containing react app files
root /usr/share/nginx/html;
#Basic authentication enabling
auth_basic "Restricted Access!";
auth_basic_user_file /etc/nginx/conf.d/htpasswd;
#SSL Settings
ssl_certificate /etc/nginx/fullchain.pem;
ssl_certificate_key /etc/nginx/privkey.pem;
ssl_session_timeout 1d;
ssl_session_cache shared:SSL:50m;
ssl_session_tickets off;
ssl_ecdh_curve secp384r1;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers "ECDHE-RSA-CHACHA20-POLY1305:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-RSA-AES256-SHA";
ssl_prefer_server_ciphers on;
add_header Strict-Transport-Security "max-age=15768000; includeSubDomains; preload;";
add_header X-Content-Type-Options nosniff;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Robots-Tag none;
ssl_stapling on;
ssl_stapling_verify on;
#Location for springboot api
location /rest {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-Forward-Proto http;
proxy_set_header X-Nginx-Proxy true;
proxy_redirect off;
proxy_pass http://192.168.1.125:8080;
}
}
Here is the Dockerfile for the springboot backend
FROM openjdk:8-jdk-alpine
COPY my-api-0.0.1-SNAPSHOT.jar /opt/my-api/my-api.jar
ENTRYPOINT ["/usr/bin/java"]
CMD ["-jar", "/opt/my-api/my-api.jar", "/opt/my-api/public","/opt/my-api/temp", "/opt/my-api/uploads"]
VOLUME ["/opt/my-api/public","/opt/my-api/temp","/opt/my-api/uploads"]
EXPOSE 8080
edit :
nginx is the only entry point. everything that enter has to achieve the basic authentication. I don't activate it on http, because I don't want to allow this potential leak. But basic authentication is not the problem, because when I deactivate it, the problem alway occures.
More surprising, backend "GET" queries that get pictures work fine. The pictures are well displayed. They work into markup and into browser url field.
But the other GET queries that return zip or other content-type doesn't work. (doesn't work as well in markup as when typed into the browser).
edit 2 :
In fact, it seems to work. Because when I use a rest client and query my resource on backend, the result is well arriving. Also if I call the backend in code winthin react app, the result arrives.
But when I call the backend with a href on a like this :
<a
href={"https://myPublicHostname/rest/my-api/getZipFile?value=1,2,3,4,5"}
target="_blank"
>
then the backend doesn't receive the get query.
So myabe some header are missing!?
When I query my springboot backend it works fine. The password is asked then when I’m authenticated, I receive the answer.
If the authentication is enabled on both nginx and backend , then you will need some way so that nginx can authenticate to backend.
When the nginx tries to access the backend , the backend will timeout for authentication. Maybe the auth info is encrypted and cant be taken out.
First test it with authentication on nginx only ( with SSL ) and turn of the auth on backend.
You can also try to turn off the SSL from nginx to backend.
If the above scenario is not the case , and backend has no auth and SSL then here is one answer with nginx SSL basic auth issue:
Nginx basic auth working on http but not on https
so you first need to make sure nginx is configured to ask for password on both http and https , then do the rest of work. You can just test it first on some simple page.
Problem solved like this:
<a
href="/rest/photo/getZipFile?value=1,2,3"
target="_blank"
rel="noopener noreferrer"
download="AnyCustomFileName.zip"
>
...button
</a>
This simple attribute that changes everything :
download="AnyCustomFileName.zip"
With it, the browser add different headers, then Nginx achieve to rout it at the right destination.
Works for Edge, Chrome, Samsung internet and Firefox... but Fireforx only works in private sessions.

Resources