当前linux(centos7)服务器节点用于部署前端项目
step1: 安装Nodejs
- 将node的安装包,例如:node-v12.16.3-linux-x64.tar.xz 上传至服务器的root目录下
tips: 借助git bash的scp命令上传本地文件至服务器
scp ./node-v12.16.3-linux-x64.tar.xz [email protected]:/root/
- 在/usr/local下新建node目录, 并将node的压缩包解压到 /usr/local/node 目录下
cd /usr/local
mkdir node
cd node
tar -xvf /root/node-v12.16.3-linux-x64.tar.xz -C ./
- 编辑 ~/.bash_profile, 追加如下配置Node环境变量的内容至文件末
# Nodejs
export PATH=/usr/local/node/node-v12.16.3-linux-x64/bin:$PATH
- 刷新环境变量并验证Node环境变量的配置
source ~/.bash_profile
node -v
npm version
npx -v
- 将前端项目源码压缩上传至服务器(本地打包好上传压缩的dist也可)
tips1: 前端项目压缩上传是为了防止一些隐藏文件丢失
tips2: 服务器端解压上传的rar压缩包
# 安装unar
yum install epel-release -y
yum install unar -y
# 解压文件到当前目录
unar example.rar
# 带密码解压
unar -p 123456 example.rar
tips3: npm安装前端项目依赖时报错:request to https://registry.npm.taobao.org failed, reason certificate has expired,原因是原先的淘宝镜像过期,需要更新npm镜像源
# 清缓存
npm cache clean --force
# 设置新镜像源
npm config set registry https://registry.npmmirror.com
# 检测新配置
npm config list
# 进入前端项目根路径,并安装前端项目依赖
npm i --unsafe-perm
# 打包得到dist
npm run build
tips4: 将dist文件夹的路径配置到nginx中,使得客户端浏览器可以访问到前端项目
step2:安装nginx
- 将nginx的安装包: nginx-1.17.10.tar.gz 上传至服务器的/root/下
- 在/usr/local/下新建nginx目录并进入该文件夹
- 将安装包解压至nginx目录
tar -xzvf /root/nginx-1.17.10.tar.gz -C ./
- 预先安装额外的依赖并编译安装nginx
yum -y install pcre-devel
yum -y install openssl openssl-devel
cd nginx-1.17.10
./configure
make && make install
tips: 安装完nginx之后,nginx的可执行文件位于/usr/local/nginx/sbin/nginx
- nginx的常用命令
# 启动nginx
/usr/local/nginx/sbin/nginx
# 停止nginx
/usr/local/nginx/sbin/nginx -s stop
# 修改了nginx配置后重新加载nginx
/usr/local/nginx/sbin/nginx -s reload
tips1: nginx配置文件位于 /usr/local/nginx/conf/nginx.conf
tips2: 通过客户端浏览器访问nginx服务器验证是否将nginx配置成功时,若访问失败,需检查nginx所在服务器的防火墙端口是否开放
# nginx是否启动
ps -aux | grep nginx
# 防火墙开放端口
firewall-cmd --zone=public --add-port=待开放的端口号/tcp --permanent
# 重启防火墙
systemctl restart firewalld.service
- 通过客户端浏览器访问nginx所在服务器,验证nginx是否安装成功