Despliegue Completo de una Aplicación Separada Frontend/Backend: Guía Práctica

Este artículo detalla los pasos prácticos para la descarga, configuración, construcción, empaquetado y desplieegue de una aplicación con arquitectura frontend-backend separada. Utilizaremos como referencia el proyecto de código abierto RuoYi-Vue, que combina Spring Boot para el backend y Vue.js para el frontend.

Entorno de Despliegue

Para este ejercicio, se han utilizado dos servidores con sistemas operativos Linux:

  • Servidor Frontend (Cliente):
    • Sistema Operativo: CentOS 8
    • Software: Nginx, MySQL, Redis (servicios compartidos con el backend)
    • Dirección IP: 192.168.152.53
  • Servidor Backend:
    • Sistema Operativo: CentOS 7
    • Software: Apache Tomcat
    • Dirección IP: 192.168.152.253

1. Obtención del Código Fuente del Proyecto RuoYi-Vue

Primero, necesitamos obtener el código fuente del repositorio. Asegúrese de que Git y un entorno Java estén instalados en ambos servidores, aunque el backend es el principal consumidor de Java.

Instalación de Java (JDK 11)

En el servidor backend, instale el JDK 11 si aún no lo tiene. Se puede utilizar un paquete RPM o el gestor de paquetes:

# Descargar e instalar JDK 11 (ejemplo con RPM)
wget https://repo.huaweicloud.com/java/jdk/11.0.2+7/jdk-11.0.2_linux-x64_bin.rpm
rpm -ivh jdk-11.0.2_linux-x64_bin.rpm

Instalación de Git

Instale Git en ambos servidores para clonar el repositorio:

# Para CentOS 7/8
yum install -y git-all

Clonación del Repositorio

Una vez que Git esté disponible, clone el proyecto RuoYi-Vue desde Gitee:

# Ejecute este comando en un directorio de trabajo adecuado en ambos servidores
git clone https://gitee.com/vfancloud/RuoYi-Vue.git

# Verificar la estructura del directorio
cd RuoYi-Vue
ls -F
# Debería ver 'ruoyi/' (backend) y 'ruoyi-ui/' (frontend)

2. Configuración del Servicio de Backend (Solo en el Servidor Backend)

El backend requiere configuración para interactuar con MySQL y Redis. Estas configuraciones deben apuntar a las direcciones IP y credenciales correctas de sus servicios.

Configuración de MySQL

Edite el archivo de configuración de Druid para MySQL, especificando los detalles de su base de datos (host, puerto, nombre de la base de datos, usuario y contraseña):

# Edite ruoyi/src/main/resources/application-druid.yml
vim ruoyi/src/main/resources/application-druid.yml

Busque la sección master bajo druid y ajuste los valores:

# ...
druid:
  master:
    url: jdbc:mysql://192.168.152.53:3306/ry_db?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
    username: appuser
    password: mysecurepassword
# ...

Configuración de la Base de Datos MySQL:

Cree la base de datos y un usuario dedicado, e importe el esquema del proyecto. Asegúrese de que el servidor MySQL (en 192.168.152.53) esté ejecutándose.

# Conéctese a MySQL en 192.168.152.53 como root
mysql -h 192.168.152.53 -u root -p

# Cree la base de datos 'ry_db'
mysql> CREATE DATABASE `ry_db` CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

# Use la base de datos recién creada
mysql> USE ry_db;

# Importe los scripts SQL para la estructura de la base de datos
# Asegúrese de que la ruta al archivo SQL sea correcta en su servidor backend
mysql> SOURCE /var/ruoyi/RuoYi-Vue/ruoyi/sql/quartz.sql;
mysql> SOURCE /var/ruoyi/RuoYi-Vue/ruoyi/sql/ry_vue.sql; # Si hay un script principal para el esquema

# Otorgue permisos al usuario 'appuser' desde el servidor backend (192.168.152.253)
mysql> CREATE USER 'appuser'@'192.168.152.253' IDENTIFIED BY 'mysecurepassword';
mysql> GRANT ALL PRIVILEGES ON ry_db.* TO 'appuser'@'192.168.152.253';
mysql> FLUSH PRIVILEGES;

