前言

之前在b站跟着学习写了前锋的<仿网易云音乐>uniapp项目 , 在这里记录一下H5版本的部署上线的过程. 这是该项目的b站链接:【千锋教育】前端项目_uni-app入门到实战项目之《仿网易云音乐》_哔哩哔哩_bilibili

一.后端

使用宝塔面板来部署

(1) 百度搜索宝塔面板, 复制安装脚本,我的云服务器的linux发行版是Centos ,复制第一个就可以.

(2) 使用Xshell终端工具连接云服务器.

连接成功之后, 输入刚刚复制的脚本安装宝塔面板.安装之后,会显示宝塔面板的登陆账号和密码

(按提示信息放行21150端口)

========================面板账户登录信息==========================

 外网面板地址: https://47.11.112.77:21150/630f3e3f
 内网面板地址: https://172.29.169.140:21150/630f3e3f
 username: n2dr5zuf
 password: 43741ej6
 
=========================打开面板前请看===========================

 【云服务器】请在安全组放行 21150 端口
 因默认启用自签证书https加密访问，浏览器将提示不安全
 点击【高级】-【继续访问】或【接受风险并继续】访问
 教程：https://www.bt.cn/bbs/thread-117246-1-1.html

(3)打开浏览器, url中输入上面的外网面板地址,根据给的username和password就可以进入宝塔面板,打开软件商店,下载PM2管理器和Nginx

(4) 网易云音乐的API是nodeJS项目, 先下载到本地. 然后压缩一下. 

(5)回到宝塔面板 , 进入文件 ,在此目录下新建一个目录netease存放后端api

上传压缩包后,解压

(6)打开软件商店,找到PM2管理器,切换nodeJS版本到12以上

再打开项目列表,添加一个项目,填入参数

提交之后就有另一个项目,也就是后端项目,端口默认是3000

(所以需要在云服务器安全组和宝塔面板中都放行3000这个端口)

这样我们就可以用ip地址:3000访问后端api了

二.前端

前端是uniapp项目

编写项目过程中,使用的是本地的api,但是现在要调用服务器上的api , 所以在部署之前一定要先修改调用api 的部分代码

(1)在manifest.json中配置好运行和基础路径和服务端口.

(2)发行

(3) 点完发行之后, 就会有生成h5目录. 

回到面板中找到Nginx的安装目录下的html目录 , 将h5目录上传到这里.

(4) 修改Nginx配置

主要是ip地址, 端口号,静态资源的位置

(5)打开网站,添加站点.

(6) 添加反向代理

点击设置

点击反向代理  添加反向代理    开启高级功能  填入参数  

这样我们在访问/netease时,就可以转发到对888端口的访问 . 

这样我们就可以在浏览器输入  bluecat.fit/netease/ 来访问这个项目了.