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版本,但是研究了下,可能自己功力不够还是什么,并不好用,中间还出现了错误:所以最后还是卸载了: 本文图文并茂的一步一步的 ...
随机推荐
- Github入门教程(新版)
GitHub 的介绍与使用 GitHub 注册一个账号 直接在首页注册即可啦 要注意的是 第一项 username 别人是可见的 后面修改也会比较麻烦,所以起个好名字很重要 个人主页介绍 刚注册好的页 ...
- 生成CSV文件的方法*(LIST集合为数据和生成的文件名)
/** * 生成csv文件 * @param pointsList 组织实体 * filename 生成的文件名 * list 要生成的数据 * @return */ public void Poin ...
- SSE图像算法优化系列三十一:RGB2HSL/RGB2HSV及HSL2RGB/HSV2RGB的指令集优化-上。
RGB和HSL/HSV颜色空间的相互转换在我们的图像处理中是有着非常广泛的应用的,无论是是图像调节,还是做一些肤色算法,HSL/HSV颜色空间都非常有用,他提供了RGB颜色空间不具有的一些独特的特性, ...
- 现代C++(Modern C++)基本用法实践:五、智能指针
概述 c++效率较高的一个原因是我们可以自己定制策略手动申请和释放内存,当然,也伴随着开发效率降低和内存泄漏的风险.为了减少手动管理内存带来的困扰,c++提出了智能指针,可以帮助我们进行内存管理,有三 ...
- Jenkins主从架构的实现
一.概要 提到K8S环境下的CI/CD,可以使用的工具有很多,比如Jenkins.Gitlab CI.新兴的drone等,考虑到大多公司在VM环境下都采用 Jenkins 集群来搭建符合需求的 CI/ ...
- DateTime和DateTimeOffset是同胞兄弟吗?
小编在日常开发中,用得最多的时间类型就是DateTime,直到一次偶然的邂逅,让小编遇见了DateTimeOffset.当时小编也是一脸迷茫,因为在小编的C#编程字典里就没出现过DateTimeOff ...
- Django: 'block' tag with name 'header' appears more than once
错误原因 在同一文件中,重复引用标签多次 解决方案: 删掉重复的标签即可.
- 记一次 .NET某报关系统 非托管泄露分析
一:背景 1. 讲故事 前段时间有位朋友找到我,说他的程序内存会出现暴涨,让我看下是怎么事情?而且还告诉我是在 Linux 环境下,说实话在Linux上分析.NET程序难度会很大,难度大的原因在于Li ...
- [ABC150F] Xor Shift
2023-03-10 题目 题目传送门 翻译 翻译 难度&重要性(1~10):6 题目来源 AtCoder 题目算法 KMP,Z函数 解题思路 首先是按位确定,令 \(t(i,j)\) 表示 ...
- Java Maven POM配置参考
介绍 什么是POM? POM代表"项目对象模型".它是一个名为pom.XML的文件中保存的Maven项目的XML表示. 快速概览 这是一个直接位于POM项目元素下的元素列表.请注意 ...