I want to make my site available on a domain without port 3000, I know that React JS and Nginx cannot use the same ports, so below you can see the configuration of my Nginx file:
location / {
# try_files $uri $uri.html $uri/ @extensionless-php;
proxy_set_header Accept-Encoding "";
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;
}
location /static/ {
proxy_set_header Accept-Encoding "";
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;
}
When I go to https://example.com I see a blank page and the following errors in the console: Image
But when I go to http://example.com:3000 it all works without any issues, so how can I make it work on https://example.com?
From your description, I assume you are running the react app using npm run start/yarn start, which is intended for your development environment. Running the app on your server, however, brings it to "production".
Running npm run build/yarn build gives you all your source files in a compiled and optimized format. You can put them on your server and let them be served by nginx right away (like using the try_files) without the need for running a separate server or passing the request as a proxy.
If you would like to run your app only as a proxy anyway (e.g. it’s your dev environment), you have to fix the paths in your nginx config, because your /static/ location does not forward to the proxys /static/ path. You can do so by either adding the path to proxy_pass or by removing the complete second location block — it will be equivalent to the first one.
For your reference:
