Table des matières
1. Paramètres de configuration Jenkins
2. Créez le script de code frontal
3. Configuration connexe supplémentaire supplémentaire
Avant-propos :
Le serveur a déployé nginx, jenkisn et npm, sur la base desquels le projet front-end est déployé,
Nginx et autres opérations d'installation de serveur supplémentaires ultérieures ;
1. Paramètres de configuration Jenkins
1. Ajouter un nouvel élément logiciel
2. Ajouter une description du projet
3. Configurer les règles de traitement des images historiques
Par exemple : une tâche de build est réservée jusqu'à 30 jours et un maximum de 10 tâches de build sont réservées
4. Configurez le projet pour créer le serveur cible
5. Configurez l'adresse du code front-end et la branche à construire
6. Configurez l'emplacement de stockage du code frontal
7. Configurez le chemin du script de code compilé frontal
Configurez les variables temporaires et exécutez le script sous le chemin cible pour compiler le code frontal
2. Créez le script de code frontal
#!/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. Configuration connexe supplémentaire supplémentaire
1. Si la construction échoue ou provoque des problèmes liés aux nœuds, vous pouvez configurer node_modules à l'emplacement du code
2. Vérifiez le chemin de configuration npm
npm config obtient le préfixe
3. Voir la version de nodehe npm
nœud -v
npm-v
4. Trouvez le chemin du module de nœud
npm racine -g
npm bin-g
5. Mettre à niveau le nœud
npm installer -g -n
ou installer
installation npm
6. nginx configure le mappage du numéro de port correspondant pour compiler le code
Ajouter principalement un nouveau fichier nginx
Le serveur de configuration principal est le suivant :
serveur{
écouter 9091;#Port d'accès externe
nom_serveur hôte local；
emplacement /{
root /app/autopackage/demp/code/demo/dist/project; #L'emplacement du code compilé frontal
index index.html;#page d'accueil frontale
try_files $uri $url/ /app/autopackage/demp/code/demo/dist/project/index.html;# page d'erreur 404 introuvable peut charger cette configuration
}
}
Reportez-vous à l'article Configuration de nginx