Vue+Koa2 打包后进行线上部署的教程详解


Posted in Javascript onJuly 31, 2019

最近使用Vue和Koa2重构了自己的博客,过程中踩了不少坑,查了很多资料,最后总算成功上线。之后我计划围绕这个过程写一系列文章,讲讲如何用Vue+Koa2写一套网站。

而现在,先来讲讲最后一步,在写完Vue和Koa2后,如何将它们部署到线上。

1.将Vue和Koa2结合

很多人在打完包后就不知道怎么做了,毕竟后面都是后端的事情。如果你用的是Vue-cli3.0,那么打包这一步会非常简单,只需要执行一条命令即可,其它的不用关心:

npm run build

之后会生成一个dist的文件夹,将它放到Koa2目录下的public文件里,然后在Koa2的配置文件app.js里将静态资源指向这个文件夹,指向命令在我们创建Koa2框架时就已经自动生成,所以我们要做的也只是改一下文件地址就行了:

app.use(require('koa-static')(__dirname + '/public/dist'))

改好之后打开koa2的主页,看看是否加载成功,第一步就愉快地完成了。

2.Nginx配置

现在登录服务器,安装完Nginx后,在`/etc/nginx/sites-enabled/`下新建一个conf文件,然后写入配置:

//Koa的端口一般默认是3000
upstream koa.server{
  server 127.0.0.1:3000;
}

server {
  listen   80;
  server_name .******.com;

  location / {
    proxy_pass http://koa.server;
    proxy_redirect off;
  }
}

写完之后重启Nginx:

sudo /etc/init.d/nginx restart

接着将Koa2文件上传到服务器,启动后在浏览器里输入你的网址或者服务器ip,能访问到就大功告成了。

当然,这套Nginx配置还是非常简陋,如果希望长期稳定运行的话还得加入SSL和Gzip,网上资料很多,如果以后有机会的话我也会讲一下。

3.使用Pm2进行进程管理

能成功访问后接着就是将Koa放到后台运行,这里使用了Pm2进行管理,先来安装:

npm install -g pm2

安装好后在Koa目录下创建一个文件 “pm2.conf.json”,然后输入以下代码:

{
  "apps":{
    "name":"blog",
    "script": "bin/www",
    "watch": true,
    "ignore_watch":[
      "node_modules",
      "logs"
    ],
    "instances":2,
    "error_file":"logs/err.log",
    "out_file":"logs/out.log",
    "log_date_format": "YYYY-MM-DD HH:mm:ss"
  }
}

来重点说下两个参数,watch和instances。

Watch是检测到文件有改动会自动重启加载,ignore_watch则是排除不需要监控的文件。

Instances则是开启实例数,建议根据cpu核数进行配置,有多少核就开启多少条。

最后启动:

pm2 start pm2.conf.json

到这里,网站就部署完成了!

总结

以上所述是小编给大家介绍的Vue+Koa2 打包后进行线上部署的教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Nov 24 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
详解nvm管理多版本node踩坑
Jul 26 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 #Javascript
vue实现中部导航栏布局功能
Jul 30 #Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 #Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 #Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 #Javascript
8个有意思的JavaScript面试题
Jul 30 #Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 #Javascript
You might like
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
iView框架问题整理小结
2018/10/16 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python装饰器的函数式编程详解
2015/02/27 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
python如何输出反斜杠
2020/06/18 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
药学专业个人自我评价
2013/11/11 职场文书
微观物理专业自荐信
2014/01/26 职场文书
流动人口婚育证明
2014/10/19 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
高中生毕业评语
2014/12/30 职场文书
干部理论学习心得体会
2016/01/21 职场文书