Maison > Article > interface Web > Linux vue déployé sur nginx
Préface
Dans le développement Web moderne, certains outils populaires et faciles à utiliser sont généralement utilisés pour créer et gérer des applications Web. Ceux-ci incluent Linux, Vue et Nginx.
Linux est un système d'exploitation open source couramment utilisé pour le déploiement côté serveur. Vue est un framework JavaScript frontal populaire pour développer des applications Web côté client. Nginx est un serveur Web hautes performances qui peut être utilisé pour héberger des ressources statiques et acheminer les requêtes vers l'application appropriée via un proxy inverse.
Dans cet article, nous expliquerons comment déployer une application Vue sur Nginx et effectuerons certaines configurations et optimisations nécessaires pour des performances optimales. Nous utiliserons une vraie application Vue comme exemple et supposerons que Linux et Nginx sont déjà installés.
Première partie : Préparation
Avant de déployer l'application sur Nginx, nous devons effectuer quelques préparatifs. Voici quelques étapes nécessaires à suivre avant de commencer.
Exécutez la commande suivante pour générer des ressources statiques pour votre application Vue :
npm run build
This créera un répertoire dist
contenant les fichiers statiques à déployer sur le serveur. dist
目录,其中包含用于部署到服务器的静态文件。
创建一个新的 Nginx 配置文件,用于托管我们的应用程序。假设您已经安装了 Nginx,可以在 /etc/nginx/sites-available/
目录中创建一个新的文件以定义您的应用程序。
sudo nano /etc/nginx/sites-available/myapp
在文件中添加以下内容,以定义我们的应用程序:
server { listen 80; root /var/www/myapp/dist; index index.html; server_name myapp.example.com; location / { try_files $uri $uri/ /index.html; } }
在这个配置文件中,我们定义了我们的应用程序。listen
指令指定了应用程序将监听的端口。root
指令指定应用程序的根目录,即我们刚刚生成的 dist
目录。server_name
指令设置了应用程序的域名。location
指令用于配置请求路由规则。
在 /etc/nginx/sites-enabled/
Créer un fichier de configuration Nginx
Créer un nouveau fichier de configuration Nginx pour héberger notre application. En supposant que Nginx soit installé, vous pouvez créer un nouveau fichier dans le répertoire/etc/nginx/sites-available/
pour définir votre application. sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/myappAjoutez le contenu suivant dans le fichier pour définir notre application :
sudo nginx -tDans ce fichier de configuration, nous définissons notre application. La directive
listen
spécifie le port sur lequel l'application écoutera. La directive root
spécifie le répertoire racine de l'application, qui est le répertoire dist
que nous venons de générer. La directive server_name
définit le nom de domaine de l'application. La directive location
est utilisée pour configurer les règles de routage des requêtes.
Liez le fichier de configuration aux sites activés
/etc/nginx/sites-enabled/
répertoire Créez un lien symbolique vers le fichier de configuration que nous venons de créer. sudo systemctl restart nginx
gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;S'il n'y a pas d'erreur, redémarrez Nginx :
location ~* .(js|css|png|jpeg|jpg|gif)$ { expires 1y; add_header Cache-Control "public, no-transform"; }
listen 443 ssl http2;
Utilisez HTTP/2
HTTP/2 est un protocole avancé qui améliore la vitesse et les performances de votre site Web. Pour activer HTTP/2, ajoutez la ligne suivante au fichier de configuration Nginx :listen 443 ssl http2; ssl_certificate /path/to/cert.crt; ssl_certificate_key /path/to/key.key;
Enable SSL
Enable SSL to secure cryptage data et améliorer la sécurité des applications. Pour activer SSL, suivez les étapes suivantes : a. Installez un certificat SSL Vous pouvez acheter ou signer vous-même un certificat SSL, ou utiliser une autorité de certification gratuite telle que Chiffrons ). Ensuite, téléchargez le certificat SSL et la clé sur le serveur. b. Configure SSL#🎜🎜##🎜🎜#Dans le fichier de configuration Nginx, ajoutez la ligne suivante pour activer SSL : #🎜🎜#rrreee#🎜🎜#Cela définira le HTTPS d'écoute Nginx port et utilisez votre certificat SSL et votre clé. #🎜🎜##🎜🎜#Summary#🎜🎜##🎜🎜#Dans cet article, nous avons expliqué comment déployer une application Vue sur Nginx et effectué quelques optimisations et configurations nécessaires pour obtenir les meilleures performances. Nous avons appris à générer des ressources statiques, à créer des fichiers de configuration Nginx et à optimiser SSL, Gzip et la mise en cache. Vous pouvez désormais appliquer ces techniques à l'application que vous avez créée en cours de route pour la déployer dans un environnement de production. #🎜🎜#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!