需求:就是想把自己写的前后端项目传上去不再是只有本地可以访问,其他人也可以访问我这个项目,以此记录免得后面搞忘了,文章很长,也很细,我自己上线碰到的错误也会发一下,建议看完哦
1.首先买个服务器
因为我有学生特权,这边我就直接白嫖了一个月的免费服务器,一共可以领到7个月的,但是要考试= =,考过了才给你大无语啦,点下面连接就可以,阿里云腾讯云啥的都可以本质上一样
阿里云学生特权免费领7个月云服务器
学生服务器的话地区只有俩个,我这边选择的是河源的,其他的默认选项就行了。
买了之后----------------------点击右上角控制台
再点击左上角选择云服务器就可以看到自己买的服务器了
如果你不是学生但是第一次购买的话,直接选择右上角产品-云服务器ecs就可以了,如果是个人的话,建议这样选
注意!!!上面配置的账号密码,拿个文本记住了,在xshell配置的时候要用到
更改的如上图,其他的默认选项就行了,之后点击购买就行了,购买成功后------点击右上角进入控制台---点击左上角选择云服务器ecs,不会的看文章开头的流程图。点开后看到
点击实例后下图,就可以看到自己买的云服务器了,记住我打码的地方,之后复制公网ip地址,ip后面+(公)就是公网ip
2-下载Xshell,在xshell中下载宝塔
Xshell官网:NetSarang Homepage CN - NetSarang Websitehttps://www.xshell.com/zh/
之后随便填下账号密码,这个无所谓不限制的,填了就可以下载了,安装非常简单,什么都不需要配置。注意下下载的路径就行了,打开xshell,步骤如下
之后点击确认
3.使用xshell安装宝塔
复制第一个之后直接粘贴到上图#号的后面,右键选择粘贴--回车开始下载------弹出个选项直接选择y------如果还有选择----不动过几秒就会自动下载
宝塔面板下载,免费全能的服务器运维软件 (bt.cn)
宝塔安装完会显示如下,这我复制的啊,我这边外网面板地址是这样,serverip就是你自己的公网ip,直接把这替换就行了:建议把外网内网地址还有用户名密码都复制保存
外网面板地址: http://SERVE:IP:13762/awhe1
1----------打开外网地址,弹出,直接把上面的username和password的值复制进去就行了,进入后首先先注册个账号并且绑定,这个首页应该会有,先绑定不然之后还要验证什么的
第一次进去先出现弹窗,直接全部下载
4.在宝塔创建数据库,并且绑定本地数据库
注意下图,数据库名用户名密码都设置一样的,好改好配,访问权限设置所有人,设置utf-8格式-最后点击提交完成。
点击备份的导入按钮---弹窗-----点击从本地上传------点击选择文件------选择你的.sql数据库文件------点击上传----关闭第一个弹窗-------再点击导入------关闭弹窗-------测试导入成功没
点击工具,看导入成功没,没导入成功就没文件显示
5.本地数据库连接上宝塔的数据库,进行同步修改操作
连接上了就实现了同步修改了,就这么简单
6.开放端口-宝塔和阿里云都得开不然可能访问不到
宝塔的端口开放---开放8889和3306
阿里云开放端口-----如下图点击配置规则
优先级选择1就行了,最高优先级这是
7.后端项目上传宝塔
点击文件,找到wwwroot下的default文件,点击左边的上传------把打包好的后端文件上传好后-----在列表解压好后就是如下图了
1-------修改后端的接口地址改为公网的ip地址,我这边是config文件夹下的default.json文件的修改,如下打码的地址都改为公网的ip地址,端口号为8889,database和user,password全改为自己在宝塔上上传的数据库的账号密码
修改app.js文件监听端口号,改为8889端口号
8.下载pm2启动项目
菜单栏找到软件商店-搜索下载---下载完成后---打开首页显示switch
在首页的软件里面找到pm2,打开后添加项目
启动成功的话如下
8-使用postman测试接口是否请求成功
协议+公网ip+端口号8889,有响应就是请求成功了
注意!!!!有些项目请求的时候报错502问题,是后端项目没有写反向代理导致的,csdn搜索写一下就完事了
9.前端项目配置打包上传
1-先在宝塔添加站点
2-站点添加后点击文件-----找到wwwroot下就会发现多了个html文件夹
前端项目的默认请求地址改为公网的ip地址,其他的不变
使用npm run build开始打包---------
打包生成dist文件-------压缩dist文件-------把压缩好的dist文件上传到http的文件夹下--------解压dist文件-------点击dist文件后把里面的内容全部剪切到html的目录下,如下图
10.在网站上输入项目地址
地址为:http://公网ip
这边不需要域名了,直接公网ip就能访问到了
文章到此结束,希望对你所有帮助~~~