Comment déployer le serveur dans le projet vue

Avec la popularité du framework Vue dans le développement web front-end, de plus en plus de développeurs utilisent Vue pour créer leurs propres applications Web. Pour la plupart des développeurs, le développement local des projets Vue n'est pas un problème, mais la manière de déployer le projet sur le serveur est un problème plus gênant. Cet article partagera quelques expériences et techniques pour déployer des projets Vue sur des serveurs.

1. Préparation de l'environnement du serveur

Avant de déployer le projet Vue, vous devez préparer un serveur et installer les environnements Node.js et NPM. Node.js est un environnement d'exécution JavaScript basé sur le moteur Chrome V8, qui peut exécuter du code JavaScript, et NPM est l'outil de gestion de packages de Node.js, utilisé pour installer, gérer et publier des packages JavaScript. Si vous n'avez pas installé Node.js et NPM, veuillez d'abord installer ces deux logiciels.

De plus, vous devez également installer les deux outils Git et PM2 sur le serveur. Git est un système de contrôle de version utilisé pour extraire le code de la base de code, tandis que PM2 est un gestionnaire de processus démon qui peut démarrer, arrêter et redémarrer. . et surveillance des applications Node.js.

2. Configurer le serveur Nginx

Avant de déployer le projet Vue sur le serveur, vous devez configurer le serveur Nginx pour gérer les requêtes HTTP. Nginx est un serveur HTTP et proxy inverse hautes performances qui peut acheminer les requêtes vers différents ports et peut également activer les certificats SSL pour fournir la prise en charge HTTPS.

Avant de configurer Nginx, vous devez empaqueter le projet Vue dans un fichier statique. Cela peut être réalisé en utilisant la commande build dans la CLI Vue :

$ npm run build

Après avoir exécuté cette commande, un répertoire dist sera généré à la racine du projet. répertoire. Il contient des fichiers statiques packagés.

Ensuite, installez Nginx sur le serveur à l'aide de la commande suivante :

$ sudo apt-get update
$ sudo apt-get install nginx

Une fois l'installation terminée, vous pouvez modifier le fichier /etc/nginx/sites-available/default pour configurer le serveur Nginx :

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www/html;
    index index.html;

    server_name example.com;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Dans cet exemple, a En écoutant le serveur Nginx sur le port 80, la directive root est utilisée pour définir le répertoire racine de Nginx, le nom_serveur est utilisé pour définir le nom du serveur et la directive location est utilisée pour définir la route de la requête.

Il convient de noter que puisque le projet Vue est une application monopage (SPA), toutes les pages sont générées dynamiquement par JavaScript et CSS, donc une directive de localisation doit être ajoutée au serveur Nginx pour gérer le routage dynamique :

location /api/ {
    proxy_pass http://localhost:3000/;
    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;
}

Dans cet exemple, lorsque le chemin /api/ est demandé, il est transmis par proxy au port local 3000 et certaines informations d'en-tête HTTP sont définies.

3. Déployer le projet Vue sur le serveur

Une fois le serveur Nginx configuré, le projet Vue peut être déployé sur le serveur. Voici quelques étapes spécifiques :

1. Utilisez Git sur le serveur pour extraire le code du projet Vue :

$ git clone https://github.com/username/vue-project.git

2. Entrez dans le répertoire du projet et installez les dépendances :

$ cd vue-project
$ npm install

3. Créez un fichier de configuration PM2 dans le répertoire racine du projet :

{
  "name": "vue-project",
  "script": "npm",
  "args": "start",
  "env": {
    "NODE_ENV": "production"
  }
}

Dans cet exemple, un processus nommé vue-project est configuré, l'application est démarrée à l'aide de la commande npm start et les variables d'environnement de production sont définies.

4. Démarrez un projet Vue en utilisant PM2 :

$ pm2 start pm2.config.js

De cette façon, vous pouvez démarrer un projet Vue sur le serveur et accéder à l'application en accédant à l'URL sur le serveur Nginx.

4. Conclusion

Dans cet article, nous avons présenté comment déployer le projet Vue sur le serveur. Grâce à une configuration simple, le projet Vue peut être déployé dans l'environnement de production, et Nginx et PM2 sont utilisés pour fournir de puissantes fonctions de service HTTP et de gestion de processus. J'espère que cet article sera utile aux développeurs qui souhaitent déployer des projets Vue sur le serveur.

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!