Configuración de Redis

Actualice la configuración de Redis en el archivo principal application.yml:

# Edite ruoyi/src/main/resources/application.yml
vim ruoyi/src/main/resources/application.yml

Ajuste los parámetros de conexión de Redis:

# ...
  redis:
    host: 192.168.152.53
    port: 6379
    password: yourredispassword # Reemplace con su contraseña de Redis
    timeout: 10000ms # Timeout en milisegundos
# ...

Configuración de la Ruta de Logs y Codificación

Modifique el archivo logback.xml para definir la ruta de los logs y asegurar la codificación UTF-8 para evitar problemas con caracteres especiales:

# Edite ruoyi/src/main/resources/logback.xml
vim ruoyi/src/main/resources/logback.xml

Establezca la ruta de los logs:

<!-- Ruta donde se almacenarán los archivos de log -->
<property name="LOG_FILE_LOCATION" value="/var/log/ruoyi-app" />

Asegure que todos los <encoder> incluyan la codificación UTF-8. Habrá varias instancias de esto:

<encoder>
  <pattern>${log.pattern}</pattern>
  <charset>UTF-8</charset> <!-- Asegura que los logs se escriban con codificación UTF-8 -->
</encoder>

3. Preparación y Construcción del Frontend (Solo en el Servidor Frontend)

El frontend, basado en Vue.js, necesita que sus dependencias se instalen y se compile para producción.

Instalación de Node.js y npm

Si no tiene Node.js y npm instalados, puede hacerlo de la siguiente manera:

# Instalar Node.js y npm
yum install -y nodejs npm

Instalación de Depandencias del Proyecto Frontend

Navegue al directorio ruoyi-ui e instale todas las dependencias del proyecto. Es recomendable usar un registro de npm más rápido como el de Taobao si se encuentra en ciertas regiones:

cd RuoYi-Vue/ruoyi-ui/
npm install --unsafe-perm --registry=https://registry.npm.taobao.org

Construcción del Proyecto para Producción

Una vez que las dependencias estén instaladas, compile el proyecto frontend. Esto generará una versión optimizada y estática en un directorio dist:

npm run build:prod

Verifique que el directorio dist se haya creado y contenga los archivos de la aplicación:

ls -F dist/
# Debería ver favicon.ico, index.html, robots.txt, static/

Despliegue de los Archivos del Frontend en Nginx

Copie los archivos generados en el directorio dist al directorio raíz de documentos de Nginx. En CentOS, esto suele ser /usr/share/nginx/html:

