使用宝塔面板部署node项目、数据库及react项目
1.前置预备a.数据库文件 .sql文件
没有的可以参考我的:
链接: https://pan.baidu.com/s/1l23nNmkSt4JtQ7aRqPgpZw 提取码: 6d64 复制这段内容后打开百度网盘手机App，操纵更方便哦
b.完整的node项目
没有的可以参考我的：https://github.com/rui-rui-an/hkzf_node
c.react项目/vue项目
没有可以参考我的：https://github.com/rui-rui-an/cityRent
d.前置知识：知道怎么安装宝塔，不懂怎么在服务器上安装宝塔的可以看我这篇文章
e.已经有云服务器且安装了宝塔，不懂的可以看这篇文章
2.使用宝塔面板建数据库
a.打开宝塔面板的数据库
https://i-blog.csdnimg.cn/blog_migrate/2cd71aadfc9c79a3fe8711d16dbe2d38.png
b.添加数据库
https://i-blog.csdnimg.cn/blog_migrate/30f938a7953c9242eff8cb66f9aa9048.png
tips：注意这里的访问权限要打开，不然你本地去连线上数据库时连不上
这里建立的数据库要与你的node项目中的完全一致
https://i-blog.csdnimg.cn/blog_migrate/125f8317187b1673e1a9036d61f79e27.png
c.可选步骤（sql文件过大时(大于50mb)需要设置，否则会导入不乐成）
到软件商店里去设置php
https://i-blog.csdnimg.cn/blog_migrate/44a89e41803088ff8fee212a70fb416d.png
把下面4个都选择成500
https://i-blog.csdnimg.cn/blog_migrate/93b1f7e6fab12fab8e0a4681b3634c55.png
重启php
https://i-blog.csdnimg.cn/blog_migrate/f562b562b8511c462fce59b2b5b0fbf9.png
d.导入hkzf.sql文件
点击管理
https://i-blog.csdnimg.cn/blog_migrate/9ff312df4d49bab6957185e808e53bdd.png
这里的密码就是你刚才设置的
https://i-blog.csdnimg.cn/blog_migrate/fa46912e6032151ed4a0a1817d799de1.png
上传sql文件
https://i-blog.csdnimg.cn/blog_migrate/d6ed51eb59da2a9a4d318e09fa89aebe.png
如果你的数据库表里有数据，那么就是正确的
https://i-blog.csdnimg.cn/blog_migrate/f891b443f040cde24c0b5e1d8de85f6c.png
e.开放端口
这里特别要注意，需要开放两个地方的端口
1.需要开放宝塔面板的3306端口
https://i-blog.csdnimg.cn/blog_migrate/ca8cd6c3e4397c8417126901ccd47525.png
2.需要把阿里云安全组的3306端口开放
https://i-blog.csdnimg.cn/blog_migrate/5633242214795c3a77d9fb643e2082b9.png
f.修改node项目host地址，检验线上数据库是否部署乐成
https://i-blog.csdnimg.cn/blog_migrate/687d8643a14eb50080b5196edc53c916.png
tips:这里的ip地址不要带有http!!!
运行node项目，能正常访问就说明我们线上的数据库部署乐成了！
https://i-blog.csdnimg.cn/blog_migrate/a06ea1204fd77d185f29296f97a795de.png
2.部署node项目
a.新建文件夹并将node项目（不需要打包）放到该文件夹下
https://i-blog.csdnimg.cn/blog_migrate/82dfd70e201b8f7deaafbfa33a45be97.png
将我们的node项目中的node_modules删除掉，然后再压缩，把这个压缩包上传上去，再解压，然后删除这个安装包即可
https://i-blog.csdnimg.cn/blog_migrate/cd0cdc1d55e1e46c629c641d09633a21.png
上传：
https://i-blog.csdnimg.cn/blog_migrate/3e13cdb86e0e813c36aaa546f88093d2.png
解压：
https://i-blog.csdnimg.cn/blog_migrate/196e6789729e0ce04fa4ecdea17164f6.png
最后删除zip文件
https://i-blog.csdnimg.cn/blog_migrate/ae834ca5a6f077ba28b3e52cdecb5964.png
b.开启宝塔面包中node项目标服务
到网站的node项目中去，安装node版本管理器
https://i-blog.csdnimg.cn/blog_migrate/1833a9e207bee7bfdd24b32f5b0672fd.png
接着会提示你安装node,npm（node版本的选择看你的项目），同时它也会自动安装pm2
https://i-blog.csdnimg.cn/blog_migrate/7c28e7e94b5bfdbe3ab7934c19630177.png
c.将我们的node项目文件放到node服务中
点击添加node项目，选择项目路径
https://i-blog.csdnimg.cn/blog_migrate/600769c546773b53177f8a2be63cda52.png
tips：
项目目录：选择刚才a步骤的文件夹
项目名称和启动选项：会在你选了项目目录之后自动带入进去
项目端口号：很重要，这边我会表明的多一点！！！！！！！！！！这个要与你node项目中配置的端口号一致！！！后面去访问接口也是使用这个端口号！！
这个项目端口号可以随便填，但是肯定要与node项目中配置的端口号一致，并且与vue项目中axios的base_url（项目基地址）的端口号一致，并且整个vue项目中的地址，你都是使用的base_url变量，而不是写死的常量。有一个不一致，都会导致网络请求错误。
（下图是我的node项目中的端口号，没写8080是由于我这个服务器的8080端口已经被另一个项目使用了，肯定要注意不要和前端项目使用同一个端口，会导致端口占用！！！）
https://i-blog.csdnimg.cn/blog_migrate/751c5f896a60f8bd275f0e45d7e0d74f.png
（vue项目标生产情况base_usl配置）
https://i-blog.csdnimg.cn/blog_migrate/3deab3270855238b2f0fe34004d6a46b.png
（封装的axios中的baseURL（项目基地址）使用的也是这个）
https://i-blog.csdnimg.cn/blog_migrate/ca6da9265c7cc2429635853eb3e894b8.png
https://i-blog.csdnimg.cn/blog_migrate/89366a3d5e67f690e7d0327e7433c2a1.png
（平常的vue项目访问的图片和接口肯定要用base_url，否则会出现请求错误的情况，我部署的时间就出现了，接口访问出错，找了很久，发现是vue项目内里写死了！！！）
https://i-blog.csdnimg.cn/blog_migrate/5d71aedd882e400b2fd4b0c6aaed4689.png
（这里的图片也是，不能使用写死的）
https://i-blog.csdnimg.cn/blog_migrate/aebe0ac7fdc0491693a5df9bc1b1a085.png
d.开放接口端口
这里特别要注意，需要开放两个地方的端口
1.开放宝塔面板的9999端口
https://i-blog.csdnimg.cn/blog_migrate/07e01507ed8366b4446c79ba26a87d27.png
2.开放阿里云的安全组9999端口
https://i-blog.csdnimg.cn/blog_migrate/4f6468bb3f7301c11db436a56fb6ff3f.png
e.测试项目接口
这里我使用的是在线的postman测试的
https://i-blog.csdnimg.cn/blog_migrate/730b41956cb6cd02cead40e86a995f7d.png
接口测试的没问题，那么说明我们的node项目已经在服务器上跑起来了
3.部署vue项目
a.修改线上情况的ip和端口
https://i-blog.csdnimg.cn/blog_migrate/da899567356deb88e6b8ef2a598c59be.png
b.检查项目中有没有写死的地址，如果有，替换成变量process.env.REACT_APP_URL
https://i-blog.csdnimg.cn/blog_migrate/cdc3804726892535965b05ecde414e8d.png
c.打包
https://i-blog.csdnimg.cn/blog_migrate/691da2229946e7651f501d5f11968a8e.png
d.到宝塔面板的网站中建立站点
https://i-blog.csdnimg.cn/blog_migrate/6a4a280fe1b3dabd4fc88efc1292ff8b.png
tips:这里的域名随便填一个（后面还要删掉），主要是为了创建第三行的目录
e.把打包好的vue项目文件上传到上面一步生成的目录hkzf.com中
删除没有效的文件
https://i-blog.csdnimg.cn/blog_migrate/d02a61a4da4f354200e26562f5063ac1.png
将打包好的vue项目文件传到该目录下
https://i-blog.csdnimg.cn/blog_migrate/6f36a2dbe18dd01da27a26107ea14dd9.png
f.设置真正的域名并删除刚才的域名https://i-blog.csdnimg.cn/blog_migrate/b28bc1838e83f80e9e332d59ebfd4cb3.png
设置真正的域名（我这里使用的是ip访问，由于我这里已经有一个项目使用的是8080端口，以是我这里使用6666的端口号，如果你们是第一次，那么直接写ip即可。）
注意：这里填写的是你真正可以访问的域名大概ip
https://i-blog.csdnimg.cn/blog_migrate/206838e9499bf84318c8bd9b0a67ba2c.png
删除刚才的hkzf.com域名（缘故原由是我没有买这个域名，以是这个域名没用，这个域名的作用其实就是充当文件夹的名字，好在宝塔面板的列表中知道你是哪个网站）
https://i-blog.csdnimg.cn/blog_migrate/c6849b28e5df31bff6159ee335083690.png
g.开放端口
注意：要同时开放宝塔面板的防火墙端口和阿里云安全组端口
1.开放宝塔面板的防火墙端口
https://i-blog.csdnimg.cn/blog_migrate/98d3254d8d2becddfe89dd1ed060591c.png
2.开放阿里云安全组端口
https://i-blog.csdnimg.cn/blog_migrate/875c67d3311fbbfaa3193354395ad8a7.png
h.检查前端项目是否部署上去
在浏览器中输入刚才填写的真正域名120.76.176.237:6666,访问乐成说明已经乐成部署上去了。(这里还有个小问题，就是刷新会404not found)
https://i-blog.csdnimg.cn/blog_migrate/f48a0370e609823b285b27f0d99c1b56.png
i.办理history路由，刷新页面404的问题
点击设置-配置文件-加入以下代码并生存
location / {
try_files $uri $uri/ /index.html;
}
https://i-blog.csdnimg.cn/blog_migrate/7b55b67ed75670bcf07988b078bf31ca.png
到此，你的项目已经全部部署到服务器中了，你就可以把你的网站发给别人进行浏览了
参考链接
1.宝塔-如何部署自己的nodejs项目并跑起来：https://blog.csdn.net/Leijiang0504/article/details/129620483
2.宝塔-上传sql文件被限定
https://www.ewbang.com/community/article/details/961696273.html
3.宝塔-部署vue项目（视频）
https://www.bilibili.com/video/BV1H34y1H7L1/?spm_id_from=333.337.search-card.all.click&vd_source=7738ab952ba89cab0761cead753a3bcc
4.宝塔-刷新页面404问题
https://blog.csdn.net/weixin_43861689/article/details/132118103
5.宝塔-使用路由访问可以访问不同的前端项目（没参考，但是学到了新东西，视频）
https://www.bilibili.com/video/BV1Ex4y1E7VT/?spm_id_from=333.337.search-card.all.click
该视频主要说的是，将另一个打包好的前端项目放已上线的前端项目，可以通过路由访问。原理是浏览器输入url相当于发送了一个get请求，背景会把该路径下的index.html返回回来。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]