使用宝塔部署Node项目(详细!)

我要香菜拌饭

于 2024-10-27 17:42:15 发布

阅读量4.6k

点赞数 9

分类专栏：网站上线文章标签： node.js vue.js

本文链接：https://blog.csdn.net/qq_59759256/article/details/143270387

版权

网站上线专栏收录该内容

1 篇文章

订阅专栏

前情提要: 假定我们已经安装好了宝塔面板. 且博主的前端页面没有通过站点部署而是通过node项目中index.js文件动态指向的.(就相当于路由的重定向),具体实现如下图所示:

// ①导入path
const path = require('path');
// ②静态托管当前目录
app.use(express.static(path.join(__dirname, 'dist')));

// ③访问根目录时返回index.html
app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/dist/index.html'));
});

1、上传node项目文件夹

在上传node文件夹前,切记先将node_modules文件夹压缩后,再将node_modules文件夹删除,因为上传的文件夹内部不能走过1000个文件.上传文件夹后,点击开始上传,进行上传好的文件夹后,将node_modules压缩包解压.如下图所示:

2、打包上传vue项目

npm run build将vue项目打包后,生成的dist文件夹,同第一步中一样上传该文件夹,上传位置在node文件夹内部.如下图所示(位置):

到这里,我们已经完成了网页部署的 50%.

3、添加刚刚上传的Node项目,并配置域名.

博主的域名是在腾迅云购买的.

具体操作如下图所示:

这时项目已经挂载好了,接下来给该项目添加域名并打开外网映射.如下图所示:

4、开放项目所需的宝塔与腾迅云服务器端口

只有开放这些端口,我们的项目在运行时才有可能成功,具体实现如下图所示:

到这里,我们已经完成了网页部署的 70%.

5、添加数据库

博主使用的可视化数据库是:Navicate

首先,我们需要先添加一个数据库,具体操作如下图所示:

数据库添加好后,我们要获取项目中所需要的数据库数据,具体操作如下图所示:

将刚刚生成的数据库数据文件导入创建好的数据库中,具体操作如下图所示:

这样,我们便将数据库部分也解决了,成功就在眼前!

6、查看项目启动状态

查看项目日志是否与本地启动时成功状态差不多一致.

此时,项目部署已经基本完成了,不出意外的话,我们就有可能要出意外了.

网站运行结果是,网站只有最基本的静态页面,而接口请求失败,画重点,因为我们在本地测试项目时, axios中的baseUrl基本是"http://127.0.0.1:xxxx",但我们已经将其挂载到了服务器中,所以我们将其切换成"http://购买的服务器ip:xxxx",这样,接口就又能请求成功了.页面也就成功完整的显示了.

7、总结

每个人的操作过程都充满了未知BUG,真心希望此教程能帮你完成,若最终还是失败了,看看报错的信息是什么,以下是一些常见的错误及原因:

1.1 502 Bad Gateway：

a. 后端运行崩溃了或者压根没运行起来，去宝塔面板->网站->设置->项目日志里面查看一下，什么原因导致的崩溃，可能数据库问题、代码问题等；

b. 防火墙也就是安全组，没有让项目端口通过；

c. Nginx配置里面后端地址配置错误。

1.2 跨域问题：

浏览器报错： Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

a. 首先是后端，跨域是否允许;

b. 然后前端，baseURL是否设置正确；

c. 然后就是Nginx配置问题。

1.3 图片或文件加载错误：

浏览器报错：(ERR_CONNECTION_REFUSED)

一开始，数据库中存储的图片地址为 127.0.0.1，而部署后无法访问该地址，更新数据库中的图片地址为公共访问的域名或 IP 地址即可。