linux节点安装必要的前端项目环境

wangxun / 2024-02-24 / 原文

当前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 root@192.168.10.6:/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