本地构建 + 项目发布 node 项目

# 前言

本文主要介绍：如何从零开始使用 Jpom 中的构建功能实现将 node(vue) 项目从仓库中构建并发布到节点项目中并通过 Jpom 配置 nginx。

本文中服务端和插件端是安装在同一个服务器中的，实际操作时根据业务情况来安装

文中使用到的依赖环境版本仅供参考，实际使用中请根据业务情况来安装对应的版本

本文基于 2.8.4 版本讲解

# 需要准备的环境

Jpom 服务端、Jpom 插件端（安装 jpom 需要 java 环境）
服务端所在服务器需要 node 环境
插件端所在服务器需要 nginx 环境

# 操作步骤

# 第一步：安装 Jpom 服务端

目前安装 Jpom 服务端的方式有：一键安装、下载安装、编译打包安装、docker 安装，建议按照自己熟悉的方式来安装

教程中使用一键安装的命令安装服务端

mkdir -p /home/jpom/server && cd /home/jpom/server
# 这里我们选择快速安装 jdk 实际中请根据自己情况选择
yum install -y wget && wget -O install.sh https://jpom.top/docs/install.sh && bash install.sh Server jdk

1
2
3

# 执行命令后控制台输出如下

install1 install2 install3 install4

# 第二步：安装 node 环境

安装 node 环境、这里演示中我们使用 node 16.13.1 版本（项目实际依赖版本请根据业务情况调整）

https://oss.npmmirror.com/dist/node/v16.13.1/node-v16.13.1-linux-x64.tar.gz

下载安装

wget -O node-v16.13.1-linux-x64.tar.gz https://oss.npmmirror.com/dist/node/v16.13.1/node-v16.13.1-linux-x64.tar.gz

mkdir -p /usr/node/ && tar -zxf node-v16.13.1-linux-x64.tar.gz  -C /usr/node/

1
2
3

node1

配置环境变量

echo '# node '>>/etc/profile
echo 'export NODE_HOME=/usr/node/node-v16.13.1-linux-x64'>>/etc/profile
echo 'export PATH=$NODE_HOME/bin:$PATH'>>/etc/profile
source /etc/profile

1
2
3
4

如构建遇到错误提示/bin/bash: npm: command not found，可以执行如下命令建立软连接 ln -s /usr/node/node-v16.13.1-linux-x64/bin/node /usr/local/bin/node ln -s /usr/node/node-v16.13.1-linux-x64/bin/npm /usr/local/bin/npm

# 第三步：重启服务器端

重启服务器端，由于在启动服务端后安装端 node 环境，所以需要重启服务端让 node 环境在服务端中生效

bash /home/jpom/server/Server.sh restart

# 第四步：安装 Jpom 插件端

目前安装 Jpom 插件端的方式有：一键安装、下载安装、编译打包安装，建议按照自己熟悉的方式来安装

教程中使用一键安装的命令安装插件端

mkdir -p /home/jpom/agent && cd /home/jpom/agent
# 这里我们选择快速安装 jdk 实际中请根据自己情况选择
yum install -y wget && wget -O install.sh https://jpom.top/docs/install.sh && bash install.sh Agent jdk

1
2
3

agent1 agent2

图 2 中圈出来第为插件端的账号密码

# 第五步：安装 nginx 环境

教程中使用 centos7 rpm 方式安装，实际中可以根据环境情况安装(如果是编译安装则需要)

rpm -ivh https://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
yum install -y nginx

1
2

配置 nginx

vim /etc/nginx/nginx.conf

建议使用 include /etc/nginx/conf.d/*.conf 方式来授权给 Jpom 来管理 nginx 配置文件

启动 nginx

systemctl start nginx

# 第六步：初始化 Jpom 服务端和插件端

访问：http://IP:2122 这里 ip 请更换为您服务器中第实际 ip

如果无法访问请优先检查 Jpom 访问是否正常运行、服务端防火墙、云服务器的安全组规则等网络原因

# 初始化系统管理员

第一次使用系统需要设置一个系统管理员账号（系统管理员账号密码有强度要求，请安装提示设置。同时也请您牢记系统管理员账号）

install-user1 install-user2

# 添加 Jpom 节点

节点列表还没有任何节点，我们需要将我们之前安装等插件端添加到服务端中来

node-list1

add-node

add-node2

图 3 中的节点密码为上面步骤中第四步中安装并启动插件端后控制台输出第账号和密码

# 第七步：配置节点信息、创建节点项目

进入节点管理
配置授权（白名单）信息
3. 注意这里的项目路径是指，咋们节点项目允许所在的文件夹路径、nginx 路径是指咋们允许在线编辑的 nginx 配置文件的文件夹路径
4. nginx 配置建议使用 include /etc/nginx/conf.d/*.conf 来管理
进入项目列表
创建 File 类型项目

# 第八步：创建构建仓库、创建构建信息

添加仓库
添加构建信息
4. 构建命令解释：cd antdv && npm i && npm run build 由于仓库是多模块项目的仓库，首先需要切换到对应到目录（如果项目存在仓库根路径则不需要切换到对应的目录），如果执行对应到构建命令，由于 node 项目构建都需要装包这里先执行 npm i装包再执行 npm run build 多条命令用 && 拼接是为了保证上一条命令执行成功才执行下一条
5. 产物目录解释：antdv/dist 由于当前项目存储到 antdv 目录中，构建完成将生成 dist 目录，那么这里需要填写：antdv/dist，这里注意需要添加仓库路径下面到相对路径
执行构建
1. 第一次构建可能需要较长时间，是因为需要安装依赖包。加快构建速度也可以考虑修改镜像源地址
2. 构建中请注意执行构建命令过程中是否发生错误信息影响到没有达到预期到构建结果（没有对应到构建产物）