如何部署一个前端项目？

下载node.js

进入node.js官网找到源码链接，各种版本在如下链接都能找到
​​​https://nodejs.org/download/release/​​

wget

解压

tar -xvf node-v10.15.3-linux-x64.tar.gz
mkdir /usr/local/node
mv

配置环境变量

vim /etc/profile

/etc/profile中加入

export NODE_HOME=/usr/local/node/node-v10.15.3-linux-x64
export PATH=$PATH:$JAVA_HOME/bin:$MAVEN_HOME/bin:$NODE_HOME/bin

source

配置成功，下面命令成功输入版本

node -v

下载webpack

不用安装全局的也行，项目下安装了webpack也行
优先级为 项目下的webpack > 全局webpack

npm install webpack -g --registry=https://registry.npm.taobao.org

成功输出版本号则安装成功

webpack -v

下载git

cenos下的命令为

yum install git

生成公钥

ssh-keygen -t rsa -C '[e-mail]'

将生成的公钥放到git仓库即可

cat

下载项目并初始化

git clone 项目地址
## 进入项目目录下
npm install --registory=https://registry.npm.taobao.org

我在package.json中作了别名

"scripts": {
  "dev": "WEBPACK_ENV=dev webpack-dev-server --inline --port 8088",
  "dev_win": "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088",
  "dist": "WEBPACK_ENV=online webpack -p",
  "dist_win": "set WEBPACK_ENV=online && webpack -p"
}

打包，成功后会有一个dist文件夹

npm

写发布脚本

#!/bin/sh

GIT_HOME=/usr/local/product/git-repository/
DEST_PATH=/root/product/

if [ ! -n "$1" ];
  then 
  echo -e "请输入要发布的项目"
  exit
fi

if [ $1 = "new-blog-fe" ];
  then
  echo -e "=====Enter new-blog-fe====="
  cd $GIT_HOME$1
else
  echo -e "输入的项目名没有找到!"
  exit
fi

# clear git dist
echo -e "=====Clear Git Dist====="
rm -rf ./dist

# git操作
echo -e "=====git checkout master====="
git checkout master

echo -e "=====git pull====="
git pull

echo -e "=====npm install====="
npm install --registry=https://registry.npm.taobao.org


echo -e "=====npm run dist====="
npm run dist

if [ -d "./dist" ];
  then
  # backup dest
  echo -e "=====dest backup====="
  mv $DEST_PATH$1/dist $DEST_PATH$1/dist.bak
  
  # copy
  echo -e "=====copy====="
  cp -R ./dist $DEST_PATH$1
  
  # echo result
  echo -e "=====Deploy Success====="
else
  echo -e "=====Deploy Error====="
fi

部署命令配置别名

/etc/profile加上如下

alias dpblog-fe='/root/product/fe-deploy.sh new-blog-fe'

命令行中执行dpblog-fe即可

参考博客

[1]