利用宝塔发布nodejs+vue项目-CFANZ编程社区

大家好近期呢我也是拿到了一个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
在这里插入图片描述