前言
之前在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/ 来访问这个项目了.
