My domain is:
My web server is (include version):
nginx/1.23.2
The operating system my web server runs on is (include version):
ubuntu 20.04
My hosting provider, if applicable, is:
AWS
I can login to a root shell on my machine (yes or no, or I don't know):
Yes
I can access my website using the secure connection https://www.mynacode.com
Now the images on my website are taken directly from the backend on port 8000. I can access those images through an insecure url, for example: http://www.mynacode.com:8000/media/mynacode.png.
However, I cannot access them on my website running on port 443 in Google Chrome.
This line in my react app doesn't display an image.
<img src={http://www.mynacode.com:8000/media/mynacode.png} ... />
I believe this is Google chrome's policy that prevents me from loading content from insecure urls on a secure site. My website opens fine on Safari.
Therefore, to access those images on my website, I'm guessing (?) maybe I need to establish a secure connection on port 8000 as well so that I can see images on my website i.e. I would like: https://www.mynacode.com:8000/media/mynacode.png
What changes would I need to make in my config file? I tried listen 8000 ssl in the server block but that hasn't worked for me.
upstream api {
server backend:8000;
}
server {
listen 8080;
server_name mynacode www.mynacode.com;
location /.well-known/acme-challenge/ {
root /var/www/certbot;
}
location / {
return 301 https://$host$request_uri;
}
}
server {
listen 443 ssl;
server_name mynacode www.mynacode.com;
ssl_certificate /etc/letsencrypt/live/www.mynacode.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/www.mynacode.com/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
location / {
proxy_read_timeout 300s;
proxy_connect_timeout 75s;
root /var/www/react;
try_files $uri /index.html;
proxy_set_header Host $host;
}
location /api/ {
proxy_read_timeout 300s;
proxy_connect_timeout 75s;
proxy_pass http://api;
proxy_set_header Host $http_host;
}
}