Configuration du déploiement du projet front-end Vue/React/Angular sur serveur web

Un serveur Web est un logiciel utilisé pour stocker, traiter et transmettre du contenu Web. Il s'agit d'un type spécial de serveur capable de traiter les requêtes HTTP et de renvoyer des pages Web et d'autres contenus au navigateur. Le serveur Web prend en charge plusieurs langages de programmation, tels que PHP, JavaScript, Ruby, Python, etc., et prend en charge la génération dynamique de pages Web. Les serveurs Web courants incluent Apache, Nginx, Microsoft IIS, etc. Pour les projets de modèles de développement de séparation front-end et back-end actuellement populaires , le front-end doit souvent être déployé indépendamment à l'aide d'un serveur Web.

1. Nginx

Nginx est généralement le serveur Web préféré pour le déploiement de projets frontaux.

Les étapes pour déployer un projet Vue en utilisant Nginx comme serveur sont les suivantes :

1. Installez Nginx : installez Nginx si vous ne l'avez pas déjà fait.

2. Générez le projet Vue : utilisez la commande "npm run build" pour générer la version de production du projet Vue dans le projet Vue.

3. Copiez le dossier dist : copiez le dossier dist généré dans le dossier html de Nginx.

4. Configurez Nginx : modifiez le fichier de configuration de Nginx (généralement nginx.conf) et ajoutez ce qui suit pour configurer l'accès au projet :

server {
    listen 80;
    server_name your_domain_name;
    root /path/to/your/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 代理转发接口请求
    location /api/ {
		root /;
		proxy_set_header  Host $host; 
		proxy_headers_hash_max_size 1024; 
		proxy_headers_hash_bucket_size 128;
		proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for ;
		proxy_set_header Accept-Encoding "";
		proxy_pass http://service_api_ip:service_api_port/service_api/;
	}
}

5. Redémarrez Nginx : utilisez la commande "nginx -s reload" pour redémarrer Nginx.

6. Parcourez le projet Vue déployé : visitez http://votre_nom_de_domaine/ via un navigateur pour afficher le projet Vue déployé.

Remarque : ce qui précède suppose que le nom de domaine a déjà été configuré et mappé à l'adresse IP du serveur. Si aucun nom de domaine n'a été configuré, remplacez l'adresse IP du serveur en conséquence.

Deux, IIS

Les étapes pour déployer un projet Vue en utilisant IIS comme serveur sont les suivantes :

1. Générez le projet Vue : utilisez la commande "npm run build" dans le projet Vue pour générer la version de production du projet Vue.

2. Installer IIS : Si vous n'avez pas installé IIS, veuillez d'abord installer IIS.

3. Créer un site : Créez un nouveau site dans IIS, copiez les fichiers du dossier dist généré à la racine du site.

4. Configurer le document par défaut : dans la configuration du site dans IIS, définissez "index.html" comme document par défaut.

5. Configurer la réécriture d'URL : installez le module de réécriture d'URL (ARR : Application Request Routing ), puis ajoutez les règles de réécriture d'URL suivantes à la configuration du site dans IIS :

<rule name="proxy_forwarding" stopProcessing="true">
    <match url="^(.*?)/?api/(.*)$" />
    <conditions>
        <add input="{HTTP_HOST}" pattern="^current_site_ip:current_site_port$" />
    </conditions>
    <action type="Rewrite" url="http://service_api_ip:service_api_port/service_api/{R:2}" />
</rule>

<!--
    <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
        <match url="^.*" />
        <conditions logicalGrouping="MatchAny">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
    </rule>
-->

6. Démarrer le site : démarrez le site, accédez à l'URL du site via un navigateur pour afficher le projet Vue déployé.

Remarque : ce qui précède suppose que le nom de domaine a déjà été configuré et mappé à l'adresse IP du serveur. Si aucun nom de domaine n'a été configuré, remplacez l'adresse IP du serveur en conséquence.

3. Apache (httpd)

Les étapes pour déployer un projet Vue en utilisant Apache comme serveur sont les suivantes :

