使用宝塔面板部署node项目、数据库及react项目

2023-12-27 09:25:03

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.打开宝塔面板的数据库

image.png

b.添加数据库

image.png
tips：注意这里的访问权限要打开，不然你本地去连线上数据库时连不上
这里建立的数据库要与你的node项目中的完全一致
image.png

c.可选步骤（sql文件过大时(大于50mb)需要设置，否则会导入不成功）

到软件商店里去设置php
image.png
把下面4个都选择成500
image.png
重启php
image.png

d.导入hkzf.sql文件

点击管理
image.png
这里的密码就是你刚才设置的
image.png
上传sql文件
image.png
如果你的数据库表里有数据，那么就是正确的
image.png

e.开放端口

这里特别要注意，需要开放两个地方的端口
1.需要开放宝塔面板的3306端口
image.png
2.需要把阿里云安全组的3306端口开放
image.png

f.修改node项目host地址，检验线上数据库是否部署成功

image.png
tips:这里的ip地址不要带有http!!!
运行node项目，能正常访问就说明我们线上的数据库部署成功了！
image.png

2.部署node项目

a.新建文件夹并将node项目（不需要打包）放到该文件夹下

image.png
将我们的node项目中的node_modules删除掉，然后再压缩，把这个压缩包上传上去，再解压，然后删除这个安装包即可
image.png
上传：
image.png
解压：
image.png
最后删除zip文件
image.png

b.开启宝塔面包中node项目的服务

到网站的node项目中去，安装node版本管理器
image.png
接着会提示你安装node,npm（node版本的选择看你的项目），同时它也会自动安装pm2
image.png

c.将我们的node项目文件放到node服务中

点击添加node项目，选择项目路径
image.png
tips：
项目目录：选择刚才a步骤的文件夹
项目名称和启动选项：会在你选了项目目录之后自动带入进去
项目端口号：很重要，这边我会解释的多一点！！！！！！！！！！这个要与你node项目中配置的端口号一致！！！后面去访问接口也是使用这个端口号！！
这个项目端口号可以随便填，但是一定要与node项目中配置的端口号一致，并且与vue项目中axios的base_url（项目基地址）的端口号一致，并且整个vue项目中的地址，你都是使用的base_url变量，而不是写死的常量。有一个不一致，都会导致网络请求错误。
（下图是我的node项目中的端口号，没写8080是因为我这个服务器的8080端口已经被另一个项目使用了，一定要注意不要和前端项目使用同一个端口，会导致端口占用！！！）
image.png
（vue项目的生产环境base_usl配置）
image.png
（封装的axios中的baseURL（项目基地址）使用的也是这个）
image.png
image.png
（平常的vue项目访问的图片和接口一定要用base_url，否则会出现请求错误的情况，我部署的时候就出现了，接口访问出错，找了很久，发现是vue项目里面写死了！！！）
image.png
（这里的图片也是，不能使用写死的）
image.png

d.开放接口端口

这里特别要注意，需要开放两个地方的端口
1.开放宝塔面板的9999端口
image.png
2.开放阿里云的安全组9999端口
image.png

e.测试项目接口

这里我使用的是在线的postman测试的
image.png
接口测试的没问题，那么说明我们的node项目已经在服务器上跑起来了

3.部署vue项目

a.修改线上环境的ip和端口

image.png

b.检查项目中有没有写死的地址，如果有，替换成变量process.env.REACT_APP_URL

image.png

c.打包

image.png

d.到宝塔面板的网站中建立站点

image.png
tips:这里的域名随便填一个（后面还要删掉），主要是为了创建第三行的目录

e.把打包好的vue项目文件上传到上面一步生成的目录hkzf.com中

删除没有用的文件
image.png
将打包好的vue项目文件传到该目录下
image.png

f.设置真正的域名并删除刚才的域名image.png

设置真正的域名（我这里使用的是ip访问，由于我这里已经有一个项目使用的是8080端口，所以我这里使用6666的端口号，如果你们是第一次，那么直接写ip即可。）
注意：这里填写的是你真正可以访问的域名或者ip
image.png
删除刚才的hkzf.com域名（原因是我没有买这个域名，所以这个域名没用，这个域名的作用其实就是充当文件夹的名字，好在宝塔面板的列表中知道你是哪个网站）
image.png

g.开放端口

注意：要同时开放宝塔面板的防火墙端口和阿里云安全组端口
1.开放宝塔面板的防火墙端口
image.png
2.开放阿里云安全组端口
image.png

h.检查前端项目是否部署上去

在浏览器中输入刚才填写的真正域名120.76.176.237:6666,访问成功说明已经成功部署上去了。(这里还有个小问题，就是刷新会404not found)
image.png

i.解决history路由，刷新页面404的问题

点击设置-配置文件-加入以下代码并保存

location / {
      try_files $uri $uri/ /index.html;
}

image.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返回回来。

文章来源:https://blog.csdn.net/weixin_43239880/article/details/135234283
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。