Tabla de contenido
1. Parámetros de configuración de Jenkins
2. Cree el script del código de interfaz de usuario
3. Configuración adicional relacionada complementaria
Prefacio:
El servidor ha implementado nginx, jenkisn y npm, en función de los cuales se implementa el proyecto front-end,
Nginx adicional relacionado posterior y otras operaciones de instalación del servidor;
1. Parámetros de configuración de Jenkins
1. Agregue un nuevo elemento de software
2. Agregar descripción del proyecto
3. Configurar reglas de procesamiento de imágenes históricas
Por ejemplo: una tarea de compilación se reserva por hasta 30 días y se reservan un máximo de 10 tareas de compilación
4. Configure el proyecto para construir el servidor de destino.
5. Configure la dirección del código de front-end y la sucursal que se construirá.
6. Configure la ubicación de almacenamiento del código de front-end
7. Configure la ruta del script del código compilado del front-end
Configure variables temporales y ejecute el script en la ruta de destino para compilar el código de front-end
2. Cree el script del código de interfaz de usuario
#!/bin/bash
#1打包前端
echo "package demoWeb..."
#前端代码存放地
cd /app/autopackage/demo/dev/code/demo
#借助npm实现拉取、构建等
export nodejieba_binary_host_mirror=http://前端部署服务器ip/npm/nodejieba/
#信任非http连接,配置node所在路径
NODE_DIR=/app/autopackage/pck_env/node14/bin
#清楚缓存
$NODE_DIR/npm cache clean --force
$NODE_DIR/node $$NODE_DIR/npm config set unsafe-perm=true
$NODE_DIR/node $NODE_DIR/npm fund
$NODE_DIR/node $NODE_DIR/npm run build
echo "package demoWeb...end"
3. Configuración adicional relacionada complementaria
1. Si la compilación falla o genera problemas relacionados con el nodo, puede configurar node_modules en la ubicación del código
2. Verifique la ruta de configuración de npm
configuración npm obtener prefijo
3. Ver la versión de nodehe npm
nodo -v
npm -v
4. Encuentre la ruta del módulo de nodo.
raíz npm -g
npm bin -g
5. Actualizar nodo
instalación npm -g -n
o instalar
instalación npm
6. nginx configura la asignación de número de puerto correspondiente para compilar el código
Principalmente agregue un nuevo archivo nginx
El servidor de configuración principal es el siguiente:
servidor{
escuchar 9091;#Puerto de acceso externo
nombre_servidor localhost；
ubicación /{
root /app/autopackage/demp/code/demo/dist/project; #La ubicación del código compilado del front-end
index index.html;#página de inicio del front-end
try_files $uri $url/ /app/autopackage/demp/code/demo/dist/project/index.html;# error página 404 no encontrada puede cargar esta configuración
}
}
Consulte el artículo configuración de nginx.