利用宝塔发布nodejs+vue项目

大家好近期呢我也是拿到了一个nodejs服务端的项目,在本地运行的还不错,结果我想发布却发现我不知从何下手,于是我就各种百度,还好通过拼凑我学会了发布,废话不多说我来做个笔记。

首先需要去阿里云或者腾讯云准备个云服务,我是在阿里云准备的云服务器ECS在这里插入图片描述
购买好了后选择从装系统,我装的是Windows系统在这里插入图片描述
确定提交等一会它就会安装好了。
进入管理系统》管理
在这里插入图片描述
在这里插入图片描述
复制公网IP,然后点击键盘“wind键”搜索“远程桌面连接”,计算机名就是你的公网IP
在这里插入图片描述
输入后点击连接,然后会跳出输入密码
在这里插入图片描述
输入密码后确定等待一会就会连接上了
在这里插入图片描述
连接上后去宝塔官网下载宝塔,我们是wind系统就选择wind版本
在这里插入图片描述
下载好后解压桌面,然后拷贝一下,到我们服务器系统桌面粘贴一下就可以了,然后就可以安装啦~
安装一般等待1~2分钟…
在这里插入图片描述
好了安装好了后打开默认页面
在这里插入图片描述
我们不想要它默认的我们来配置一下,点击关闭即可配置
在这里插入图片描述
好了配置成功,我们复制连接关闭远程桌面我们就可以在本机浏览器打开啦~
在这里插入图片描述
哎呀-最后发现网页打不开?
在这里插入图片描述

我们配置好了宝塔还不行-我们需要去服务器哪里配置一下安全组
点击——更多》网络和安全组》安全组配置
在这里插入图片描述
点击——配置规则
在这里插入图片描述
手动添加
在这里插入图片描述
列如我们刚才宝塔配置6060 我们这边就手动添加 6060/6060。授权对象默认0.0.0.0/0 就可以了
在这里插入图片描述
保存,然后重新打开我们安装宝塔时候链接
在这里插入图片描述
你就会发现进入宝塔了,然后登录一下。
首次登录绑定一下账号
在这里插入图片描述
安装一下Nginx套装
在这里插入图片描述
最重要的来了,我们是nodejs所需需要去安装一下PM2管理器,点击软件商城搜索“ PM2管理器 ”
在这里插入图片描述
点击文件找到wwwroot文件夹点击进去上传我们打包好的node后端压缩包。
上传成功后解压一下。
我的后端Shop
在这里插入图片描述
点击首页》pm2管理器
在这里插入图片描述
添加项目
在这里插入图片描述
在这里插入图片描述
启动文件看你们自己的了有的人app.js,反正我的是Bind文件夹里面的www文件是我的项目启动文件,
这个要看自己的~~~
选好后提交
在这里插入图片描述
提示
在这里插入图片描述
说明我们没有安装好nodejs版本
等待几分钟
在这里插入图片描述
安装成功
在这里插入图片描述
重新配置
说明了需要重新启动一下服务器然后再重新添加
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
服务器启动成功,然后千万记得点击—安全—放行一下你的服务器端口
比如我的4088,那我就要放行一下4088这个端口,
怎么去放行还是那样进入服务器界面,给安全组手动添加一下我们服务器的端口就行了,默认还是0.0.0.0.
放行了node后端就搭建好啦~
接下来我测试给大家看看~
在这里插入图片描述
我能获取到了代表我服务器搭建成功了,那么接下来问题来了,我们该如何去搭建Vue网页呢?
这个问题我也琢磨了好久,也是各种百度,我终于琢磨明白了。
宝塔》网站》添加站点
在这里插入图片描述
域名没有的话直接添加我们公共IP就可以了。
创建成功
在这里插入图片描述
把vue项目打包放在指定根目录
在这里插入图片描述
如何去打包?
首先我们需要写我们vue项目的工具打开“ 终端 ”,在终端输入

npm run build

打包命令。等待几分钟你会发现多了一个“dist”文件夹,如何我们只需要压缩这里面的上传到我们指定目录解压即可~
在这里插入图片描述
到根目录把多余文件删除,然后上传在解压即可
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

如果用了MySQL可以创建一个数据库
在这里插入图片描述
权限记得所有人
在这里插入图片描述
自己到对应node修改数据库信息保存在刷新页面
在这里插入图片描述
你会发现出现了404,这时候不要慌,因为你还没有配置好
点击网站》设置》配置文件
把一下代码加进去即可

#vue-router配置
    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }

在这里插入图片描述
然后重启一下Nginx
在这里插入图片描述

在这里插入图片描述
这时候你再次打开会发现是空白的?
在这里插入图片描述
因为你还没有配置好数据库所有才会空白的,当然我在这里做了数据库初始化-我只需要配置好我后端的数据库连接就可以了。
在这里插入图片描述
初始化成功后再次打开
在这里插入图片描述
嘿嘿嘿~~~成功了~

对啦最后特别重要的刚刚也卡了我好一会-如果你做了上传了网页不配置好那段代码的话你的网站刷新就会404~~

还有如果你服务器使用了express记得安装一下
点击首页》PM2管理器》模块管理》搜索栏那输入:express点击安装就可以了~
安装完后记得还是那样重启一下Nginx
在这里插入图片描述

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

橙子cms

node+express扫码获

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值