502 Gateway NGINX on Static Site - google-app-engine

I am trying to host my site on google app engine. I have created an app.yaml file but when I deploy, I am getting the 502 bad Gateway.
Below is my nginx.conf file.
events {}
http {
server {
server_name ishmaelsu.com;
access_log /error.log;
listen 8082;
return 301 https://$host$request_uri;
location / {
root IshmaelSunday;
index index.html;
}
}
}
This is my log file after running gcloud app logs read
After running netstat -tulp | grep 8082, this is what I get.

do you have other site or service using port 8082? have you opened the port in Firewall?
You do a redirection to SSL but you don't have configuration about that.
netstat -tulp | grep 8082

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;
}
}

How to deploy a Django and React project on the same Ubuntu 18.04 server using gunicorn and nginx?

I have a Django project that I have already successfully deployed on my Ubuntu 18.04 server via gunicorn and nginx using this tutorial.
https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-18-04
The project uses Django Rest Framework and I'm able to access it's endpoints via a web browser. However, I would also like to deploy a separate react project on the same server, so that it can send http requests to the Django app and display data received from the REST API. How can I go about doing this?
Here is my current gunicorn.service
[Unit]
Description=gunicorn daemon
Requires=gunicorn.socket
After=network.target
[Service]
User=ubuntu
Group=www-data
WorkingDirectory=/home/ubuntu/my_project/coffeebrewer
ExecStart=/home/ubuntu/my_project/venv/bin/gunicorn --access-logfile - --workers 3 --bind unix:/home/ubuntu/my_project/coffeebrewer/coffeebrewer.sock coffeebrewer.wsgi:application
[Install]
WantedBy=multi-user.target
And here are my current nginx configurations
server {
listen 80;
listen [::]:80;
server_name my_ipv6_address;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
root root /home/ubuntu/my_project/coffeebrewer;
}
location / {
include proxy_params;
proxy_pass http://unix:/run/gunicorn.sock;
}
}
I recommend that you try it locally first as a production mode by installing whitenoise django package and in your settings.py file add this line SECURE_CROSS_ORIGIN_OPENER_POLICY = None
From there, you can navigate forward

Hosting Docusaurus v2 using Nginx

I'm attempting to use nginx as the reverse proxy to host Docusaurus v2 on Google AppEngine.
GooglAppEngine has HTTPS turned on. And Nginx listens on port 8080. Hence by default all requests are over HTTPS and the connections managed by Google AppEngine.
However, I'm having an issue when users perform the following actions :
Reach the landing page
Go to documentations (any page).
Refresh the page.
The user is getting directed to port 8080 and not the https site of docusaurus.
Without refreshing the page, the user is able to successfully navigate the site. It's when the user hits a refresh button that they get the redirect. Looking at the header information, I see the response pointing them to port 8080 but I'm not sure why that is happening.
Wondering if anyone has successfully been able to set up Docusaurus v2 with nginx ?
My config for nginx is as follow :
events {
worker_connections 768;
}
http {
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Logs will appear on the Google Developer's Console when logged to this
# directory.
access_log /var/log/app_engine/app.log;
error_log /var/log/app_engine/app.log;
gzip on;
gzip_disable "msie6";
server {
# Google App Engine expects the runtime to serve HTTP traffic from
# port 8080.
listen 8080;
root /usr/share/nginx/www;
index index.html index.htm;
location / {
if ($http_x_forwarded_proto = "http") {
return 301 https://$server_name$request_uri;
}
}
}
This is probably due to the docusaurus website linking to directories without trailing slash /, causing a redirect which is setup to include the port by default.
Looking into the docusaurus build directory you will see that your pages are defined as folders containing index.html files. Without the / the server needs to redirect you to {page}/index.html.
Try to call the URL with / and no port, which should be successful:
https://{host}/docs/{page}/
Therefore fixing the problem, you could try to change the redirect rules to not include the port with the port_in_redirect parameter:
server {
listen 8080;
port_in_redirect off;
# More configuration
...
}
See the documentation for more details.

utilizing a reverse proxy in Nginx on a react app with express backend

So as the title says I am deploying a react app with the express backend on an ec2 instance.
What I am attempting to do to do:
(just listing this here to provide crucial context just in case I'm messing up elsewhere)
have my express production mode run on port 80 with the react build html as root.
run the build on an ec2 instance
use nginx to reverse proxy to my domain on https and port 443
run server.js on production mode via PM2
Things I am currently having trouble with:
My Nginx configuration was originally configured to try to proxy the react app running with the express app through a reverse proxy between the two. That's changed so I am trying to now have the server configured to reverse proxy everything into my app.
I was following this article as my reference but the major difference is they want me to use the nginx conf file and not the sites_enabled file which I had made my initial nginx setup. From what i can see in the article it looks like the configuration files changed layout as well so that may be outdated practice.
Here is what I currently have for Nginx sites_enabled:
listen 443 default_server;
listen [::]:443 default_server;
server_name example.com www.example.com;
root /home/ubuntu/client/build;
location / {
try_files $uri /index.html;
}
location /complete {
proxy_pass https://www.example.com;
}
# managed by Certbot
ssl on;
ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
# managed by Certbot
}
server {
if ($host = www.example.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = example.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 0.0.0.0:80;
server_name example.com www.example.com;
rewrite ^ https://$host$request_uri? permanent;
}
At the time of writing this I am not able to run things like this so I can only use express setting it to port 443 and placing the certification files there.

Can't open websocket from React app through NGINX

I have a dockerized React app frontend that is served through NGINX:
FROM nginx:alpine
COPY default.conf /etc/nginx/conf.d
COPY ./build /usr/share/nginx/html/
.build is my React web app. default.conf contains this:
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
location /api/ {
proxy_pass http://api:8080;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
My webapp makes requests against another linked container named api, so all /api calls are proxy passed to the api container.
So far, so good.
Problem comes when I try to open a websocket. Websocket server is listening also in api container, but in port 8081.
In my code, I have this:
const socket = openSocket('http://api:8081'); //openSocket is from socket.io library
But, in my Chrome console, I'm getting ERR_NAME_NOT_RESOVED.
How can I configure NGINX in order to proxy pass this request to api container?

Resources