Configuración de implementación del proyecto front-end Vue/React/Angular en el servidor web

Un servidor web es una pieza de software que se utiliza para almacenar, procesar y transmitir contenido web. Es un tipo especial de servidor con la capacidad de procesar solicitudes HTTP y devolver páginas web y otro contenido al navegador. El servidor web admite múltiples lenguajes de programación, como PHP, JavaScript, Ruby, Python, etc., y admite la generación dinámica de páginas web. Los servidores web comunes incluyen Apache, Nginx, Microsoft IIS, etc. Para los proyectos de modelo de desarrollo de separación front-end y back-end actualmente populares , el front-end a menudo debe implementarse de forma independiente mediante un servidor web.

1. Nginx

Nginx es generalmente el servidor web preferido para la implementación de proyectos front-end.

Los pasos para implementar un proyecto Vue usando Nginx como servidor son los siguientes:

1. Instale Nginx: Instale Nginx si aún no lo ha hecho.

2. Compile el proyecto de Vue: use el comando "npm run build" para compilar la versión de producción del proyecto de Vue en el proyecto de Vue.

3. Copie la carpeta dist: copie la carpeta dist generada a la carpeta html de Nginx.

4. Configure Nginx: edite el archivo de configuración de Nginx (generalmente nginx.conf) y agregue lo siguiente para configurar el acceso al proyecto:

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. Reinicie Nginx: use el comando "nginx -s reload" para reiniciar Nginx.

6. Explore el proyecto de Vue implementado: visite http://your_domain_name/ a través de un navegador para ver el proyecto de Vue implementado.

Nota: lo anterior supone que el nombre de dominio ya se ha configurado y asignado a la dirección IP del servidor. Si no se ha configurado un nombre de dominio, sustituya la dirección IP del servidor según corresponda.

dos, IIS

Los pasos para implementar un proyecto Vue utilizando IIS como servidor son los siguientes:

1. Compile el proyecto de Vue: use el comando "npm run build" en el proyecto de Vue para compilar la versión de producción del proyecto de Vue.

2. Instale IIS: si no ha instalado IIS, instálelo primero.

3. Crear un sitio: Cree un nuevo sitio en IIS, copie los archivos en la carpeta dist generada a la raíz del sitio.

4. Configurar documento predeterminado: en la configuración del sitio en IIS, establezca "index.html" como el documento predeterminado.

5. Configure la reescritura de URL: instale el módulo de reescritura de URL (ARR: enrutamiento de solicitud de aplicación ), luego agregue las siguientes reglas de reescritura de URL a la configuración del sitio en 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. Inicie el sitio: Inicie el sitio, visite la URL del sitio a través de un navegador para ver el proyecto Vue implementado.

Nota: lo anterior supone que el nombre de dominio ya se ha configurado y asignado a la dirección IP del servidor. Si no se ha configurado un nombre de dominio, sustituya la dirección IP del servidor según corresponda.

3. Apache (httpd)

Los pasos para implementar un proyecto Vue usando Apache como servidor son los siguientes:

1. Compile el proyecto de Vue: use el comando "npm run build" en el proyecto de Vue para compilar la versión de producción del proyecto de Vue.

2. Instale Apache: si no ha instalado Apache, instálelo primero.

3. Configure Apache: Configure Apache para servir archivos estáticos. Esto se puede hacer agregando lo siguiente al archivo de configuración de Apache:

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

4. Copiar archivos: Copie los archivos en la carpeta dist generada al directorio /var/www/html bajo el directorio raíz de Apache.

5. Configure la reescritura de URL: instale el módulo mod_rewrite, luego agregue las siguientes reglas de reescritura de URL al archivo de configuración de 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. Reinicie Apache: reinicie Apache con el comando "sudo service apache2 restart".

7. Prueba: acceda a la dirección IP o el nombre de dominio del servidor a través de un navegador para ver el proyecto Vue implementado.

Nota: lo anterior supone que el nombre de dominio ya se ha configurado y asignado a la dirección IP del servidor. Si no ha configurado un nombre de dominio, reemplácelo con la dirección IP de su servidor según corresponda. Además, las rutas y los comandos del archivo de configuración pueden variar con los diferentes sistemas operativos, ajústelos de acuerdo con la situación real.

Para la configuración de la función de proxy inverso de la versión 2.4 (es decir, el proxy reenvía las solicitudes a la interfaz de servicio), consulte el documento oficial para obtener instrucciones de configuración detalladas .

4. Gato Apache

Después de la práctica, Apache Tomcat tiene una función de reenvío de proxy limitada para solicitudes (no puede configurar el reenvío de solicitudes para URI específicos, como: http://dominio : puerto/api/) y no puede implementar la implementación de proyectos front-end de Vue/React/Angular. Si desea ampliar la función de reenvío de proxy de Apache Tomcat, necesita la compatibilidad con el módulo mod_proxy de Apache httpd.

Los pasos para implementar un proyecto Vue utilizando Apache Tomcat como servidor son los siguientes:

1. Preparativos: asegúrese de haber instalado Apache Tomcat y conocer su ruta de instalación.

2. Compile el proyecto Vue: ejecute el comando npm run build en el directorio raíz del proyecto para compilar el proyecto. Una vez completada la compilación, se generará un directorio "dist" en el directorio raíz del proyecto, que contiene todos los archivos estáticos.

3. Copie el directorio "dist" en el directorio de aplicaciones web de Apache Tomcat: por ejemplo, si Apache Tomcat está instalado en "C:\Tomcat", puede copiar el directorio "dist" en "C:\Tomcat\webapps".

4. Cambie el nombre del directorio "dist": Cambie el nombre del directorio "dist" a lo que desee, por ejemplo, "mi-aplicación".

5. Configuración de reenvío de proxy : modifique el archivo de configuración de Apache Tomcat, abra el archivo "C:\Tomcat\conf\server.xml" y agregue el siguiente contenido:

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

donde "<PROXY_PORT>" es el número de puerto del host donde reside el servidor API de back-end.

6. Inicie Apache Tomcat: ejecute el archivo "bin/startup.bat" en el directorio de instalación de Apache Tomcat para iniciar Apache Tomcat.

7. Acceda a la aplicación Vue: Visite " http://localhost:8080/my-app " (donde "mi-aplicación" es el nombre que le dio en el paso 4) en su navegador y debería ver la aplicación Vue.

Nota: lo anterior supone que se utiliza el puerto 8080 predeterminado de Tomcat. Si se utilizan otros puertos, cambie la dirección de acceso del navegador en consecuencia.