Opération de déploiement Nginx+Tomcat du projet Angular+javaweb

Au départ, j'utilisais ng build –prod –aot pour compiler et empaqueter. Notez ici que puisqu'il est désormais officiellement intégré, il vous suffit de saisir ng build –prod lors de l'empaquetage. Ici vous pouvez le comparer avec la taille de mon projet :

ng build : 8,348,761字节
ng build –aot : 9,232,405字节
ng build –prod : 1,839,811字节
ng build –prod –aot : 1,839,811字节

Enfin, on peut voir que ng build –prod peut compléter le packaging minimum pour la productisation. Je ne comprends pas quelque chose ici. La version précompilée est plus grande que la version normale. J'espère que quelqu'un pourra m'aider à y répondre.

Je ne parlerai pas ici de la façon de réduire la taille du projet.

Lorsque j'ai copié les fichiers de dist dans le dossier ROOT de Tomcat et ouvert http://127.0.0.1, la page familière du projet s'est affichée. J'appuyais habituellement sur F5 pour actualiser et j'ai trouvé une erreur 404. J'ai recherché des questions connexes sur Baidu et suis arrivé à la conclusion : lors de la première saisie de la page, le processus normal et le processus normal sont traités par le mécanisme de routage d'Angular. Cependant, s'il y a une opération d'actualisation, il s'agit d'une demande envoyée au service back-end. Si le back-end ne redirige pas votre demande vers index.html (fait ici référence à l'entrée de l'application sur une seule page), il le signalera. 404 erreur de page introuvable.

Wow, c'est tellement long. Mais au moins, vous comprenez la raison. Si vous connaissez la raison, vous devriez réfléchir à la manière de la résoudre !

Solution 1 :

Configurez le style d'URL d'Angular en style de hachage. Cette méthode est la plus courante que j'ai vue, et elle est entièrement copiée à partir de StackOverflow. Le style pushstate de H5 est désormais généralement utilisé, et les responsables d'Angular nous disent que s'il n'y a pas suffisamment de raisons d'utiliser le style de hachage, il est préférable d'utiliser le style H5 autant que possible. un # point d'ancrage maintenant ? Et certaines personnes ont souligné que si le style de hachage est configuré, des problèmes 404 se produiront toujours dans le paiement WeChat ou dans le chemin profond d'Angular. Si vous insistez pour l'utiliser, ce n'est pas un problème. Veuillez vous référer à la documentation officielle pour plus de détails

.

Solution 2 :

Puisqu'il signale 404, ne spécifieriez-vous pas simplement la page d'erreur comme répertoire racine dans Tomcat ?

Description : Ouvrez le répertoire du conteneur Tomcat, Tomcat/conf/web.xml, déplacez-vous vers le bas et ajoutez le code suivant ci-dessus :

Après la configuration, redémarrez Tomcat. Peu importe la façon dont je l'actualise maintenant, la page s'affichera sans problème. Mais nous avons constaté que même si la page peut être affichée, nous pouvons voir 404 requêtes sous la balise réseau. En d'autres termes, au moment de l'actualisation, Angular n'a pas pu trouver la page, mais a été dirigé vers index.html en tant que 404 par Tomcat. Tomcat a ramené une personne qui s'était égarée sur le bon chemin, mais cela l'a également marqué comme "il était autrefois un méchant". Ne parlons pas de savoir si la méthode de configuration d'une page d'erreur est appropriée. Parlons d'abord des problèmes que cette marque 404 nous apportera. Tout d’abord, tant que vous rencontrez une plateforme qui gère les pages d’erreur 404, vous êtes définitivement condamné. Par exemple, si WeChat détecte que vous avez une page 404, il vous donnera immédiatement une page pour aider les enfants perdus à retrouver leur maison.

Il est très consciencieux et gentil. Il a fait du bon travail pour le bien public, mais votre emploi sera perdu. Si votre page est placée dans le compte officiel et que vous entrez dans la page de recherche d'enfants dès que vous l'autorisez, ce serait bien si votre manager ne vous piratait pas à mort. A vous donc d’utiliser ou non cette méthode !

Solution 3

Si vous ne trouvez pas la page, je vous guiderai sur le backend ! J'écris un intercepteur ou un filtre. Avant d'envoyer une demande, je vous redirigerai d'abord vers index.html. Ce n'est pas un problème ! Bien sûr, il n'y a aucun problème. Il s'agit de trouver des médicaments spécifiques pour la cause de la maladie ~ Tout cela semble être une solution parfaite ~ Cependant, nous avons constaté que nous n'en avions pas parlé dans le sujet d'aujourd'hui et nous devons relever certains problèmes. cette solution ! Sinon, notre décision finale semblerait fade.
Puisque notre projet est séparé d’avant en arrière, il s’agit d’un service apatride. Le backend est responsable des opérations de base de données et du renvoi des données d'interface pertinentes au frontend. Le frontend est uniquement responsable du traitement de la logique d'affichage et de l'interaction avec le backend. Envois fréquents,
Backend ps : Vous m'avez demandé de ne pas traiter la page, mais vous m'avez quand même demandé de la transférer. Êtes-vous stupide ? Si votre backend ne veut tout simplement pas effectuer le travail de transfert, que pouvez-vous faire ? Bien sûr, cela brime le fonctionnement et la maintenance !

Solution·Ultime

Si vous êtes un maître d'exploitation et de maintenance, alors je suppose que vous pouvez simplement boire du thé à côté de moi. Et si... un débutant ? Ensuite, en tant que frontal, vous pouvez aider (zhuang) (bi), utilisez nginx ! Proxy inverse, équilibrage de charge, balabala…

Imaginez que vous avez un environnement nginx ici, j'utilise Windows ici. Ouvrez le fichier nginx.conf et n'écrivez pas de description spécifique. Lisez vous-même les commentaires. Si vous ne souhaitez pas le lire, vous pouvez télécharger directement le fichier de configuration.

Il convient de noter que la configuration du répertoire racine n'est pas location/{}, ce qui signifie que toutes les requêtes sont transférées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!