Nodejs环境打包前端项目
Node.js 在Linux下安装和环境搭建/编译项目
安装nodejs:
1.下载nodejs源码包
wget https://nodejs.org/dist/v14.16.0/node-v14.16.0-linux-x64.tar.xz
#wget https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v10.5.0/node-v10.5.0-linux-x64.tar.xz
2.解压
xz -d node-v14.16.0-liunx-x64.tar.xz / tar -xzvf node-v14.16.0-liunx-x64.tar.gz
tar -xvf node-v6.10.3-liunx-x64.tar
3.创建软连接
mv node-v14.16.0-liunx-x64 /usr/local/nodejs
ln -s /usr/local/nodejs/bin/node /usr/local/bin/node
ln -s /usr/local/nodejs/bin/npm /usr/local/bin/npm
4.查看nodejs环境是否安装成功
node -v
npm -v
5.安装cnpm 使用淘宝源
npm install -g cnpm --registry=https://registry.npm.taobao.org
rm -rf /usr/local/bin/cnpm
ln -s /usr/local/nodejs/lib/node_modules/cnpm/bin/cnpm /usr/local/bin/cnpm
cnpm -v
编译项目:
需要先下载前端项目源代码/ 然后进入项目代码目录
# 例如:
git clone http://192.168.16.20/tiptop-statement/web-client.git cd web-clent
安装项目所需依赖
cnpm install
项目打包
# fef test
cnpm run build
如果打包过程中,fef命令无法使用,做如下操作:
注: 这里打包项目 需要fef命令,因为手动安装容易失败,所以上传我编译好的nodejs目录文件包。
解压到/root/家目录下 并且设置软连接:
find / -name feflow
ln -s /root/.npm-global/lib/node_modules/@feflow/cli/bin/feflow /usr/local/bin/fef
# 生效变量
source /root/.bashrc
项目打包完成后,会额外生成一个文件夹 dist 。 主要将文件夹中的内容拷贝到nginx或者httpd的发布目录下即可。
例如是nginx
# 先备份原来的项目代码
tar czf web.tar.gz /usr/local/nginx/html/* /data/backup/ # 拷贝打包好的项目代码到nginx发布目录
cp -r dist/* /usr/local/nginx/html/
Jenkins配合shell脚本案例
case $Status in
Deploy)
{
echo "Status:$Status"
echo "version:$BUILD_NUMBER"
NPM_PATH="/usr/local/bin/cnpm"
FEF_PATH="/usr/local/fef_test/bin/fef"
BACKUP_PATH="/backup/batar-entrance-guard/entrance-guard-web"
PROJECT_FILE="/project/batar-entrance-guard/entrance-guard-web/dist"
cd $WORKSPACE
source /home/batar-exam/.bashrc
sudo $NPM_PATH install
/usr/local/fef_test/bin/fef test
if [[ -d ${PROJECT_FILE} ]];then
rm -rf $PROJECT_FILE
fi
cp -rf $WORKSPACE/dist $PROJECT_FILE
#备份项目文件
cp -rf $WORKSPACE/dist $BACKUP_PATH/$BUILD_NUMBER-dist
}
;;
Rollback)
{
echo "Status:$Status"
echo "version:$Version"
BACKUP_PATH="/backup/batar-entrance-guard/entrance-guard-web"
PROJECT_FILE="/project/batar-entrance-guard/entrance-guard-web/dist"
if [[ -d ${PROJECT_FILE} ]];then
rm -rf $PROJECT_FILE
fi
cp -rf $BACKUP_PATH/$Version-dist $PROJECT_FILE
}
;;
*)
exit
;;
esac
Nodejs环境打包前端项目的更多相关文章
- npm打包前端项目太慢问题分析以及暂时解决方案
npm build 打包前端项目实际上是执行 node build/build.js,但是随着项目的依赖包越来越多,项目打包时间不断延长,为了改善这个问题,需要从node入手 暂时解决方案:扩大nod ...
- jenkins打包前端项目报 error: index-pack died of signal 15 问题解决
jenkins打包前端项目报 error: index-pack died of signal 15 问题解决 前几天用jenkins打包一个前端项目的时候出现了 error: index-pack ...
- Angular企业级开发(6)-使用Gulp构建和打包前端项目
1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...
- 如何使用webpack打包前端项目
webpack概述 随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而 webpack就是用于将前端各种文件打包起来. 一个简单的webpack应该包含以下几个概念 · 入口起点 · ...
- Docker + webpack 打包前端项目
码云代码地址: https://gitee.com/caonimashi/docker_deployment_front_end 构建基础镜像: 1.下载一个 Apline Linux 操作系统 ...
- Github配合Jenkins,实现vue等前端项目的自动构建与发布
本篇文章前端项目以vue为例(其实前端工程化项目的操作方法都相同),部署在Linux系统上(centos). 之前做前端项目的部署,一直都是手动运行打包命令,打包完.再使用FTP.Xshell等这类的 ...
- Docker+Jenkins持续集成环境(2)使用docker+jenkins构建nodejs前端项目
前文使用Docker搭建Jenkins+Docker持续集成环境我们已经搭建了基于docker+jenkins的持续集成环境,并构建了基于maven的项目.这一节,我们继续扩展功能,增加对Nodejs ...
- Jenkins结合shell脚本实现(gitLab/gitHub)前端项目自动打包部署服务器
原始发布部署: 石器时代的我们,先是本地打包好项目,在去服务器上把原来的文件删了,然后回到本地copy到服务器: 这操看起来简单,实际部署的人就知道多烦了,假如来几个项目都要重新发布:那就爽了: 今天 ...
- 前端项目模块化的实践2:使用 Webpack 打包基础设施代码
以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript ...
- nodejs解压版安装和配置(带有搭建前端项目脚手架)
nodejs 安装 我先前用了nvm,觉得nvm挺厉害可以随时更换nodejs版本,但是研究了下,可能自己功力不够还是什么,并不好用,中间还出现了错误:所以最后还是卸载了: 本文图文并茂的一步一步的 ...
随机推荐
- 我和ChatGPT聊数字人
近期,聊天机器人ChatGPT火了,写诗写文写代码,才艺狠狠拉满. 面对如此"会聊"的ChatGPT,很多人好奇相同的问题提问ChatGPT和真人,会有什么样的结果? 于是我们 ...
- 详解在Linux中修改Tomcat使用的jdk版本
问题分析 由于部署个人项目使用了openjdk11,但是我之前安装的是jdk1.8,jdk版本升级的后果就是,tomcat运行的时候报一点小bug(因为之前安装tomcat默认使用了系统的jdk版本) ...
- Redis的设计与实现(6)-压缩列表
压缩列表 (ziplist) 是列表键和哈希键的底层实现之一. 当一个列表键只包含少量列表项, 并且每个列表项要么就是小整数值, 要么就是长度比较短的字符串, 那么 Redis 就会使用压缩列表来做列 ...
- 痞子衡嵌入式:恩智浦i.MX RT1xxx系列MCU启动那些事(10)- 从Serial NAND启动
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MXRT1xxx系列MCU的Serial NAND启动. 最近越来越多的客户在咨询 i.MXRT1xxx 从 Serial N ...
- DNS与CDN技术
参考链接: CDN原理简单介绍 浅析:DNS解析和CDN加速 DNS报文格式解析
- 何为DDD
从这一刻开始,请大家忘记自己是一名技术人员,用业务的角度来思考问题. 1.什么是DDD DDD(Domain-driven design,领域驱动设计),是一个很好的应用于微服务架构的方法论 DDD要 ...
- Linux-用户管理命令(必须是超级管理员-root)
useradd [名字] 创建一个新用户 (home 下创建) useradd -d [路径][名字] 路径中的名字是文件 , 登录用的后面的名字 passwd [用户名] 设置密码, ...
- bash: pip3:未找到命令
输入以下命令: 1 sudo apt-get install python3-pip 参考链接: https://www.cnblogs.com/banshaohuan/p/10963547.html
- [minio]简介与安装
简介 MinIO是一款高性能的分布式对象存储系统. 官网地址 特性 轻便 高性能 跨平台 高扩展性 云原生支持 兼容Amazon S3 基本概念 s3:simple storage service,简 ...
- struct(C# 参考)
struct 类型是一种值类型,通常用来封装小型相关变量组,例如,矩形的坐标或库存商品的特征. 下面的示例显示了一个简单的结构声明. 1 public struct Book 2 { 3 public ...