6
votes

Le déploiement de React avec Nginx n'a pas réussi à charger les ressources

J'essaye de déployer une application de réaction avec le proxy inverse nginx.

Mon bloc de configuration de serveur (/etc/nginx/sites-available/app2.conf) est le suivant:

curl http://localhost:3001

J'utilise un docker pour exécuter la réaction app avec le port 3001 exposé. J'ai essayé d'utiliser curl pour voir si cela fonctionne. La commande curl fonctionne comme prévu.

server {
  listen 80;
  listen[::]:80;
  root/srv/app2/build;
  index index.html index.html;
  server_name _;

  location / {
    proxy_pass http://localhost:3001/;
    try_files $uri $uri/ =404;
  }
}

Cependant, lorsque j'ai essayé d'exécuter dans mon navigateur Web, j'ai eu l'erreur suivante:

Échec du chargement de la ressource: le serveur a répondu avec un statut de 404 (non trouvé) main.8ea061ea.chunk.css

Échec du chargement de la ressource: le serveur a répondu avec un état 404 (Introuvable) main.dcd07bc1.chunk.js

Échec du chargement de la ressource: le serveur a répondu avec un état 404 (Non trouvé) 1.a6f3a221.chunk.js

Échec du chargement de la ressource: le serveur a répondu avec un état 404 (Introuvable) main.dcd07bc1.chunk.js

Échec du chargement de la ressource: le serveur a répondu avec un état 404 (Non trouvé) main.8ea061ea.chunk.css

Il semble qu'il n'a pas réussi à charger tous les fichiers statiques (.css & .js). Quelqu'un sait-il comment résoudre ce problème?

reactjs nginx

3 commentaires

quelle est l'url de requête de votre serveur nginx et de votre serveur en amont

Utilisons-nous un serveur express sur le frontend?

Pourriez-vous publier l'URL complète des fichiers css que votre navigateur essaie de récupérer? Vous pouvez essayer de curl ces demandes et voir quelle est la réponse.

3 Réponses :

1
votes

essayez d'utiliser cette configuration pour construire le docker

# build environment
FROM node:9.6.1 as builder
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@1.1.1 -g --silent
COPY . /usr/src/app
RUN npm run build

# production environment
FROM nginx:1.13.9-alpine
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

n'a jamais eu de problème avec ce script. Vous pourriez manquer une configuration de nginx ou oublier de copier récursivement, qui sait si vous n'avez pas posté le Dockerfile

* note: je ne l'ai pas fait
crédit: https://mherman.org/blog/dockerizing-a-react-app /

0 commentaires

2
votes

Veuillez vérifier ce https: // docs .nginx.com / nginx / guide-admin / serveur-web / service-contenu-statique /

Vous devez spécifier la manière dont les fichiers statiques doivent être diffusés en fonction de l'URL demandée pour les fichiers statiques.

J'espère que cela aide!

0 commentaires

1
votes

Je pense que c'est une solution élégante pour la configuration du proxy inverse nginx.

/etc/nginx/sites-available/app2.conf

sudo ln -s /etc/nginx/sites-available/app2.conf /etc/nginx/sites-enabled/

N'oubliez pas lien symbolique:

server {
    listen 80;
    listen [::]:80;

    server_name example.com www.example.com;

    location / {
            proxy_pass http://localhost:3001;

            # recommended settings
            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;
    }
}

0 commentaires