I've got a directory of images for my site: /var/www/project/images. On the root page, my images are served fine. When I go to a new path /auth, the images load fine. When I refresh the page on /auth, I get 404s for my image file.
The request before a refresh shows /var/www/project/images/image1.svg after refresh shows var/www/project/auth/images/image1.svg. So it's taking the path and then adding the image path to the end, which doesn't exist.
Same behavior on clicking the browser "back" button.
Config below:
Excluded the port 80 stuff because I'll just copy the 443 to 80.
server {
listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/website.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/website.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_name my_server_name; # managed by Certbot
location / {
root /var/www/project/
index index.html;
location /socket.io/ {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://socket/; # I have an upstream defined at top of file
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
location /images/ {
try_files $uri $uri /var/www/project/images/;
alias /var/www/project/images/;
expires 10d;
}
}
Using React with Gatsby if that matters.
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 just set up nginx with ssl certificate, copied my build directory to /var/www/mydomain and the little lock on the browser reflects, but the problem is when I hit the mydoma.com the index.html in /var/www/mydomain directory is loaded but the other pages are not, thus showing a blank page - only works with safari browser.
The nginx was serving the react app normally before I added the ssl cert and accepted automatic redirect.
Here is the content of my sites-available config.
server {
server_name mydomain.com www.mydomain.com;
location / {
root /var/www/mydomain;
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;
}
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/nextoma.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/nextoma.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
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
}
I deployed a web application on an ubuntu server and everything work just fine. Until I installed letsencrypt ssl on nginx reverse proxy suddenly my ReactJS frontend throws net::ERR_SSL_PROTOCOL_ERROR error. What am I doing wrong? Both application run on same server.
server {
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 domain.tld www.domain.tld;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
#try_files $uri $uri/ =404;
proxy_pass http://localhost:5555;
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/sitedomain/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/sitedomain/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
#return 301 https://$host$request_uri;
}
server {
if ($host = www.domain.tld) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = domain.tld) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80 default_server;
listen [::]:80 default_server;
server_name domain.tld tld;
return 404; # managed by Certbot
}
This is my nginx config file above.
My backend is running on the same server on port 9000.
My frontend loads with https correctly but unable to connect to backend on port 9000 on the same machine.
Note: my frontend is on port 5555 accessible through nginx reverse proxy
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.