I bought a VPS on OVH, which currently runs on Debian 9.
I installed successfully SSL over defaults ports (80 and 443) and it's working great when displaying basic html.
However, I'm totally lost concerning the run of my react app (basic app to try configuration).
It works in http in Safari but doesn't work at all in Chrome : "This site can’t provide a secure connection wecode-it.fr sent an invalid response.
ERR_SSL_PROTOCOL_ERROR"
I already checked the date of my server which is correct.
I'm running my app locally with npm start and want to use development mode for now. If you have any advice tho on building the app for production, I'll take it too. I think I'll use docker but I don't how to use it yet.
Here is my nginx configuration.
listen 80 default_server;
listen [::]:80 default_server;
server_name wecode-it.fr www.wecode-it.fr;
root /usr/share/nginx/html;
index index.html;
location ~ /.well-known {
allow all;
}
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl http2 default_server;
listen [::]:443 ssl http2 default_server;
ssl on;
ssl_certificate /etc/letsencrypt/live/wecode-it.fr/fullchain.pem
ssl_certificate_key /etc/letsencrypt/live/wecode-it.fr/privkey.pem
ss_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_servers_ciphers on;
ssl_ecdh_curve secp384r1;
ssl_session_cache shared:SSL:10m;
ssl_session_tickets off; # Requires nginx >= 1.5.9
ssl_stapling on; # Requires nginx >= 1.3.7
ssl_stapling_verify on; # Requires nginx => 1.3.7
resolver 8.8.8.8 8.8.4.4 valid=300s;
resolver_timeout 5s;
add_header Strict-Transport-Security "max-age=63072000; includeSubdomains";
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
ssl_dhparam /etc/ssl/certs/dhparam.pem;
location / {
proxy_pass https://MYIP:3030;
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;
}
}
I'm available to answer any of you questions.
Thank you.
You have to decide if you want to use the proxy or direct.
Some ssl settings are missing (if certificate is local).
But for now, you can try this setting:
server {
listen 443 ssl;
server_name backend1.example.com;
ssl_certificate /etc/ssl/certs/server.crt;
ssl_certificate_key /etc/ssl/certs/server.key;
#...
location /yourapp {
proxy_pass http://url_to_app.com;
#...
}
}
See more in docs
https://docs.nginx.com/nginx/admin-guide/security-controls/securing-http-traffic-upstream/#configuring-upstream-servers
I completely reinstalled my vps, did every steps from scratch and it's now working. I think I lost myself trying too much stuff, and starting all over again made it simple.
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 trying to serve a static build of a ReactJS app using Nginx, but something really strange is happening: the stylesheet isn't getting applied and the image isn't loading. I can see in the developer tools that the resources are there (see the image below), they just aren't getting applied. However, the javascript file is running--otherwise there wouldn't be any content on the screen.
What makes this even weirder is that I tried serving the files in the same directory using a python http server (command: python3 -m http.server 80), and it was fine; all of the assets loaded correctly.
Since it seems to be an nginx issue, here's my nginx config:
nginx.conf
events {
worker_connections 1024;
}
http {
resolver 127.0.0.11;
# Http redirect to https (unless it's a challenge)
server {
listen 80;
listen [::]:80;
server_name ambitx.io www.ambitx.io wc.ambitx.io rk.ambitx.io;
server_tokens off;
include letsencrypt.conf;
location / {
return 301 https://$server_name$request_uri;
}
}
# React frontend
server {
listen 443 default_server ssl http2;
listen [::]:443 ssl http2;
server_name ambitx.io www.ambitx.io;
include ssl.conf;
include letsencrypt.conf;
location / {
root /var/www/staticfiles;
index index.html index.htm;
try_files $uri /index.html =404;
}
}
# Websocket backend
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name wc.ambitx.io;
include ssl.conf;
include letsencrypt.conf;
location / {
proxy_pass "http://wsserver:8080";
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_set_header Host $host;
}
}
# Rocket backend
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name rk.ambitx.io;
include ssl.conf;
include letsencrypt.conf;
location / {
proxy_pass "http://rocketserver:80";
}
}
}
letsencrypt.conf
location /.well-known/acme-challenge/ {
root /var/www/certbot;
}
ssl.conf
ssl_certificate /etc/letsencrypt/live/ambitx.io/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/ambitx.io/privkey.pem;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # don't use SSLv3. Ref: POODLE
ssl_prefer_server_ciphers on;
Thanks in advance for the help.
I figured it out: it turns out the Nginx server was missing it's MIME types (the browser thought that the css file was text/plain instead of text/css).
Usually the best practice is to add files to /etc/nginx/conf.d/ (and mount your docker volume there) instead of editting nginx.conf directly, but I wanted to be able to place other files in the /etc/nginx/ directory so I decided to mount my docker volume there.
As it turns out, that's a bad idea. I overwrote a lot of other important config files inside the docker container. Now, I could just copy all of those files into my docker volume and call it good, but I decided it would be worth doing it the "right" way so I don't mess up stuff in the future.
So, now I have a docker volume mounted at /etc/nginx/cond.f/ and another volume mounted at /etc/nginx/lib/ so that I can import files without the main nginx.conf reading is as a server config.
What config file I need to launch Remix application?
It has no index.html file
Steps to reproduce (https://remix.run/docs/en/v1/guides/deployment):
npx create-remix#latest
? Where would you like to create your app? (./my-remix-app)
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets. (Use arrow keys)
❯ Remix App Server
? TypeScript or JavaScript? (Use arrow keys)
❯ TypeScript
cd my-remix-app
npm run build
And we have to directories: public, build
And what is the next step to show it on website.com using nginx?
The easiest is to choose the Remix App Server (which uses Express internally) or Express, then run remix build to build the app for production and run npm start to run the server.
After that, it's a normal Node.js server so you can configure your NGINX to forward requests on port 80 and 443 to your Remix app running in another port (3000 by default). This is normal Node.js + NGINX deployment, nothing specific of Remix.
right, you should build and start the node app first.
here's an example:
server {
listen 80;
listen 443 ssl http2;
server_name example.com;
ssl_certificate /home/example.com/ssl.crt;
ssl_certificate_key /home/example.com/ssl.key;
ssl_session_cache shared:le_nginx_SSL:1m;
ssl_session_timeout 1440m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers "ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS";
# add_header Access-Control-Allow-Origin "*";
add_header Strict-Transport-Security "max-age=31536000;";
access_log off;
# error_log /home/logs/error.nginx.log crit;
location / {
if ($http_user_agent = Mozilla/4.0){
return 503;
}
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://127.0.0.1:3000/;
proxy_redirect off;
}
}
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 want to use NGINx as a reverse proxy server so I can open my GAE (google app engine) web site from china mainland, because there most of google IP's are blocked by the GFW.
DNS: I have those DNS records:-
A mydomain.com ==> x.x.x.x
CNAME www ==> ghs.google.com
CNAME * ==> ghs.google.com
I'm planing to use geo DNS to point to my reverse proxy in case the request is coming from china mainland, currently I'm testing locally by having hosts record points mydomain.com to localhost.
I have nginx 1.1.19 on Ubuntu 12.04.
my site configuration file is:-
server {
#listen 80;
listen 443 ssl;
server_name mydomain.com;
ssl on;
ssl_certificate /home/user/Desktop/ssl/mydomain.com.pem;
ssl_certificate_key /home/user/Desktop/ssl/mydomain.com.key;
ssl_session_timeout 5m;
ssl_protocols SSLv3 TLSv1;
ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv3:+EXP;
ssl_prefer_server_ciphers on;
large_client_header_buffers 4 16k;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
# keepalive_timeout 70;
location / {
proxy_pass https://mydomain.com/;
proxy_set_header Host www.mydomain.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Real-HOST $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Proxy-Hostname $scheme://$http_host;
proxy_redirect off;
proxy_intercept_errors on;
#error_page 500 = /error_page.html;
}
#location = /error_page.html {
# root /local_path_to_static_files_root;
#}
}
When I tried to open https: //mydomain.com:-
I got a number of connection is too low error at the beginning solve it by adding/editing the following to the nginx.conf file:-
events {
worker_connections 8024;
# multi_accept on;
}
then I got too many open files error, I solve it by adding/editing the following to the nginx.conf file:-
worker_rlimit_nofile 5000;
Now I'm getting error 504 Gateway Time-out (connection time out):-
Any idea what I'm doing or did wrong ??
UPDATE:
It turned to be infinite redirecting loop because I have mydomain.com ==> 127.0.0.1 in the hosts file and the reverse proxy pass the requests coming to it to mydomain.com so it keeps requesting it self, I removed the URL proxy passing the request to from hosts to avoid loops.
SOLVED