Prólogo: Recientemente, la popularidad de la implementación de Jenkins es relativamente alta, por lo que se me ocurrió un artículo sobre cómo uso Jenkins para implementar proyectos de separación de front-end y back-end. Este artículo registra cómo configuro, construyo e implemento el proceso completo. paso a paso Cada línea El código ha sido probado y explicado, y está escrito como un blog para compartir con todos a través de la enseñanza de gráficos y textos.
Otros tutoriales de implementación de Blogger:
1. Docker implementa proyectos de separación de front-end y back-end: implemente proyectos de separación de front-end y back-end a través de Docker (prueba profesional disponible)
2. Implementación del sistema Linux Tomcat: tutorial detallado de implementación del sistema Linux Tomcat (explicación gráfica)
3. Implementar Nginx en el sistema Linux: tutorial detallado sobre cómo implementar Nginx en el sistema Linux (explicación gráfica)
4. Configuración del sistema Linux Maven: tutorial detallado del entorno Maven de configuración del sistema Linux (explicación gráfica)
5. Configuración del sistema Linux Node.js: tutorial detallado del entorno de configuración del sistema Linux Node.js (explicación gráfica)
6. Instalación del sistema Linux e implementación de MySQL: un tutorial completo sobre la instalación del sistema Linux y la implementación de MySQL (explicación detallada con imágenes y textos)
7. Instalación del sistema Linux e implementación de Redis: un tutorial completo sobre la instalación del sistema Linux y la implementación de Redis (explicación detallada con imágenes y textos)
8. Instalación del sistema Linux e implementación de MongoDB: un tutorial completo sobre la instalación del sistema Linux y la implementación de MongoDB (explicación detallada con imágenes y textos)
9. Instalación del sistema Linux e implementación de Jenkins: tutorial detallado de instalación del sistema Linux e implementación de Jenkins (explicación gráfica)
10. Proyecto de separación frontal de implementación del panel Pagoda: enseñanza práctica utilizando el proyecto de separación frontal de implementación del panel Pagoda (detalles completos)
Tabla de contenido
1.3, configurar el entorno Maven
1.4 Configurar el entorno Node.js
2. Prepare el paquete de instalación de Jenkins.
4.1 Instalar el complemento Maven
4.2 Instalar el complemento Node.js
6. Implementar el proyecto SpringBoot
7. Implementar el proyecto Vue
8. Código fuente del proyecto Gitee
1. Configuración del entorno
Cuando utilice Jenkins para implementar proyectos de separación de front-end y back-end, ¡primero debe preparar estos 6 enlaces!
1.1 Instalar JDK
La versión instalada es JDK11, use yum directamente para instalar con un clic
yum install java-11-openjdk-devel1.2 Instalar Git
Ejecute directamente el siguiente comando para instalar con un clic
yum install git1.3, configurar el entorno Maven
Si no está instalado, vaya a este blog:
Tutorial detallado del entorno Maven de configuración del sistema Linux (explicación gráfica)
1.4 Configurar el entorno Node.js
Si no está instalado, vaya a este blog:
Tutorial detallado de configuración del sistema Linux del entorno Node.js (explicación gráfica)
1.5 Implementar Nginx
Si no está instalado, vaya a este blog:
Tutorial detallado de implementación del sistema Linux Nginx (explicación gráfica)
1.6 Implementar Tomcat
Si no está instalado, vaya a este blog:
Tutorial detallado de implementación del sistema Linux Tomcat (explicación gráfica)
2. Prepare el paquete de instalación de Jenkins.
Sitio web oficial de descarga: descarga e implementación de Jenkins
Haga clic en la versión estable a la izquierda para descargar
3. Implementar Jenkins
1. Busque el directorio de aplicaciones web de Tomcat y cargue el paquete war que acaba de descargar (Xftp).
2. Ingrese al directorio bin de Tomcat, ejecute el siguiente comando para reiniciar Tomcat
detener
sh shutdown.shpuesta en marcha
sh startup.shDespués de reiniciar, encontrará varias carpetas de jenkins y el siguiente paso es acceder a Jenkins a través de Tomcat.
3. Acceso al navegador: http://dirección IP:8080/jenkins
Nota: el grupo de seguridad debe liberar el puerto 8080
De esta manera, nuestro jenkins se implementa.
4. Inicializar Jenkins
1. Ejecute el siguiente comando de acuerdo con el mensaje para obtener la contraseña de administrador.
cat /root/.jenkins/secrets/initialAdminPassword2. Seleccione la instalación con un clic a la izquierda.
Nota: Puede haber una pantalla blanca en el primer inicio. La solución es agregar un reinicio después de la URL, por ejemplo: http://dirección IP:8080/jenkins/restart, y luego presionar Enter. He encontrado este problema ¡Y por la presente lo dejo registrado!
3. Espere tranquilamente a que se complete la instalación.
4. Después de completar la información básica, aquí elige usar la cuenta de administrador para continuar. La próxima vez que inicie sesión, el nombre de usuario predeterminado es: admin, y la contraseña es la contraseña de administrador obtenida anteriormente. Si elige guardar y complete, la próxima vez que inicie sesión, el nombre de usuario y la contraseña se iniciarán de acuerdo con la información que creó esta vez.
5. Haga clic en Guardar y finalizar.
6. Haga clic para comenzar a usar Jenkins.
7. ¡De esta manera, se inicializa nuestro propio Jenkins!
5. Configurar Jenkins
Asegúrese de configurar Jenkins antes de implementar proyectos Vue y SpringBoot
4.1 Instalar el complemento Maven
1. Haga clic en Administrar Jenkins a la izquierda.
2. Haga clic en Complementos
3. Busque Maven e instálelo, recuerde verificar
4. Espere tranquilamente a que se complete la instalación y luego haga clic para regresar a la página de inicio.
4.2 Instalar el complemento Node.js
1. Repita los pasos anteriores, esta vez busque NodeJs para instalar, recuerde verificar
2. Verifique y reinicie Jenkins para completar la instalación de Maven y este Node.js.
3. Después de reiniciar, ingrese el número de cuenta y la contraseña para iniciar sesión nuevamente, seleccione la administración del sistema a la izquierda y luego configure las herramientas globales.
4.3, configurar JDK
Necesitamos encontrar el directorio fuente JDK instalado por yum y ejecutar los siguientes comandos en orden
1. Verifique la ubicación de Java
which java2. Verifique el enlace suave
ls -l /usr/bin/java3. Verifique el directorio fuente del JDK
ls -l /etc/alternatives/java
El directorio fuente encontrado es el siguiente
/usr/lib/jvm/java-11-openjdk-11.0.19.0.7-1.el7_9.x86_64
4. Haga clic en Agregar JDK y cancele la instalación automática y finalmente pegue el directorio de origen en la configuración de Jenkins.
¡De esta manera, la configuración del JDK está completa!
4.4, configurar Maven
1. Ingrese el siguiente comando para encontrar nuestro almacén Maven
mvn -v
El directorio fuente encontrado es el siguiente
/maven/apache-maven-3.8.8
2. Haga clic en Agregar Maven y cancele la instalación automática, y finalmente pegue el directorio de origen en la configuración de Jenkins.
¡De esta manera, Maven está configurado!
4.5 Configurando Node.js
1. Busque el directorio fuente donde está instalado Node.js.
El directorio fuente es el siguiente:
/nodejs/node-v15.0.0-linux-x64
2. Haga clic en Agregar NodeJs y cancele la instalación automática, y finalmente pegue el directorio de origen en la configuración de Jenkins.
¡De esta manera, Node.js también está configurado!
Una vez completadas las tres configuraciones anteriores, vaya hacia abajo y haga clic en Guardar.
6. Implementar el proyecto SpringBoot
1. Cree la dirección de almacenamiento del paquete Jar empaquetado por el proyecto SpringBoot. Mi ruta absoluta aquí es
/proyecto/springboot
2. Vuelva a la página de inicio y haga clic en Nueva tarea.
3. Ingrese el nombre del proyecto, elija crear un proyecto maven y finalmente haga clic en Aceptar.
4. Seleccione la administración del código fuente e ingrese la dirección del almacén de git. Si su almacén es privado, debe agregar manualmente las credenciales, que son su cuenta y contraseña de git. Debido a que mi proyecto es de código abierto, no es necesario agregarlo. y la rama se selecciona de forma predeterminada.
5. Seleccione Construir, agregue el siguiente comando en Objetivos y opciones
clean install -Dmaven.test.skip=trueComando detallado
| parámetro | explicar |
|---|---|
| limpio | Limpiar el proyecto eliminará los archivos en el directorio de destino. |
| instalar | Instale el proyecto en el almacén local, primero ejecute la compilación, la prueba y otros objetivos, y luego cargue el jar empaquetado en el almacén local. |
| -Dmaven.test.skip=verdadero | Este parámetro indica omitir la compilación y ejecución del código de prueba. |
6. Seleccione Publicar pasos y elija ejecutar el shell.
Agregue el siguiente comando
mv /root/.jenkins/workspace/springboot-jenkins/target/springboot-docker-0.0.1-SNAPSHOT.jar /project/springboot/springboot-docker-0.0.1-SNAPSHOT.jar
cd /project/springboot/
BUILD_ID=dontKillMe nohup java -Xms512m -Xmx512m -jar springboot-docker-0.0.1-SNAPSHOT.jar &Nota:
1. springboot-jenkins en /root/.jenkins/workspace/springboot-jenkins es el nombre del proyecto de esta compilación
2. Debe crear un nuevo directorio /project/springboot con anticipación
3. springboot-docker-0.0.1-SNAPSHOT.jar es el nombre de archivo predeterminado después de empaquetar maven. Si no lo sabe, verifique el nombre del paquete con anticipación para evitar errores tipográficos.
Comando detallado
| parámetro | explicar |
|---|---|
| mv /root/.jenkins/workspace/springboot-jenkins/target/springboot-docker-0.0.1-SNAPSHOT.jar /project/springboot/springboot-docker-0.0.1-SNAPSHOT.jar | Esta línea mueve el archivo jar del proyecto Spring Boot creado en el espacio de trabajo de Jenkins al directorio /project/springboot para su ejecución. |
| cd /proyecto/springboot/ | Cambie de directorio al directorio donde se movió el paquete jar en el paso anterior |
| BUILD_ID=no me mates nohup java -Xms512m -Xmx512m -jar springboot-docker-0.0.1-SNAPSHOT.jar & | BUILD_ID=dontKillMe es para evitar que Jenkins finalice el proceso iniciado una vez completada la tarea, use nohup para ejecutar el archivo jar en segundo plano e inicie la aplicación Spring Boot |
7. Haga clic en Guardar
8. Haga clic en Construir ahora y luego habrá una animación de carga en la esquina inferior izquierda.
9. Después de hacer clic, haga clic en la salida de la consola.
10. La primera implementación será lenta porque mi almacén de Maven está vacío, por lo que Maven descarga el paquete Jar del espejo de Alibaba Cloud la mayor parte del tiempo, así que espere un momento.
De esta forma, ¡la implementación es exitosa!
Nota: el puerto número 9090 está liberado
10. Utilice cartero para probar la interfaz.
¡Bien, ya terminaste!
7. Implementar el proyecto Vue
1. La dirección de almacenamiento del nuevo proyecto Vue, aquí mi ruta absoluta es
/proyecto/vue/dist
Este es el directorio del sitio web que configuré para que leyera el servidor Nginx.
2. Configure el archivo nginx.conf, siempre que haya 3 lugares, a saber: número de puerto, ruta de lectura y proxy inverso
location /api/ {
proxy_pass http://ip:端口/;
}como muestra la imagen
Si no sabe cómo configurarlo, puede ver la implementación de Nginx en la sección 1.5 anterior.
Nota: el grupo de seguridad necesita liberar el puerto 88
3. Inicie nuestro Nginx y luego visite
Debido a que nuestra carpeta dist no tiene nada, 403 es normal
4. Repita los pasos anteriores, ingrese el nombre del proyecto, seleccione el proyecto de software de estilo libre y finalmente haga clic en Aceptar.
5. Haga clic en Administración de código fuente, pegue la dirección de su proyecto y especifique una rama. Aquí proporciono una demostración de código abierto, por lo que no es necesario agregar credenciales.
6. Haga clic en Pasos de compilación y elija ejecutar el shell.
7. Ejecute el siguiente comando.
npm install
rm -rf ./dist/*
npm run build
rm -rf /project/vue/dist/*
cp -rf ./dist/* /project/vue/dist
chmod -R 777 /project/vue/distDetalles del comando:
| parámetro | explicar |
|---|---|
| instalación npm | Ejecute npm install para instalar las dependencias del módulo de nodo requeridas |
| rm -rf ./dist/* | Vacíe el directorio dist local y elimine los resultados de la compilación anterior |
| compilación de ejecución npm | Ejecute el comando npm run build para empaquetar y compilar el proyecto para generar la última carpeta dist |
| rm -rf /proyecto/vue/dist/* | Elimine la dist anterior en el directorio de implementación del servidor y realice el trabajo de limpieza antes de la implementación. |
| cp -rf ./dist/* /project/vue/dist | Copie el directorio dist local recién creado en el directorio de implementación del servidor para completar la implementación. |
| chmod -R 777 /proyecto/vue/dist | Modifique los permisos del directorio de implementación a 777 para garantizar que el usuario de jenkins tenga permisos suficientes para escribir en el directorio de implementación. |
8. Haga clic en Guardar
9. Haga clic en Construir ahora y luego habrá una animación de carga en la esquina inferior izquierda.
10. Después de hacer clic, haga clic en la salida de la consola.
11. Si ve éxito, ¡la implementación fue exitosa!
12. Visite el sitio web de Nginx que acabamos de implementar nuevamente (no es necesario reiniciar Nginx, implementación en caliente)
¡En este punto, todos nuestros proyectos front-end y back-end están implementados!
8. Código fuente del proyecto Gitee
Aquí comparto contigo el código fuente del proyecto utilizado en este blog, puedes probarlo tú mismo:
Nueve Resumen
Lo anterior es un intercambio técnico de mi propia separación de front-end y back-end usando la implementación de Jenkins. Si tiene alguna pregunta, no dude en hacerla en el área de comentarios.