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版本,但是研究了下,可能自己功力不够还是什么,并不好用,中间还出现了错误:所以最后还是卸载了: 本文图文并茂的一步一步的 ...
随机推荐
- 阿里云 MongoDB 创建库添加用户并授权
先通过 root 进到 admin 库, 右击test 选择用户管理 测试连接
- 实例讲解看nsenter带你“上帝视角”看网络
摘要:本文重点关注进入目标进程的"网络ns"视角,即站在「容器中的进程视角」看待容器里面的网络世界,并在那个视角中执行命令. 本文分享自华为云社区<<跟唐老师学习云网络 ...
- Android 自定义view中根据状态修改drawable图片
原文地址:Android 自定义view中根据状态修改drawable图片 - Stars-One的杂货小窝 本文涉及知识点: Android里的selector图片使用 底部导航栏的使用 自定义vi ...
- OC项目集成flutter后,编译卡死
oc项目集成flutter的项目,本来运行的好好的,突然就再Xcode编译就是卡死的情况, 先运行一下flutter的项目,再编译Xcode的项目,就好了
- 阿里云容蓓:DCDN 助力云原生时代的应用构建及最佳实践
在数字化转型速度不断提升的今天,大带宽.低时延.高并发的场景不断涌现,内容分发网络(Content Delivery Network,CDN)应用需求还在不断攀升,打造更高质量的CDN服务将成为新时代 ...
- 【调制解调】FM 调频
说明 学习数字信号处理算法时整理的学习笔记.同系列文章目录可见 <DSP 学习之路>目录,代码已上传到 Github - ModulationAndDemodulation.本篇介绍 FM ...
- 抽象语法树AST必知必会
1 介绍 AST 打开前端项目中的 package.json,会发现众多工具已经占据了我们开发日常的各个角落,例如 JavaScript 转译.CSS 预处理.代码压缩.ESLint.Prettier ...
- expect: telnet2switch
#!/usr/bin/expect if {$argc != 1} { puts "usage: ./telnet2sswitch <r2|r3>" exit } if ...
- 2021-7-12 VUE的生命周期
挂载: beforeCreate created beforeMount mounted:el挂载到实例上时运行 更新: beforeUpdate updated 销毁: beforeDestory ...
- Ubuntu新建Django工程错误:ModuleNotFoundError: No module named 'distutils.core'
ubuntu18.04 默认没有安装 pip ,需要安装 python3-pip,即可解决 1 sudo apt-get install python3-pip 在shell脚本中输入以下命令: 1 ...