i try to run a react application on amazon ec2 instance.when i listen on default port(port:3000) it's running perfectly, but when change the port number from 3000 to 4000 by, it shows 502 gate way error like below.
MY NGINX SETUP:
server {
listen 80 default_server;
server_name MY_DOMAIN;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl default_server;
server_name MY_DOMAIN;
ssl_certificate /etc/letsencrypt/live/MY_DOMAIN/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/MY_DOMAIN/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
location / {
proxy_pass
http://PRIVATE_IP:4000;
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 /server {
proxy_pass
http://PRIVATE_IP: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;
}
}
GET https://MY_DOMAIN_URL/static/js/6.chunk.js net::ERR_ABORTED 502 (Bad
Gateway)
favicon.ico:1 GET https://MY_DOMAIN_URL/favicon.ico 502 (Bad Gateway)
manifest.json:1 GET https://MY_DOMAIN_URL/manifest.json 502 (Bad
Gateway)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
Related
I am developing a website with React.js for the frontend and have 2 separate apps for the users and the admins. The users will be under example.com and the admins under example.com/admin.
I am developing both apps behind an nginx server as a reverse proxy. I have had no issue developing a single app behind nginx, but I cannot use hot reload for the 2nd app. The app is served properly, with the only exception that the hot reload does not work.
I have HTTPS=true on both my .env files of the React.js apps. The main app's hot reload works fine, but the /admin app's hot reload fails with the error Firefox can’t establish a connection to the server at wss://192.168.1.2/adminws (developing through local network, so I can test the apps on my phone as well, but the hot reload won't work on the localhost either).
The main app is hosted under port 3000, the admin app is hosted under port 4000.
This is what my main app's .env looks like:
HTTPS=true
WDS_SOCKET_PORT=443
FAST_REFRESH=true
This is what my admin app's .env looks like:
HTTPS=true
WDS_SOCKET_PORT=443
WDS_SOCKET_PATH=/adminws
FAST_REFRESH=true
This is what my nginx configuration file looks like:
server {
# listen 80 default_server;
# listen [::]:80 default_server;
# SSL configuration
#
listen 443 ssl http2 default_server;
listen [::]:443 ssl default_server;
ssl on;
ssl_certificate /etc/nginx/ssl/localhost.crt;
ssl_certificate_key /etc/nginx/ssl/localhost.key;
gzip on;
gzip_types text/plain application/xml application/json;
gzip_proxied any;
gzip_min_length 1000;
gunzip on;
gzip_static on;
root /var/www/html;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
server_name _;
location /ws {
proxy_pass https://127.0.0.1:3000;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
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 /adminws {
proxy_pass https://127.0.0.1:4000;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
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 {
proxy_pass http://127.0.0.1:3200;
}
location /admin {
proxy_pass https://127.0.0.1:4000;
}
location / {
proxy_pass https://127.0.0.1:3000;
}
}
I should note that the admin app's hot reload works properly when I remove both WDS_SOCKET_PORT and WDS_SOCKET_PATH from the .env file and run it on https://localhost:4000/admin, but this way I would not be able to test it behind nginx.
I removed both WDS_SOCKET_PORT and WDS_SOCKET_PATH from the admin app's .env file and it now seems to be working properly. Everything else seems to be ok.
I'm trying to host express API in the root route(/) and react app in the app route(/app). If I go to https://<domain> then I can access the express app but if I go to https://<domain>/app then I can't access the react app. It says:
403 Forbidden
nginx/1.14.0 (Ubuntu)
Here is the config file for Nginx:
server {
server_name <domain>;
location /app/ {
root /var/www/html;
index index.html index.htm;
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;
try_files $uri $uri/ /index.html;
}
location / {
proxy_pass https://<ip>:<port>;
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;
}
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/<domain>/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/<domain>/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
if ($host = <domain>) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
server_name <domain>;
return 404; # managed by Certbot
}
Here is my nginx server block where reverse proxy is configured:
server {
root /var/www/portfolio/build;
index index.html;
server_name somesite.com;
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/somesite.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/somesite.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
if ($host = www.somesite.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = somesite.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
#listen 80;
server_name somesite.com www.somesite.com;
return 404; # managed by Certbot
location / {
try_files $uri $uri/ /index.html?q=$uri&$args;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $host;
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
proxy_pass "https://localhost:3000";
this only happens when i go to page, click on the subpage then refresh it --
nginx error log:
2020/11/12 20:32:09 [error] 595#595: *8 open() "/var/www/portfolio/build/portfolios" failed (2: No such file or directory), client: 192.168.1.1, server: somesite.com, request: "GET /portfolios HTTP/1.1", host: "somesite.com"
2020/11/12 20:36:28 [error] 595#595: *15 open() "/var/www/portfolio/build/portfolios" failed (2: No such file or directory), client: 192.168.1.1, server: somesite.com, request: "GET /portfolios HTTP/1.1", host: "somesite.com"
2020/11/12 20:36:30 [error] 595#595: *15 open() "/var/www/portfolio/build/portfolios" failed (2: No such file or directory), client: 192.168.1.1, server: somesite.com, request: "GET /portfolios HTTP/1.1", host: "somesite.com"
I have 2 apps running on ASW Symfony on port 8000 (local) and react 3000(local) but accessible through TCP on port 80 redirections was achieved by listening of port 80 within nginx server.
server {
listen 80;
server_name example.info www.example.info;
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;
}
}
server {
listen 8000;
server_name example.info www.example.info;
location / {
proxy_pass http://127.0.0.1:8000;
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 have tried to listen and redirect of two ports but without success.
Within the server, Symfony application is accessible with curl http://127.0.0.1:8000
From outside in my react app I am sending api requests to asw.external.ip (123.123.123.123:800) but I get timeout. How could I access my back-end from outside?
AWS ElasticBeanstalk - Configuring the Proxy Server to your back-end
You can use this config file to your Aws Ec2 as well.
/etc/nginx/conf.d/proxy.conf
upstream nodejs {
server 127.0.0.1:5000;
keepalive 256;
}
server {
listen 8080;
access_log /var/log/nginx/access.log main;
location / {
proxy_pass http://nodejs;
proxy_set_header Connection "";
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
gzip on;
gzip_comp_level 4;
gzip_types text/html text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
## Optional configuration if you want to allow AWS
## to cache your static files
location /static {
alias /var/app/current/static;
}
}
Edit - Configuring Nginx for Symfony
server {
listen 8080;
server_name sf2testproject.dev;
root /home/maurits/public_html/web;
location / {
# try to serve file directly, fallback to rewrite
try_files $uri #rewriteapp;
}
location #rewriteapp {
# rewrite all to app.php
rewrite ^(.*)$ /app.php/$1 last;
}
location ~ ^/(app|app_dev|config)\.php(/|$) {
fastcgi_pass 127.0.0.1:9000;
fastcgi_split_path_info ^(.+\.php)(/.*)$;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param HTTPS off;
}
}
Where:
listen is the port that your application communicate with the world.
fastcgi_pass is a binary protocol for interfacing interactive programs with a web server
References:
Aws ElasticBeanstalk - Nodejs platform proxy
Symfony Hhvm 3 nginx 1.4 vs PHP 5.5 apache 2.4
FastCGI Oficial Example
I want to run my application under myurl.com/app1/ using reserve proxy(nginx) with angularjs. But when I call myurl.com/app1/ I only get index.html, static files still point to myurl.com/assets/ rather than myurl.com/app1/assets/
upstream smileyface {
server localhost:8081;
}
server {
access_log /var/log/nginx/myurl_access.log;
error_log /var/log/nginx/myurl_error.log warn;
# SSL configuration
listen 443 ssl;
listen [::]:443 ssl;
include snippets/ssl-myurl.com.conf;
include snippets/ssl-params.conf;
index index.html index.htm index.nginx-debian.html;
server_name myurl.com www.myurl.com;
location /app1/ {
index index.html;
alias /angular-app-folder/;
proxy_pass http://smileyface/;
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_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
location ~ /.well-known {
allow all;
}
}