Quiero que mi sitio esté disponible en un dominio sin el puerto 3000, sé que React JS y Nginx no pueden usar los mismos puertos, por lo que a continuación puede ver la configuración de mi archivo Nginx:
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; }Cuando voy a https://example.com veo una página en blanco y los siguientes errores en la consola: Imagen
Pero cuando voy a http://example.com:3000 , todo funciona sin problemas, entonces, ¿cómo puedo hacer que funcione en https://example.com ?
Según su descripción, asumo que está ejecutando la aplicación de reacción usando npm run start / yarn start , que está diseñado para su entorno de desarrollo. Sin embargo, ejecutar la aplicación en su servidor la lleva a "producción".
Ejecutar npm run build / yarn build le brinda todos sus archivos fuente en un formato compilado y optimizado. Puede ponerlos en su servidor y permitir que nginx los atienda de inmediato (como usar try_files ) sin la necesidad de ejecutar un servidor separado o pasar la solicitud como un proxy.
Si desea ejecutar su aplicación solo como un proxy de todos modos (por ejemplo, es su entorno de desarrollo), debe corregir las rutas en su configuración de nginx, porque su ubicación /static/ no reenvía a la ruta /static/ de los proxys. Puede hacerlo agregando la ruta a proxy_pass o eliminando el segundo bloque de ubicación completo; será equivalente al primero.
Para tu referencia:
