本地构建 + SSH 发布 node 项目
# 前言
本文主要介绍: 如何从零开始使用 Jpom 中的构建功能实现将 node(vue) 项目从仓库中构建并通过 ssh 方式发布到服务器中,再配置 nginx。
文中使用到的依赖环境版本仅供参考,实际使用中请根据业务情况来安装对应的版本
本文基于 2.8.4 版本讲解
# 需要准备的环境
- Jpom 服务端(安装 jpom 需要 java 环境)
- 服务端所在服务器需要 node 环境
- ssh 所在服务器需要 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
2
3
# 执行命令后控制台输出如下
# 第二步:安装 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
2
3
配置环境变量
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
2
3
4
# 第三步:重启服务器端
重启服务器端,由于在启动服务端后安装端 node 环境,所以需要重启服务端让 node 环境在服务端中生效
sh /home/jpom/server/Server.sh restart
1
# 第四步:在 ssh 所在到服务器安装 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
2
配置 nginx
vim /etc/nginx/nginx.conf
1
建议使用 include /etc/nginx/conf.d/*.conf
方式来授权给 Jpom 来管理 nginx 配置文件
启动 nginx
systemctl start nginx
1
# 第五步:初始化 Jpom 服务端和配置 ssh 信息
访问:http://IP:2122 这里 ip 请更换为您服务器中第实际 ip
如果无法访问请优先检查 Jpom 访问是否正常运行、服务端防火墙、云服务器的安全组规则等网络原因
# 初始化系统管理员
第一次使用系统需要设置一个系统管理员账号(系统管理员账号密码有强度要求,请安装提示设置。同时也请您牢记系统管理员账号)
# 在 Jpom 中添加 ssh 信息
注意这里一定要配置:文件目录,文件目录为授权允许在 Jpom 管理的文件夹,这里为后面构建发布会使用到
# 第六步:创建构建仓库、创建构建信息
- 添加仓库
- 添加构建信息
- 构建命令解释:
cd antdv && npm i && npm run build
由于仓库是多模块项目的仓库,首先需要切换到对应到目录(如果项目存在仓库根路径则不需要切换到对应的目录),如果执行对应到构建命令,由于 node 项目构建都需要装包这里先执行npm i
装包再执行npm run build
多条命令用 && 拼接是为了保证上一条命令执行成功才执行下一条 - 产物目录解释:
antdv/dist
由于当前项目存储到 antdv 目录中,构建完成将生成 dist 目录,那么这里需要填写:antdv/dist
,这里注意需要添加仓库路径下面到相对路径 - ssh/目录,是选择发布到哪个 ssh 中的哪个目录里面
- 发布命令为文件上传成功后执行的命令,示例中随意执行的一个命令,实际请根据业务情况修改
- 执行构建
- 第一次构建可能需要较长时间,是因为需要安装依赖包。加快构建速度也可以考虑修改镜像源地址
- 构建中请注意执行构建命令过程中是否发生错误信息影响到没有达到预期到构建结果(没有对应到构建产物)
# 第七步:配置 nginx 访问
- 查看文件是否上传成功
/home/web/testvue
2. - 配置 nginx
vim /etc/nginx/conf.d/default.conf
实际中请根据业务配置来变更配置路径和方式
# 第八步:愉快地使用前端项目
帮助我们改善此文档 (opens new window)
上次更新: 2022/11/25, 22:42:24