cp -r dist/* /usr/share/nginx/html

Inicio de Nginx

Inicie o reinicie Nginx para que sirva los archivos estáticos del frontend:

systemctl start nginx

En este punto, debería poder acceder a la interfaz de usuario del frontend navegando a http://192.168.152.53/ en su navegador. Sin embargo, las funcionalidades que requieren el backend aún no estarán operativas.

4. Empaquetado del Backend (JAR y WAR)

El backend de Spring Boot puede empaquetarse como un archivo JAR (con un servidor web embebido) o un archivo WAR (para despliegue en un servidor de aplicaciones como Tomcat).

Instalación de Maven

Si aún no tiene Maven instalado en el servidor backend, instálelo:

# Descargar Maven
wget https://mirrors.bfsu.edu.cn/apache/maven/maven-3/3.6.3/binaries/apache-maven-3.6.3-bin.tar.gz

# Extraer y configurar
tar zxvf apache-maven-3.6.3-bin.tar.gz -C /usr/local/
ln -s /usr/local/apache-maven-3.6.3/bin/mvn /usr/bin/maven-cli

Empaquetado como JAR (Opción 1: Servidor Embebido)

Navegue al directorio raíz del backend (ruoyi) y use Maven para empaquetar la aplicación como un archivo JAR. Este método incluye un servidor Tomcat embebido.

cd RuoYi-Vue/ruoyi/
maven-cli package

# Una vez finalizado, encontrará el JAR en el directorio 'target'
ls target/ruoyi.jar

# Para ejecutar el JAR:
nohup java -jar target/ruoyi.jar &

Asegúrese de que los servicios de MySQL y Redis estén operativos antes de iniciar el backend.

Empaquetado como WAR (Opción 2: Despliegue en Tomcat)

Si prefiere desplegar el backend en una instancia de Tomcat existente, necesitará empaquetarlo como un archivo WAR y hacer algunas modificaciones en la configuración del proyecto.

Modificaciones para Empaquetado WAR

  1. Actualizar pom.xml para empaquetado WAR:

    Edite ruoyi/pom.xml y cambie el tipo de empaquetado a war:

    <!-- ... -->
   <groupId>com.ruoyi</groupId>
   <artifactId>ruoyi</artifactId>
   <version>1.0</version>
   <packaging>war</packaging> <!-- Cambiar de 'jar' a 'war' -->
<!-- ... -->

  2. Configurar Tomcat como dependencia provided:

    Para evitar conflictos con el Tomcat del servidor de aplicaciones, marque la dependencia de spring-boot-starter-tomcat como provided en ruoyi/pom.xml. Busque la sección de dependencias de Spring Boot Web:

    <!-- ... -->
               <dependency>
                       <groupId>org.springframework.boot</groupId>
                       <artifactId>spring-boot-starter-web</artifactId>
               </dependency>

               <dependency>
                       <groupId>org.springframework.boot</groupId>
                       <artifactId>spring-boot-starter-tomcat</artifactId>
                       <scope>provided</scope> <!-- Importante para despliegue WAR -->
               </dependency>
<!-- ... -->

  3. Modificar la Clase de Inicialización:

    Cree o modifique la clase SpringBootStartApplication.java para extender SpringBootServletInitializer. Esto es necesario para que la aplicación sea desplegable como un WAR tradicional. La clase se encuentra en RuoYi-Vue/ruoyi/src/main/java/com/ruoyi/.

    package com.ruoyi;

import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

// Asegúrese de que RuoYiApplication.class exista y sea la clase principal de la aplicación Spring Boot
public class ServletAppInitializer extends SpringBootServletInitializer {
   @Override
   protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
       return application.sources(RuoYiApplication.class);
   }
}
Construcción y Despliegue del WAR

Después de realizar las modificaciones, limpie el proyecto y empaquételo de nuevo:

# Limpiar compilaciones anteriores
cd RuoYi-Vue/ruoyi/
maven-cli clean

# Empaquetar como WAR
maven-cli package

El archivo ruoyi.war se encontrará en el directorio target/. Cópielo al directorio webapps de su instalación de Tomcat:

cp target/ruoyi.war /usr/local/apache-tomcat-9.0.36/webapps/

# Iniciar Tomcat
cd /usr/local/apache-tomcat-9.0.36/bin
./startup.sh

Tomcat detectará y desplegará automáticamente el archivo WAR.

5. Configuración del Proxy Inverso con Nginx (Solo en el Servidor Frontend)

Para que el frontend (servido por Nginx) pueda comunicarse con el backend (servido por el JAR de Spring Boot o Tomcat), necesitamos configurar un proxy inverso en Nginx. Esto enrutará las solicitudes API al servidor backend.

Abra el archivo de configuración principal de Nginx:

vim /etc/nginx/nginx.conf

Dentro del bloque http o del bloque server de su sitio, añada la siguiente configuración para redirigir las solicitudes que contengan /prod-api/ al servidor backend:

# ... dentro del bloque http o server
    location /prod-api/ {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.152.253:8080/; # IP y puerto del servidor backend
        proxy_redirect off; # Evita problemas de redirección
    }
# ...

Guarde los cambios y recargue la configuración de Nginx para que surtan efecto:

nginx -s reload

Ahora, al acceder a http://192.168.152.53/, el frontend debería cargar completamente y las llamadas a la API (por ejemplo, para la autenticación o la obtención de datos) serán redirigidas correctamente al servidor backend, permitiendo el uso completo de la aplicación.

Etiquetas: vue.js Spring Boot Nginx MySQL Redis

Publicado el 7-21 23:15

Etiquetas populares

©2026 Friki Work