vue前端项目上线配置

1.准备云服务器

  • 建议使用阿里云、腾讯云、华为云、百度云
  • 自行官网购买或新人免费体验

2. 工具安装

  • xShell(远程连接工具)
  • 新建会话
  • 主机：服务器公网IP，验证用户、密码
  • 完成连接
  • xFTP(文件传输工具)

3. 服务器nodejs安装

  • 在nodejs官网（https://nodejs.org/en/）找到对应版本，复制下载路径
  • 在xShell远程控制台输入：
# mkdir /data/tools	// 新建文件目录，保存安装包
# cd /data/tools		// 打开目录
# wget 下载路径		// 下载安装包，wget命令根据url下载文件
# ls					// ls命令查看目录下文件，查看是否下载成功

# xz -d node-v16.14.2-linux-x64.tar.xz	//解压xz
# tar xf node-v16.14.2-linux-x64.tar	// 解压tar
# mv node-v16.14.2-linux-x64 /usr/local/node	// 移动到/usr/local/node，nodejs的存放目录，用于配置环境变量
  • 配置环境变量
# vi /etc/profile	// 编辑profile文件，vi是编辑器，按 i 进去插入状态，在最后插入环境变量配置，按ESC退出插入状态，输入 :wq 保存并退出vi编辑器
# source /etc/profile	// 更新文件
环境变量配置
export NODE_HOME=/usr/local/node		// 新建一个环境变量NODEJS，值为nodejs解压后的存放目录
export PATH=$PATH:$NODE_HOME/bin		// 建立路径
  • 验证成功
# node -v	// 查看版本号
# npm -v	// 有版本号就成功了
  • 安装nrm：npm源管理器，快速切换源地址
# npm i -g nrm	// 全局安装nrm
# nrm -V	// 查看安装成功
# nrm ls	// 查看所有镜像源地址

  npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/
# nrm test // 测试地址的延迟
* npm ------ 726ms
  yarn ----- 1188ms
  tencent -- 970ms
  cnpm ----- 1151ms
  taobao --- 311ms
  npmMirror - 4912ms
# nrm use taobao	// 使用延迟较小的taobao镜像源
  Registry has been set to: https://registry.npmmirror.com/

4.部署nodejs后端

  • 新建项目存放地址
# cd /usr/local
# mkdir serve	// 在/usr/local下新建serve文件夹，用来存放后端项目文件
  • 文件传输
  • 将项目打包（不要打包node_modules文件夹，将其与文件全部打包）
  • 利用xFTP将压缩包传输到/usr/local/serve
  • 解压文件
# ls
NeteaseCloudMusicApi.zip
# unzip NeteaseCloudMusicApi.zip
  • 安装依赖
# npm i
  • 启动服务
# node app.js
  • 全局安装pm2
# npm -g pm2
  # pm2 start // 启动服务
  # PM2 list  // 查看服务列表
  # PM2 delete id // 断开服务

5.安装nginx

  • 安装所需插件
  • gcc （安装前查看有没有：gcc -v）
# yum -y install gcc
  • pcre、pcre-devel (（安装前查看有没有)
# yum -y install pcre  pcre-devel
  • zlib
# yum install -y zlib zlib-devel
  • openssl
# yum install -y openssl openssl-devel
  • 下载nginx
# wget https://nginx.org/download/nginx-1.20.2.tar.gz
  • 安装
# cd /usr/local
# mkdir nginx
# cd nginx
# tar -zxvf  nginx-1.20.2.tar.gz
#ls
conf  html  logs  nginx-1.20.2  nginx-1.20.2.tar.gz  sbin
  • 激活
# cd nginx-1.20.2
# ./configure
# make
# make install
  • 启动
# cd /usr/local/nginx/sbin
# ./nginx
  • 修改配置文件
# cd /usr/local/nginx/conf
# vi nginx.conf

6.部署vue前端

  • 打包前端项目，生成dist文件夹，打包dist文件夹为dist.zip
  • 创建根目录
# cd /usr/local/nginx
# mkdir rootfile
  • 修改nginx的配置文件，将root路径设置为我们自己创建的根路径，http端口默认为80
# vi /usr/local/nginx/conf/nginx.conf
  • 将dist.zip利用xFTP上传到创建的根目录，并解压

7. 可能遇到的问题

  • 访问失败：后端启动的接口没有在云服务器开启
  • nginx服务开启不了：80端口被占用

已上线项目分享

  • 前端
  • github:https://github.com/LLtaishuai/cloudmusic.git
  • 后端
  • github:https://github.com/Binaryify/NeteaseCloudMusicApi.git
  • 线上地址
  • IP: http://101.35.207.17