I currently have a nginx server running with a react app as frontend and a express server as backend.
The express server is running at localhost:5000/
server {
listen 80 ;
server_name siteurl;
server_name siteip;
# SSL configuration
#
# listen 443 ssl default_server;
# listen [::]:443 ssl default_server;
#
# Note: You should disable gzip for SSL traffic.
# See: https://bugs.debian.org/773332
#
# Read up on ssl_ciphers to ensure a secure configuration.
# See: https://bugs.debian.org/765782
#
# Self signed certs generated by the ssl-cert package
# Don't use them in a production server!
#
# include snippets/snakeoil.conf; # Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
location ^~ /api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://localhost:5000/;
proxy_ssl_session_reuse off;
proxy_set_header Host $http_host;
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
}
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
root /usr/share/nginx/site/front;
try_files $uri /index.html =404;
}
I want all /api/* requests to redirect to my express server, currently when I do site/api/ it goes to my express server, however when doing /api/users it won't go to my express server and will go to my react server.
How would I be able to make this work
thx
When you use the ^~ modifier within the location directive, you actually tell nginx that the path following is a regular expression. If so, you have to format it as a regular expression:
location ^~ /api/.* {
Related
Hive -
I have a Flask + React app running on Debian using Nginx and Gunicorn (which is maintained via supervisor). When I set up my Nginx CONF file to just serve up the site over port 80, everything seemed to work fine except for a CORS error. This only happened in Chrome, but the entire site worked fine in Safari (a known Chrome issue). After tracking down the issue and determining that the cause was the lack of an SSL certificate, I set up my Nginx CONF file to support SSL. Now two things happen that frustrate me to no end:
When I go to the site, the Developer Console shows that the site is getting a Connection Refused on https://localhost:5000/.
When I use CURL to test the API, it works.
Both the React and Flask applications are hosted on the same server, and I even have port 5000 open to be safe (as well as SSL and standard 80).
My conf file is below, but some info that might be useful:
All URLs are served up at the root "domain.com/" of the website.
The Flask app has the API in a nested folder and the exposed API is of the format "domain.com/api/v1/{calls}".
I have UI Swagger installed, but can not access it from the browser.
The development environment works fine, but that is because I'm using the built-in Python/Flask server and running the frontend React app with NPM Start.
My code is below and I've left in place, as commented lines, other things I have tried to make this work to show the various efforts I've exerted. In the location /api section, I previously just had the include proxy_params and the proxy_pass...all other lines were added after they didn't work in the location/section. server_name has _ as the server_name. I also had this as the subdomain of my site and mixed & matched, but no dice.
server {
root /var/www/project-app/frontend/build;
index index.html;
server_name _;
location / {
# proxy_pass http://localhost:5000;
# 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;
try_files $uri $uri/ =404;
add_header Cache-Control "no-cache";
}
location /static {
alias /var/www/project-app/frontend/build/static;
expires 1y;
add_header Cache-Control "public";
}
location /api {
include proxy_params;
proxy_pass http://localhost:5000;
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;
}
listen 443 ssl; # managed by Certbot
listen [::]:443 ssl;
ssl_certificate /etc/letsencrypt/live/project/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/project/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
access_log /var/log/project_access.log;
error_log /var/log/project_access.log;
proxy_headers_hash_max_size 512;
proxy_headers_hash_bucket_size 128;
}
server {
if ($host = app.project.tld) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
# server_name app.project.tld;
server_name _;
return 404; # managed by Certbot
}
Debian 11
Latest Nginx Version from APT
All packages are updated and installed via both PIP and NPM
Python 3.9.2
There are fillers in the code...such as app.project.tld...in my actual code, I have the subdomain of the actual app. Just trying to avoid someone telling me I made a copy/paste snafu :)
Thanks!
I'm doing a port 80 redirect with namecheap : i'm doing mydomain.com to redirect to my server 400.300.200.100:myport. myport is not 80 but another port.
Now namecheap is stating "If the server (you are redirecting the domain to) has X-Frame feature disabled, you may select a Masked Redirect for the client's browser to display your domain name instead of http://1.2.3.4:50."
I would like my domain to be displayed instead of myserver:port. So where should i check if I have x frame disabled? in my react frontend ? in my nginx configuration?
Should I put
X-Frame-Options: DENY
or
X-Frame-Options: SAMEORIGIN
?
Can someone tell me if i need to configure this on nginx?
this is my nginx.conf
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html/storybook-static;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /wagtail {
proxy_pass http://172.20.128.2:8000;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Script-Name /wagtail;
}
location /static/ {
alias /app/static/;
}
location /media/ {
alias /app/media/;
}
}
For security reasons usually an xframe 'same origin' option is used.
Go to where Nginx is installed and then a conf folder
check the following parameter in nginx.conf under server section
add_header X-Frame-Options.
Another way is to go to your Nginx installation directory, if using Linux and run
grep -rnw 'X-Frame'
It will show you all files with header traces.
So I know how to deploy a React app on a server.
npm run build
create a server block and point the root to my react app folder build (root /var/www/xfolder/build;)
systemctl restart nginx
run my node server (nohup node server &&) and its done.
I feel kind of dumb for not understanding this with NextJS. I run npm run build
I'm expecting something like a build folder. I've tried setting the server block root to
/var/www/xfolder/.next but the page still gives 403 forbidden. And do I need to run npm run start? I'm confuse on how to properly deploy the app. I'm using Ubuntu, NginX (1gb droplet) in DigitalOcean.
Check this: https://gist.github.com/iam-hussain/2ecdb934a7362e979e3aa5a92b181153
Reference for HTTP/HTTPS: https://gist.github.com/iam-hussain/2ecdb934a7362e979e3aa5a92b181153
Start PM2 nextJS service on port 8080:
cd PROJECT_DIRECTORY
pm2 start "npm run start -- -p 8080" --name contractverifier
Configure Nginx:
Replace this file with the below code /etc/nginx/sites-available/default
server {
server_name www.DOMAINNAME.com DOMAINNAME.com;
index index.html index.htm;
root /home/ubuntu/PROJECT_FOLDER; #Make sure your using the full path
# Serve any static assets with NGINX
location /_next/static {
alias /home/ubuntu/PROJECT_FOLDER/.next/static;
add_header Cache-Control "public, max-age=3600, immutable";
}
location / {
try_files $uri.html $uri/index.html # only serve html files from this dir
#public
#nextjs;
add_header Cache-Control "public, max-age=3600";
}
location #public {
add_header Cache-Control "public, max-age=3600";
}
location #nextjs {
# reverse proxy for next server
proxy_pass http://localhost:8080; #Don't forget to update your port number
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 80 default_server;
listen [::]:80;
}
I managed to make it work. The problem is on my Nginx server block. I just add this block
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;
proxy_cache_bypass $http_upgrade;
}
then run
npm start
I prefer to pm2 in order to start nextJs service and Nginx for publishing it
pm2 cmd:
pm2 start yarn --name nextjs --interpreter bash -- start
pm2 show nextjs
You can push that config into /etc/nginx/conf.d/your-file.config
/etc/nginx/nginx.config
server {
listen 80; # you can use 443 and letsencrypt to get SSL for free
server_name dicom-interactive.com; # domain name
access_log /var/log/dicom-interactive/access.log; # mkdir dir first
error_log /var/log/dicom-interactive/error.log error;
# for public asset into _next directory
location _next/ {
alias /srv/udemii-fe/.next/;
expires 30d;
access_log on;
}
location / {
# reverse proxy for next server
proxy_pass http://localhost:8000; # your nextJs service and 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;
# we need to remove this 404 handling
# because next's _next folder and own handling
# try_files $uri $uri/ =404;
}
}
I'm running NGINX on Ubuntu 18.04 LTS Bionix in a Digital Ocean Droplet. I have a dockerized React App which I can successfully reach and use with a dockerized Flask/Quart App when using http. The React App can be reached at example:8000 and the Quart at example:9000. The 2 communicate fine.
Now when setting up https using NGINX and the commonly used certbot method (thank you for the tutorial: Digital Ocean tutorial) I get errors that don't completely tell me what is going on.
After completing the tutorial and successfully displaying the html file in /var/www/example/index.html at https://www.example.com, I try https://www.example.com/app for the React app that I can reach on http 8000 and the /api site that I can reach on http 9000 with a standard doc page.
The React App shows the title as expected in the browser tab but there is nothing displayed. Only 404 errors saying 'failed to load resource' from css chunks.
The API fails also with failed to load resource.
The only NGINX configuration changed based on research found so far is the following:
# /etc/nginx/sites-enabled/example
server {
root /var/www/example.com/html;
index index.html index.htm index.nginx-debian.html;
server_name example.com www.example.com;
location / {
try_files $uri $uri/ =404;
}
location /app {
proxy_pass http://localhost: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;
}
location /api {
proxy_pass http://localhost:9000;
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 ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
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
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.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 80;
listen [::]:80;
server_name example.com www.example.com;
return 404; # managed by Certbot
}
Also have tried to add / to both api and app (location /app/, /api/) and the result changes but still errors. In this case it is still the 404 for api but it says URI doesn't exist. In the case of the react app it gives syntax errors based on the css it is reading.
Any advice is greatly appreciated.
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