阿里云+宝塔上线vue+node+mysql项目

阿里云+宝塔上线vue+node+mysql项目

菜鸟前端一路摸坑在路上
新手上线详细过程
还有很多地方也在学习完善

首先购买阿里云服务器

阿里云+宝塔上线vue+node+mysql项目

重置阿里云实例密码

阿里云+宝塔上线vue+node+mysql项目

使用 Xshell 登录

阿里云+宝塔上线vue+node+mysql项目

阿里云+宝塔上线vue+node+mysql项目

进入宝塔官网

https://www.bt.cn/
选择linux面板
Centos安装脚本
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
复制在 xshell 运行安装宝塔,遇到 y/n 就输入y
安装成功:
阿里云+宝塔上线vue+node+mysql项目
这里需要用到8888接口,可以在阿里云进行添加(手动添加了这几个,其中这里的8000端口是我个人 node项目里面需要用到的,可以根据个人代码情况添加)
阿里云+宝塔上线vue+node+mysql项目
如需操作宝塔,可以在 xshell 输入bt,可以修改密码账号等
阿里云+宝塔上线vue+node+mysql项目

登录宝塔

安装成功的图上面,复制外网面板地址在浏览器打开,使用给的账号密码进行登录(如果在bt修改的,就用修改后的账号密码登录)
初次登录后,会弹出推荐安装套件,这里安装 LNMP,选择一键安装
阿里云+宝塔上线vue+node+mysql项目
等几分钟
阿里云+宝塔上线vue+node+mysql项目

在继续手动搜索 PM2 ,进行安装,这里等下用来管理 node 项目文件,直接在右侧点击安装即可
阿里云+宝塔上线vue+node+mysql项目
放行端口,此端口是自己 node 后台使用的端口,根据自己代码使用的端口进行放行
代码方面,记得把请求接口地址修改,把 localhost 改成自己 ip
阿里云+宝塔上线vue+node+mysql项目
添加站点,添加后,会以域名名字自动生成文件夹
阿里云+宝塔上线vue+node+mysql项目
添加后,即可从浏览器直接访问刚才添加的域名 / ip,访问的是新创建文件夹下的index.html
阿里云+宝塔上线vue+node+mysql项目
添加 mysql数据库,根据自己的本机的数据库名和密码(代码中连接数据库的号密)
阿里云+宝塔上线vue+node+mysql项目
导入sql文件,此时数据库表已经全部导入成功。如果需要验证,可以在xshell进行正常的mysql查询,确认是否导入数据成功
阿里云+宝塔上线vue+node+mysql项目

文件摆放

这个文件夹,就是添加站点后自动生成的文件夹
vue项目运行 npm run build 生成 dist 文件夹,直接把 dist 文件夹下面所有内容全部上传
back 文件夹是我存放 node 项目代码的地方,直接放在这里即可,后面会使用刚才安装的 pm2 运行
阿里云+宝塔上线vue+node+mysql项目
打开 nginx 管理(可从软件商店找到已下载,点击nginx配置进入),修改以下内容
阿里云+宝塔上线vue+node+mysql项目

使用 PM2 ,在已下载中打开,www 为 node 启动文件(根据自己项目进行调整,第一个是路径,第二个是启动文件名,第三个自定义都可以),这时候可以在浏览器测试接口是否能调用,或者使用 postman 进行测试,如果能拿到数据证明已经成功(记得修改上面开放端口提及过的前端代码,不然拿不到数据)
阿里云+宝塔上线vue+node+mysql项目

上线成功

直接在浏览器输入ip / 域名即可进入
很久之前乱写的博客demo(很丑)
阿里云+宝塔上线vue+node+mysql项目