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.

1. Générer des ressources statiques

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 目录，其中包含用于部署到服务器的静态文件。

2. 创建 Nginx 配置文件

创建一个新的 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 指令用于配置请求路由规则。

3. 将配置文件链接到 sites-enabled

在 /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/myapp

Ajoutez le contenu suivant dans le fichier pour définir notre application :

sudo nginx -t

Dans 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

1. dans le /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

Testez ensuite votre configuration 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";
}

2. Vous pouvez maintenant accéder à votre application, et déployer l'application sur une adresse IP publique ou un nom de domaine.

Deuxième partie : Optimisation de la configuration de Nginx

Maintenant que nous avons déployé avec succès l'application sur Nginx, nous devons effectuer certaines optimisations et configurations nécessaires pour obtenir les meilleures performances.

Voici quelques étapes pour optimiser la configuration de Nginx :

Activer la compression Gzip

La compression Gzip peut économiser de la bande passante et accélère le chargement des pages. Pour activer la compression Gzip, ajoutez le code suivant à votre fichier de configuration Nginx : Les ressources statiques, telles que les fichiers JavaScript et CSS, changent rarement après le déploiement. Par conséquent, la mise en cache du navigateur peut être activée pour améliorer les performances et réduire l'utilisation de la bande passante.

Pour activer la mise en cache, utilisez la directive de configuration suivante :

listen 443 ssl http2;

4. Cette directive active la mise en cache du navigateur et configure le navigateur pour qu'il utilise les mêmes fichiers mis en cache pendant un an.

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!