Jenkins自动化运维-打包部署Vue前端项目(1):搭建打包部署环境

一、总体步骤流程概览

二、环境搭建

环境为CentOS7 系统环境，安装node.js 和 npm

node.js官方网站

下载 | Node.js 中文网http://nodejs.cn/download/

1、下载node.js安装包

$ cd /data/soft
# 下载安装包
$ wget https://npmmirror.com/mirrors/node/v16.14.0/node-v16.14.0-linux-x64.tar.xz

2、解压安装包

$ tar -zxvf node-v16.14.0-linux-x64.tar.xz

3、移动并改名文件夹

$ mv node-v16.14.0-linux-x64 /usr/local/nodejs

4、让npm和node命令全局生效

$ ln -s /usr/local/nodejs/bin/npm /usr/local/bin/
$ ln -s /usr/local/nodejs/bin/node /usr/local/bin/

5、查看nodejs是否安装成功

$ node -v
$ npm -v

6、设置淘宝镜像源

$ npm config set registry http://registry.npm.taobao.org/

 7、安装yarn

$ npm i -g yarn

如果是用npm安装成功之后，使用yarn打包有问题，可以使用 sudo apt-get install yarn

查看安装的组件

$ sudo npm -g list

卸载安装的组件

$ sudo npm uninstall -g yarn

7、配置linux系统环境变量

配置环境变量，主要用于Jenkins打包，以免找不到 npm、yarn 相关命令

$ view /etc/profile

# 编辑的内容，不要直接复制，追加nodejs的的配置即可
......

NODEJS_HOME=/usr/local/nodejs
PATH=$JAVA_HOME/bin:$MAVEN_HOME/bin:/usr/local/nodejs/bin:$PATH;

......

# 生效环境变量
$ source /etc/profile

9、配置Jenkins的环境变量 参考文章

Jenkins之Npm: Command not found - 简书题记 系统中原本已安装了基于nvm的node环境，故想直接使用此环境下的npm以及yarn的命令注意：docker安装的jenkins可不必继续往下看，可能参考的价值不大，本...https://www.jianshu.com/p/207091acc112Jenkins执行脚本npm命令报错 npm: command not found_明言的博客-CSDN博客_jenkins 找不到npm命令服务器npm已经配置好tall】没有问题【npm install】放到脚本里面，Jenkins执行脚本报错[test] $ /bin/sh -xe /tmp/jenkins617246321908774027.sh+ sh /home/sh/test.sh/home/sh/test.sh: line 7: npm: command not found解决方案3.1、查询系统环...https://blog.csdn.net/liuxiaoming1109/article/details/89841548

9.1、系统管理 -> 系统配置

9.2、全局属性—>环境变量，增加 path环境变量

# 查看PATH环境变量的值
$ echo $PATH

linux环境变量的值，配置到Jenkins全局变量中

三、问题汇总 1、yarn打包命令无法使用问题 1.1、问题描述

1.2、解决方案

$ sudo apt-get remove cmdtest
$ sudo apt autoremove
$ sudo apt-get update
$ sudo apt-get install yarn

2、打包后编译的文件复制到部署之后，访问403权限不足问题 2.1、问题描述

我们使用的用户/用户组 compass_web:compass_web

部署目录需要使用的权限 755

ERROR 403 in loading resources like CSS and JS in my index.php - Stack Overflowhttps://stackoverflow.com/questions/18724718/error-403-in-loading-resources-like-css-and-js-in-my-index-php

 

2.2、解决方案

$ chown -R compass_web:compass_web /usr/local/nginx/html/web/www/looksky-compass-web/
$ chmod -R 755 /usr/local/nginx/html/web/www/looksky-compass-web/