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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 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 array_merge下进行数组合并的代码
2008/07/22 PHP
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
学习php笔记 字符串处理
2010/10/19 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
Python3爬虫全国地址信息
2019/01/05 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
Django的性能优化实现解析
2019/07/30 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
韩国现代百货官网:Hmall
2018/03/21 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
法警的竞聘演讲稿
2014/01/02 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
夜不归宿检讨书
2014/02/25 职场文书
小学生作文评语大全
2014/04/21 职场文书
产品销售计划书
2014/05/04 职场文书
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android
数据设计之权限的实现
2022/08/05 MySQL
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技