前后端分离项目-社交管理系统之把vue+nodejs项目发布在腾讯云服务器(ubantu Liunx系统)上 学习笔记以及踩坑记录(五)
项目介绍以及工具准备介绍项目的后端部分使用的是node.js进行编写,node+express搭建服务器以及各种的接口搭建。而前端部分则是vue+webpack初始化了一个项目。在本机编写好项目后想要发布到腾讯云上,让项目落地。终端模拟软件我使用的是ubuntu,linux系统,为了方便操作需要在本机下载终端模拟软件。推荐使用XShell,似乎用的人比较多。我使用的是MobaxTerm。傻瓜式开箱
项目介绍以及工具准备介绍
项目的后端部分使用的是node.js进行编写,node+express搭建服务器以及各种的接口搭建。而前端部分则是vue+webpack初始化了一个项目。在本机编写好项目后想要发布到腾讯云上,让项目落地。
终端模拟软件
我使用的是ubuntu,linux系统,为了方便操作需要在本机下载终端模拟软件。推荐使用XShell,似乎用的人比较多。我使用的是MobaxTerm。傻瓜式开箱即用,新建会话连接到云服务器即可
成功后就可以在这里操作你的云服务器。
如何传输文件到云服务器上
那么如何把项目文件传输到云服务器上呢。
我是用的是这个软件。打开后新建会话连接到云服务器上。
直接把项目拖进去就可以了。注意这里只介绍方法。稍后进行具体步骤操作。
开放端口
进入腾讯云控制台,左边导航栏中的安全组。添加规则,把你node搭建的服务器的端口开放。
为了检查是否成功,我们来到终端。
mkdir node-test
cd node-test
vi index.js
如果你不喜欢vim编辑器,你可以在本地创建index.js编写好后拖进去
const http = require('http');
const hostname = '0.0.0.0';
const port = 7500;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World\n');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
然后我们使用node index.js运行一下,运行成功后我们可以再本地浏览器中通过ip地址:端口号访问。如本例 ip:7500
如果你发现你还是没有访问成功。
检查防火墙
我们刚刚开放的腾讯云的入站端口,但是我们的ubantu好像并不买账,还是不让我们访问7500端口。我们应该检查一下防火墙:首先以root管理员身份运行。查看防火墙开放的端口。如果发现没有7500
ufw allow 7500
有关防火墙的知识参考https://www.jianshu.com/p/2d819f07c0b9。
打开后我们就能够正常访问7500端口。说明我们前面的全局准备工作已经OK了。
处理我们的项目
一开始我想的是直接把整个项目拖进去。然后直接跑起来,各种依赖模块都一股脑拖进去。结果发现还是得重新下载依赖,于是我就各种npm i。他说缺什么我就下载什么。结果有的依赖需要高版本的node.js。我一检查发现我的版本竟然不到10.X立马更新了版本。把所有后端所需要依赖下载好后跑起来了,也能通过ip:端口访问到我写的接口了!我以为就应该可以大功告成。于是我npm run dev
因为我的项目是前后端连载的,输入这个即可前后端都跑起来。项目跑了起来!效果和在本机的一样。于是我迫不及待访问8080端口(项目中前端的端口号)。发现访问不到!原来根本不是这样的.
正确的操作!
我查了各种资料,都没有找到满意的,终于通过询问前端的前辈解决了问题。
在本地先处理我们的项目
首先保证我们前后端连载、
之前在笔记中记录过前后端连载,不再赘述。
修改一些配置
来到client的router文件夹下的配置文件index.js。改为hash模式
在来到config文件夹下index.js
把前端项目打包
进入client文件夹修改完后执行打包命令:npm run build
←←重要
成功后得到dist文件,将其复制到根目录下。也就是client上一级的文件夹中。这时候备份好你的client文件夹。然后删除client和node_modules文件夹。
压缩成.zip文件。通过文件传输工具传进云服务器中。
解压
unzip -d ./node-app node-app.zip
解压完成后
执行命令npm install
注意要管理员权限。
重要一步:修改资源路径
现在我们已经的到了我们的项目,我们要修改server.js文件的express配置内容马上就可以成功了
直接双击修改
安装pm2
服务器上使用 node 命令启动项目时,如果我们退出模拟终端时,进程就会关闭,无法再访问到项目。因此,为了解决这个问题需要用到pm2。pm2 是一个带有负载均衡功能的Node应用的进程管理器,可以保证进程永远都活着,0秒的重载。
安装命令: npm install -g pm2
启动进程命令: pm2 start server.js
停止进程命令: pm2 stop server.js
查看进程命令: pm2 list
更多命令参考:https://www.jianshu.com/p/75e4c31517b7
到这里已经大功告成!
展示
更多推荐
所有评论(0)