Jenkins Bitbucket Vue 部署

一、环境版本

组件	版本
Ubuntu	20.04
NodeJS	16.13.0
npm	8.1.0
cnpm	7.1.0

二、安装NodeJS

# 指定NodeJS安装版本，修改版本只需修改setup_X.x
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
# 安装NodeJS
sudo apt-get install -y nodejs
# 验证安装
node -v
npm -v
# 安装cnpm
npm install cnpm -g --registry=https://registry.npmmirror.com

# 如需卸载更换版本
sudo apt-get remove nodejs

三、安装Nginx

# 安装Nginx
sudo apt install nginx
# 配置防火墙
# 获得应用程序配置文件的列表
sudo ufw app list
# Nginx有三个配置文件可用：Nginx Full、Nginx HTTP、Nginx HTTPS
# Nginx Full ：此配置文件打开端口80（正常，未加密的网络流量）和端口443（TLS / SSL加密流量）;
# Nginx HTTP ：此配置文件仅打开端口80（正常，未加密的网络流量）;
# Nginx HTTPS ：此配置文件仅打开端口443（TLS / SSL加密流量）;
sudo ufw allow 'Nginx HTTP'
sudo ufw allow 'Nginx HTTPS'
# 开启防火墙
sudo ufw enable
# 查看防火墙状态
sudo ufw status
# 验证Web服务器是否运行
sudo systemctl status nginx
# 启动nginx
sudo systemctl start nginx.service 
# 设置为每次开机启动 
sudo systemctl enable nginx.service 
# 配置nginx
sudo vim /etc/nginx/sites-enabled/default

# 修改root指向内容
root /usr/local/nginx/jenkins/www/hello-vue;

# nginx重新加载配置文件
nginx -s reload

附录 nmp命令

# 全局安装
npm install -g 软件包名
# 全局安装的路径可以通过下面的命令查看
npm config get prefix
# 全局安装的路径可以通过下面的命令修改
npm config set prefix "目录"
# 局部安装（将模块下载到当前命令行所在目录），不推荐
npm install 软件包名

四、配置Jenkins

1、安装NodeJS插件

主面板->系统管理->全局工具配置->插件管理->可选插件
安装NodeJs插件

2、新建任务

构建一个自由风格的软件项目

源码管理

仿照源码管理

构建触发器

仿照构建触发器

构建

# 安装package.json中指定的依赖项
cnpm install 
# 打包
cnpm run build
# 复制文件到Nginx配置文件指向位置
cd /var/lib/jenkins/workspace/hello-vue
cp dist/* -rf /usr/local/nginx/jenkins/www/hello-vue

五、参考鸣谢

Ubuntu 安装最新版nodejs
Ubuntu下使用nginx发布vue项目