"This page can't be reached" on Nuxt deployment - nginx

I'm trying to deploy a Nuxt App on Digital Ocean over Nginx with pm2.
When I go to the droplet IP I can see the Nginx welcome page but when I try to go to the IP:PORT of the Nuxt App it says:
This site can’t be reached
167.xx.xxx.xxx refused to connect.
Try:
Checking the connection
Checking the proxy and the firewall
ERR_CONNECTION_REFUSED
I have added this on sites-available/default file:
server {
server_name domain.com;
location / {
proxy_pass http://localhost:7200;
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;
}
}
After this I checked for nginx status and restarted it.
Also, I added the service on pm2 with pm2 start --name="webapp" npm -- start and I can see it running correctly.
Even I have tried running directly npm run start command but I get the same result.
Hope you can help me.

server {
listen 80;
server_name localhost;
location / {
root /app;
index index.html;
try_files $uri $uri/ /index.html;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}

Related

how to proxy_pass api path to port with nginx

I want to proxy_pass the root location (/) to the port 3000 and the /api location to the port 5000, is completely possible, right?
my nginx config file:
server {
listen 80;
server_name mywebsite.com;
location /api {
proxy_pass http://localhost:5000;
}
location / {
proxy_pass http://localhost:3000;
}
}
if I do the api request locally i can get the expected output:
myuser#myserver [conf.d]# curl localhost:5000
Hello, World!myuser#myserver [conf.d]#
but with an api client don't, and proxy_pass from the root path to the port 3000 works fine in the browser and the api client
Notes:
im not forgetting reload nginx with sudo systemctl reload nginx
the firewall is allowing traffic in both ports, im using ufw
the server OS is centos 7
I think you are using React and nodejs. I use below config.
server {
listen 80;
server_name mywebsite.com;
location / {
# My react
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;
}
location /api{
# This is my nodejs API
proxy_pass http://localhost:5000;
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;
}
}

Two locations not working in nginx for MERN application

I have nginx configuration like this:
server {
listen 80 default_server;
listen[::]:80 default_server;
server_name _;
root /var/www/html/ericwu-trademarket/frontend/build;
location /backend/ {
proxy_pass http://localhost:8000; #backend in node js
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;
}
location / {
try_files $uri /index.html; #front end in react js
}
}
the front end is running properly. But by running backend like this http://server-ip-address/backend it is showing cannot get /backend/.
Where might I be mistaken?
Check UFW port Allow in server
Check status of UFW:
sudo ufw status verbose
If not show 8000/tcp as a Allow then allow it:
sudo ufw allow 8000
Obviously you are trying to use Websokets.
When it comes to best practices, is better to have the backend services defined inside an upstream definition. You are trying to proxy requests to "localhost:8000" but localhost translates to ip 127.0.0.1. If that is not the ip address of the nodejs app, then is pretty normal that your config won't work.
Nginx expects a fully qualified domain name (FQDN), or ip addresses list of backend servers to work properly.
That being said, your config should be:
http {
upstream backend_server {
#least_conn; #Loadbalancing method in case you want to use multiple backends
#ip_hash;
server backend1.example.com:8000; #or IP address
}
server {
server_name _;
listen 80 default_server;
listen[::]:80 default_server;
root /var/www/html/ericwu-trademarket/frontend/build;
location / {
try_files $uri /index.html;
}
location /backend {
proxy_pass http://backend_server;
proxy_redirect off;
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_set_header X-Forwarded-Proto $scheme;
# WebSocket specific
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# For long running HTTP requests, don't buffer up the
# response from origin servers but send them directly to the client.
proxy_buffering off;
}
}
}

EC2 Node backend app [504 gateway timeout]

Works for a couple of hours and then I receive a 504 gateway timeout error on the backend of the application.
EC2 instance is running ubuntu with nginx and PM2.
/etc/nginx/sites-available .conf file:
server {
listen 80;
server_name mydomain.com;
root /home/ubuntu/app;
index index.html;
access_log /var/log/nginx/app.access.log;
error_log /var/log/nginx/app.error.log;
location / {
try_files $uri /index.html =404;
}
}
server {
listen 8080;
server_name mydomain.com;
location / {
proxy_pass http://127.0.0.1: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;
proxy_redirect off;
}
}
I believe my configuration is correct as it works correctly, but only for a few hours. Then I get the error. PM2 instance is still online and running. I think it's probably the node app crashing for some reason, but how can I troubleshoot this on ubuntu EC2? It works perfectly on my local machine.
Any suggestions would be appreciated.
Spent hours on this. Turns out PM2 and Nginx don't always work well together, changing the Nginx config and restarting Nginx and pm2 eventually fixed the problem for me.
Specifically, adding these two lines:
proxy_set_header Connection '';
keepalive_timeout 10;

Nginx giving 403 forbidden on static

I have been hitting my head for two days trying to get Nginx to work using a reverse proxy. I am using a Bokeh server that listens for connections on 192.168.X.X from www.somesite.com:443.
Issue 1:
My Nginx conf file is below and I get a 403 Forbidden when accessing /static/ files. Here is how I call the Bokeh server: http://www.somesite.ai:443/5007/user_5007
Issue 2:
TBD after I can solve issue 1.
server {
listen 443;
server_name www.somesite.ai;
#The internal IP of the VM that hosts your Apache config
location /{
if ($request_uri ~ ^/(\d+)/([^/]+)) {
proxy_pass http://192.168.X.XXX:$1/$2/;
}
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host:$server_port;
proxy_buffering off;
}
location ~ ^/(\d+)/static/ {
try_files $uri /bokehstatic/static/;
}
}

meteor loginButtons not working behind nginx

I'm running a meteor app on port 3000, not as root, and want nginx to redirect port 80 to port 3000.
I've followed the advice here.
This partly works, the front page comes up ok, but {{loginButtons}} does not render. I am using accounts-password with accounts-ui-bootstrap-dropdown.
The only changes that I've made to the default nginx config are these lines in the server section.
location ~* "^/[a-z0-9]{40}\.(css|js)$" {
root /home/ubuntu/bundle/programs/client;
access_log off;
expires max;
}
location ~ "^/packages" {
root /home/ubuntu/bundle/programs/client;
access_log off;
}
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;
}
The console reports an uncaught SyntaxError. Any suggestions?

Resources