vue前端项目上线配置

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