vue博客实战---博客部署到腾讯云

作者: 逆月翎 | 来源:发表于2019-08-13 17:59 被阅读3次

欢迎关注我的个人公众号：周先生自留地，简书文章不定时更新。

前三篇文章其实已经将博客部分的功能基本上走了一遍流程，博客部分还剩下的只有首页右侧导航栏动态渲染以及文章详情界面带评论功能尚待开发。本篇文章准备讲讲博客的部署，本篇涉及的知识点前端vue打包部署到nginx，后端Node部署并使用PM2进行进程管理。并且对vue首屏加载过慢做了适当的优化，提高首屏加载速度。

首先我们需要在服务器搭建前后端环境，我们需要的环境具体有：node.js，PM2，nginx，mysql。我的版本是centos 7.2版本，之前有专门写过一篇文章介绍linux环境的配置：玩转服务器---运行环境搭建，如果需要搭建环境的可以参考本篇文章进行对应环境的搭建。

在开始部署博客之前，我们需要在本地安装XShell用来连接服务器进行pm2进程管理，FileZilla用于将本地项目上传到服务器。软件准备好，首先我们需要在腾讯云解析两个域名，解析到服务器对应的公网ip：

www.niyueling.cn：博客首页地址

pic.niyueling.cn：上传图片的图片主路径

首先我们需要去nginx.conf配置pic.niyueling.cn指向图片存放主目录，而后端图片上传主目录定义在/mnt/niyueling/，所以首先配置pic.niyueling.cn指向/mnt/niyueling/目录：

配置完图片上传路径，进入vue项目文章发表界面articleEdit.vue，将上篇文章图片上传成功返回的图片url前缀改成http://pic.niyueling.cn:8080

接下来，可以开始vue项目的打包。进行根目录，执行命令：

npm run build --report

--report可以在打包项目成功打开资源分析界面，会显示打包后每个文件的大小：

项目打包成功，会在项目根目录生成一个dist文件夹，我们接下来需要将dist文件夹上传到服务器，我们通过FileZilla将dist文件夹上传至nginx的html文件夹下，关于FileZilla的基本使用可以查看另一篇文章：玩转服务器---基本工具的使用：

可以看到我已经成功将vue项目打包生成的dist文件夹上传至服务器，记下来打开nginx.conf文件配置www.niyueling.cn域名指向dist文件夹下的index.html：

前端项目配置完我们可以打开XShell测试下nginx.conf配置文件有没有问题，使用命令：

nginx -t

若出现图中提示配置文件ok，则重启nginx。执行命令：

nginx -s reload

我们可以尝试访问www.niyueling.cn，看是否可以加载出博客首页。

可以看到首页加载出来，但是后端服务出现异常了。原因在于后端Node项目还未部署。使用FileZilla将Node项目部署到/opt下：

blog_back就是我部署的后端项目，我们需要使用PM2进行后端进程的管理与监控。这里直接贴上一些PM2的常用命令：

pm2 start xxx.js --name xxx 启动xxx.js进程并进行重命名

pm2 restart xxx.js 更新代码后，使用restart命令重启xxx.js进程

pm2 stop all停止所有进程

pm2 stop xxx.js 停止xxx.js进程

pm2 stop 0停止id为0的进程

pm2 list查看所有当前正在运行的进程

pm2 show 0查看id为0的进程

pm2 logs 0显示id为0的进程日志

pm2 logs xxx.js 显示xxx.js进程的日志

pm2 logs显示所有日志

接下来我们来看看如何使用这些命令，首先在XShell中启动我们的后端进程，项目启动文件放置在bin文件夹的www文件，所以进入bin文件夹使用pm2 start ./www --name server，可以启动我们刚才上传的server项目并将启动的服务进程重命名为server。然后使用pm2 list可以看到我们当前有一个进程属于启动状态，status就是进程的状态，online就代表正常启动成功，error就代表代码出错，可以查看日志看报错信息，stop就代表进程属于停止状态。