前几天看[小猪课堂发布的nginx部署](https://zhuanlan.zhihu.com/p/431796992)，跟着做了一遍，由于本人是第一次尝试，遇见了很多问题。经过查阅和搜索，终于解决掉了。下面给大家介绍一下我的流程和遇见的问题，我们可以多讨论。
项目打包部署
1. Préparations
Un projet Vue complet
Un serveur
Les préparations sont très simples, vous n'avez besoin que d'un projet et d'un serveur, et le projet peut même n'être qu'un fichier html.
2. Initialisez le projet Vue
Utilisez l'échafaudage vue-cli pour créer le projet le plus simple, vue créer le nom du projet, puis utilisez npm serve pour exécuter le projet,
De cette manière, notre projet front-end tourne
3. Installer Nginx sur le
serveur Très utilisé, notre site web est déployé sur un serveur Nginx. Bien sûr, vous pouvez également choisir d'autres serveurs Web, ici nous utilisons le Nginx grand public.
Mon serveur ici est un système Centos, je vais donc utiliser Centos comme exemple.
Construction côté serveur
Téléchargez le logiciel de la machine virtuelle et construisez le serveur nécessite d'abord une image miroir appropriée, téléchargez l'image miroir peut aller à Ali https://developer.aliyun.com/mirror/?spm=a2c6h.25603864.0.0. a21c66ed4X1vdL téléchargement
Lors du téléchargement, il est recommandé de ne pas utiliser la version min, car elle est trop simplifiée et de nombreuses instructions ne peuvent pas être utilisées, alors n'hésitez pas.
Après le téléchargement, installez l'image miroir, jusqu'à la valeur par défaut.
Si rencontré lors de l'installation
Choisissez d'installer le système d'exploitation plus tard. Sélectionnez linux pour le type de système, modifiez les paramètres matériels par défaut jusqu'au bout et modifiez-les dans les paramètres de la machine virtuelle.
Après cela, démarrez le projet normalement et venez enfin sur le serveur pour installer nginx.
Installez nginx
sur le serveur et entrez la commande yum install -y nginx sur le serveur pour installer nginx.
S'il indique que nginx est introuvable, cela signifie que nous devons changer la source. La commande
rpm -uvh http://nginx .org/packages/centos/7/ noarch/rpms/nginx-release-centos-7-0.el7.ngx.noarch.rpm
Réinstallez nginx une fois la source modifiée avec succès. Utilisez la commande whereis nginx pour déterminer si nginx est installé avec succès.
4. Démarrez nginx,
entrez nginx sur le serveur et appuyez sur Entrée.
Entrez la commande netstat -ntlp pour afficher l'occupation du port, et vous pouvez voir que nginx occupe le port 80.
À ce stade, nous ouvrons le navigateur, saisissons l'adresse IP de la machine virtuelle et appuyons sur Entrée pour voir la figure suivante, c'est-à-dire que nginx démarre avec succès.
Si nginx est démarré, mais que la page Web ne peut pas être vue après avoir entré l'adresse IP, la raison peut être que le port 80 n'est pas ouvert.Pour la solution, voir la solution que
CentOS ne peut pas accéder au port 80 après l'installation de Nginx.
Pour arrêter nginx, entrez la commande nginx -s stop.
5. Modifiez le fichier de configuration nginx.
Utilisez la commande whereis nginx pour interroger le répertoire d'installation de nginx. De manière générale, /etc/nginx est l'emplacement de stockage des fichiers de configuration de nginx. cd /etc/nginx pour entrer dans le dossier de modification. Modifiez le fichier nginx.conf, recherchez listen 80 sur le serveur cible et modifiez le port 80 en port 9000 (si le port 9000 n'est pas ouvert, n'oubliez pas d'ouvrir le port en premier). Remplacez le chemin correspondant à root par le chemin où est stocké le package que vous êtes sur le point de télécharger. Il est recommandé de le changer en /home/www/dist. Lancez ensuite Enregistrer. Modifiez nginx.conf pour utiliser la commande vim .
Mais mon fichier est un peu spécial. Le répertoire du fichier de configuration par défaut est default.conf sous le dossier /etc/nginx/conf.d.
Après modification, entrez la commande nginx -s reload pour redémarrer.
6. Créez un nouveau dossier de projet
. Il est recommandé de créer un nouveau dossier www dans le dossier d'accueil. L'opération spécifique consiste à commander cd /home pour entrer dans le dossier d'accueil, la commande mkdir www pour créer un nouveau dossier www, et le dist Le dossier n'a pas besoin d'être créé, car après que nos projets suivants soient empaquetés Le fichier est un dossier dist.
7. Empaquetez et déployez le projet vue
De retour à notre projet vue, utilisez npm run build pour empaqueter le projet. Après l'empaquetage, un dossier dist sera généré dans le projet. Ensuite, téléchargez sur le serveur.
Il existe deux façons de télécharger.
Le moyen le plus simple est d'utiliser l'outil ftp pour glisser-déposer pour télécharger. Par exemple finalshall
La deuxième façon d'utiliser la commande est d'ouvrir la fenêtre cmd dans votre projet et d'entrer la commande
scp -r dist/ [email protected]:/home/www La partie bleue est ip, n'oubliez pas de remplacer votre propre ip.
(Si vous ne connaissez pas l'ip, vous pouvez utiliser la commande ifconfig sur le serveur pour observer l'ip)
À ce stade, nous ouvrons le navigateur et entrons notre ip: 9000 pour observer notre page de projet
8. Résolvez le problème de rafraîchissement de l'itinéraire 404.
Lorsque nous changeons d'itinéraire, puis actualisons la page, 404 apparaîtra. C'est parce que notre projet vue adopte la méthode de routage de l'historique. La raison principale est que vue est une application d'une seule page, et vous pouvez apprendre les détails par vous-même.
Solution au problème :
(1) Changez le mode de routage en hash
(2) Modifiez la configuration de nginx :
location / { try_files $uri $uri/ /index.html; — Résoudre le problème de rafraichissement de la page 404 } Après modification, redémarrez nginx et actualiser à ce moment Il n'y aura pas de 404 dans le navigateur.