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

前三篇文章其实已经将博客部分的功能基本上走了一遍流程,博客部分还剩下的只有首页右侧导航栏动态渲染以及文章详情界面带评论功能尚待开发。本篇文章准备讲讲博客的部署,本篇涉及的知识点前端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文件夹上传到服务器,我们通过FileZilladist文件夹上传至nginxhtml文件夹下,关于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项目还未部署。使用FileZillaNode项目部署到/opt下:

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

  1. 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就代表进程属于停止状态。

可以看到后台服务部署成功,我们可以再次访问博客首页看看效果:

首页效果出来了,博客的基本功能都可以正常使用,但是陷入了一个异常严重的问题:首屏加载过慢,粗略计算需要10秒左右才可以加载出首页。现在难免的我们需要考虑如何优化首屏加载速度。其实用过前端框架的都知道,SPA最大的缺点就是首屏加载时间过长,那具体如何对vue项目进行优化呢?

首先第一步优化打开index.js,我们可以看到我们引入界面vue文件都是使用import xxx from xxx,这种方式引入组件会在首屏加载的时候一次性加载所有组件,所以我们需要将组件引入方式改成按需加载,仅当页面要使用才进行加载对应的组件:

接着我们开启gzip压缩,打开config/index.js文件,设置productionGziptrue:

然后打开build/webpack.prod.conf.js文件,添加Gzip配置:

最后打开nginx.conf文件,在http节点下添加Gzip配置:

vue项目做了这两点优化,我们重新部署替换服务器的dist文件夹,再次访问首页进行测试:

可以看到目前首页加载在2秒左右,符合一般访问要求了。到这里我们博客部署就完成了,下一篇将对注册接口添加短信验证码验证以及博客详情界面开发。

本文分享自微信公众号 - 程序猿周先森(zhanyue_org)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微卡智享

Android ViewPager实现代码翻页的注意事项

最近做语音识别过程中,因为录入界面也查询列表界面都放在ViewPager里面,所以在考虑如果说出查询某个商品时,自动就用代码滑动至对应的页面。如下图两个页面

12230
来自专栏小白帽学习之路

Kali Linux Web渗透测试手册(第二版) - 5.3 - 利用XSS获取Cookie

thr0cyte,Gr33k,花花,MrTools,R1ght0us,7089bAt,

13240
来自专栏今日前端

打造酷炫透明的 vscode 编辑器

31930
来自专栏Eureka伽罗的技术时光轴

Tablacus Script Control 64

How to useiSame as the Microsoft Script Controlj

12320
来自专栏小白帽学习之路

Web安全学习笔记(六):JavaScript基础

这两天都没整理笔记,原因多半在于我不知道该怎么整理关于编程语言的笔记,这方面薄弱。所以想了想,决定就将一些基本的整理进来,这其中不包括语法的使用...

8810
来自专栏前端自习课

【Web技术】238-全面了解Cookie

浏览器和服务器之间的通信少不了HTTP协议,但是因为HTTP协议是无状态的,所以服务器并不知道上一次浏览器做了什么样的操作,这样严重阻碍了交互式Web应用程序的...

6020
来自专栏Web技术布道师

在 Laravel 项目中使用 webpack-encore

看过我之前写过的博客的应该知道我一直是 laravel-mix 的死忠粉,有好几篇文章都是关于它的。每每提到 laravel-mix 时更是不吝溢美之词。然而就...

14020
来自专栏休辞醉倒

JavaScript的window.load小记

本文着重介绍注册在window对象上load事件,也就是window.onload事件。

7910
来自专栏小白帽学习之路

Web安全学习笔记(五):HTML基础

今天决定要将《sql注入攻击与防御》这本书吃完。今天开了个头,看了一些,然后还是继续看大佬们写的挖洞经验。有看不懂的地方,简单搜索下概念,先了解...

9830
来自专栏京程一灯

前端与后端开发中技术差异的全面对比[每日前端夜话0x9B]

如果你是一位有志于全面了解前后端编程语言及框架的开发人员或创业者,那你来对地方了。本文将帮助你了解前端和后端技术之间的基本差异。

17230

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励