1. Générez le projet Vue : utilisez la commande "npm run build" dans le projet Vue pour générer la version de production du projet Vue.

2. Installer Apache : Si vous n'avez pas installé Apache, veuillez d'abord installer Apache.

3. Configurer Apache : configurez Apache pour qu'il serve des fichiers statiques. Cela peut être fait en ajoutant ce qui suit au fichier de configuration d'Apache :

<Directory "/var/www/html">
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>

4. Copier les fichiers : Copiez les fichiers du dossier dist généré dans le répertoire /var/www/html sous le répertoire racine d'Apache.

5. Configurez la réécriture d'URL : installez le module mod_rewrite, puis ajoutez les règles de réécriture d'URL suivantes au fichier de configuration Apache :

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

6. Redémarrez Apache : Redémarrez Apache avec la commande "sudo service apache2 restart".

7. Test : accédez à l'adresse IP ou au nom de domaine du serveur via un navigateur pour afficher le projet Vue déployé.

Remarque : ce qui précède suppose que le nom de domaine a déjà été configuré et mappé à l'adresse IP du serveur. Si vous n'avez pas configuré de nom de domaine, remplacez-le par l'adresse IP de votre serveur en conséquence. De plus, les chemins d'accès aux fichiers de configuration et les commandes peuvent varier selon les différents systèmes d'exploitation, veuillez les ajuster en fonction de la situation réelle.

Pour la configuration de la fonction de proxy inverse de la version 2.4 (c'est-à-dire que le proxy transmet les demandes à l'interface de service), veuillez vous reporter au document officiel pour obtenir des instructions de configuration détaillées .

4. Apache Tomcat

Après la pratique, Apache Tomcat a limité la fonction de transfert de proxy pour les requêtes (ne peut pas configurer le transfert de requêtes pour des URI spécifiques, tels que : http://domain :port/api/), et ne peut pas implémenter le déploiement de projets frontaux Vue/React/Angular. Si vous souhaitez étendre la fonction de transfert de proxy d'Apache Tomcat, vous avez besoin du support du module mod_proxy d'Apache httpd.

Les étapes pour déployer un projet Vue en utilisant Apache Tomcat comme serveur sont les suivantes :

1. Préparatifs : Assurez-vous d'avoir installé Apache Tomcat et de connaître son chemin d'installation.

2. Générez le projet Vue : exécutez la commande npm run build dans le répertoire racine du projet pour générer le projet. Une fois la construction terminée, un répertoire "dist" sera généré dans le répertoire racine du projet, qui contient tous les fichiers statiques.

3. Copiez le répertoire "dist" dans le répertoire webapps d'Apache Tomcat : par exemple, si Apache Tomcat est installé dans "C:\Tomcat", vous pouvez copier le répertoire "dist" dans "C:\Tomcat\webapps".

4. Renommez le répertoire "dist" : Renommez le répertoire "dist" comme vous le souhaitez, par exemple "my-app".

5. Configuration du transfert proxy : Modifiez le fichier de configuration d'Apache Tomcat, ouvrez le fichier "C:\Tomcat\conf\server.xml", et ajoutez-y le contenu suivant :

<Connector port="8080" protocol="HTTP/1.1"
          connectionTimeout="20000"
          redirectPort="8443"
          proxyName="localhost"
          proxyPort="<PROXY_PORT>"
          />

où "<PROXY_PORT>" est le numéro de port de l'hôte sur lequel réside le serveur d'API principal.

6. Démarrez Apache Tomcat : exécutez le fichier "bin/startup.bat" dans le répertoire d'installation d'Apache Tomcat pour démarrer Apache Tomcat.

7. Accédez à l'application Vue : visitez " http://localhost:8080/my-app " (où "my-app" correspond au nom que vous lui avez donné à l'étape 4) dans votre navigateur et vous devriez voir l'application Vue.

Remarque : ce qui précède suppose que le port 8080 par défaut de Tomcat est utilisé. Si d'autres ports sont utilisés, veuillez modifier l'adresse d'accès du navigateur en conséquence.