web-dev-qa-db-fra.com

Déployer Create-React-App sur Nginx

Je tente de déployer mon create-react-app SPA sur une gouttelette Digital Ocean avec Ubuntu 14.04 et Nginx. Par le serveur statique instructions de déploiement , je peux le faire fonctionner quand je lance serve -s build -p 4000, mais l'application descend dès que je ferme le terminal. Ce n'est pas clair pour moi du create-react-app repo readme comment le garder en fonctionnement pour toujours, semblable à quelque chose comme forever .

Sans exécuter serve, j'obtiens l'erreur 502 Bad Gateway de Nginx.

Nginx Conf

server {
  listen 80;
  server_name app.mydomain.com;
  root /srv/app-name;
  index index.html index.htm index.js;
  access_log /var/log/nginx/node-app.access.log;
  error_log /var/log/nginx/node-app.error.log;
  location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|Zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|html|htm|svg)$ {
    root   /srv/app-name/build;
  }
  location / {
    proxy_pass http://127.0.0.1:4000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Access-Control-Allow-Origin *;
    proxy_set_header Host $Host;
    proxy_cache_bypass $http_upgrade;
  }
}
nginxdeploymentcreate-react-app
20
Kwhitejr

L'un des principaux avantages de React (et de créer React App)) est que vous n'avez pas besoin de la surcharge d'exécution de Node serveur (ou avec un proxy avec Nginx), vous pouvez servir les fichiers statiques directement.

À partir du documentation de déploiement auquel vous êtes lié, créez React L'application décrit les tâches à effectuer:

npm run build Crée un répertoire build avec une version de production de votre application. Configurez votre serveur HTTP favori de sorte qu'un visiteur de votre site soit desservi index.html Et que les demandes de chemins statiques tels que /static/js/main.<hash>.js Reçoivent le contenu du fichier /static/js/main.<hash>.js.

Dans votre cas, exécutez npm run build Pour créer le répertoire build/, Puis rendez les fichiers disponibles à un emplacement où Nginx peut y accéder. Votre compilation est probablement mieux effectuée sur votre ordinateur local et vous pouvez ensuite copier les fichiers en toute sécurité sur votre serveur (via SCP, SFTP, etc.). Vous pourriez exécuter npm run build Sur votre serveur, mais si vous le faites, résistez à la tentation de servir directement le répertoire build/ lors de la prochaine exécution d'une génération, les clients pourraient recevoir un ensemble de ressources incohérent pendant la construction.

Quelle que soit la méthode de construction choisie, une fois que votre répertoire build/ Est sur votre serveur, vérifiez ensuite ses autorisations pour vous assurer que Nginx peut lire les fichiers et configurer votre nginx.conf Comme suit:

server {
  listen 80;
  server_name app.mydomain.com;
  root /srv/app-name;
  index index.html;
  # Other config you desire (TLS, logging, etc)...
  location / {
    try_files $uri /index.html;
  }
}

Cette configuration est basée sur vos fichiers étant dans /srv/app-name. En bref, la directive try_files Tente de charger CSS/JS/images, etc. en premier et pour tous les autres URI, charge le fichier index.html Dans votre construction, affichant votre application.

Notez que vous devriez déployer à l'aide de HTTPS/SSL pour le servir plutôt qu'avec un HTTP non sécurisé sur le port 80. Certbot fournit le protocole HTTPS automatique pour Nginx avec des certificats gratuits Let's Encrypt, si le coût ou le processus d'obtention d'un le certificat vous retiendrait autrement.

43
davidjb

J'accueillais NextJS comme application principale sur / et souhaitais héberger l'ARC le /admin route. Voici ce que j'ai fait:

  • servir l'ARC via un serveur express personnalisé
  • changer hostname dans package.json
  • ajouter basename à /admin pour réagir-routeur
  • définir le proxy pass suivant:
location / {
  proxy_pass http://localhost:3000;
}
location /admin {
  proxy_pass http://localhost:3001;
}
location /admin/ {
  proxy_pass http://localhost:3001/;
}

Articles Liés:

0
Mehmet N. Yarar