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

最近使用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 打包后进行线上部署的教程详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 详解vue+vuex+koa2开发环境搭建及示例开发

    写在前面 这篇文章的主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用. 搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径,而不是直接在前端写几个死数据.即,模拟后端接口. 当然在这整个过程(搭建环境 + 开发示例demo)中,涉及到以下几点知识点. 包括: koa2的知识点 node的知识点 跨域问题 fetch的使用 axios的使用 promise的涉及 vuex -> st

  • Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案

    遇到的问题 使用webpack打包vue后,将打包好的文件,发布到Tomcat上,访问成功,但是刷新后页面报404错. 在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释,你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html 但是看完问题又来了,官方给出的解决方案中没有说tomcat下,怎么决解. 解决方案 根据官方给出的解决方案原理 你要在服务端增加一个覆盖所有情况的

  • 利用vue + koa2 + mockjs模拟数据的方法教程

    前言 首先说一下这是本人第一次分享东西第一次写,写的不好或者有错误的请大家多包涵支出错误共同进步,好了,话不多说了,来一起看看详细的介绍吧. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 第一步 安装vue-cli项目 不多说网上一大把 需要的朋友们参考这篇文章:http://www.jb51.net/article/118987.htm ,介绍的非常详细.

  • vue项目打包部署到服务器的方法示例

    vue项目打包部署到服务器的方法示例

    上上一篇我写过一些关于vue项目部署到linux服务器的文章,但是那是以node作为开发环境 pm2 守护进程的方式,让他能正常运行,可是还是出现了问题,因为属于与APP交互的页面,在webView中打开过慢,APP的用户体验非常的差,所以我查找了资料,改变了部署方式,接下来我介绍一下 这一次,我想Tomcat为例 我们先看一下Linux中 Tomcat下面的目录结构: 以vue-cli 搭建出来的手脚架 webpack的模板下的/config/index.js,这里可以看到assetsPubl

  • Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'

  • vue 打包后的文件部署到express服务器上的方法

    vue 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. vue是目前最流行的前端框架,今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发. 1.首先用vue-cli初始化项目目录 vue init webpack pro-name cd pro-name && npm ins

  • 详解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南

    正如Vue官方所说,SSR配置适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读.请先移步ssr.vuejs.org了解手工进行SSR配置的基本内容. 从头搭建一个服务端渲染的应用是相当复杂的.如果您有SSR需求,对Webpack及Koa不是很熟悉,请直接使用NUXT.js. 本文所述内容示例在 Vue SSR Koa2 脚手架 : https://github.com/yi-ge/Vue-SSR-Koa2-Scaffold 我们以撰写本文时的最新版:Vue 2,Web

  • vue项目打包部署_nginx代理访问方法详解

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了

  • vue2.0+koa2+mongodb实现注册登录

    前言 前段时间和公司一个由技术转产品的同事探讨他的职业道路,对我说了一句深以为然的话: "不要把自己禁锢在某一个领域,技术到产品的转变,首先就是思维上的转变.你一直做前端,数据的交互你只知道怎么进,却不知道里面是怎么出的,这就是局限性." 醍醐灌顶般,刚好学习vue的时候看到有个注册登录的项目,索性我也跟着动手做一个vue项目,引入koa和mongodb,实现客户端(client)提交-服务端(server)接收返回-入数据库全过程. 本项目基于vue-cli搭建,利用token方式进

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

    最近使用Vue和Koa2重构了自己的博客,过程中踩了不少坑,查了很多资料,最后总算成功上线.之后我计划围绕这个过程写一系列文章,讲讲如何用Vue+Koa2写一套网站. 而现在,先来讲讲最后一步,在写完Vue和Koa2后,如何将它们部署到线上. 1.将Vue和Koa2结合 很多人在打完包后就不知道怎么做了,毕竟后面都是后端的事情.如果你用的是Vue-cli3.0,那么打包这一步会非常简单,只需要执行一条命令即可,其它的不用关心: npm run build 之后会生成一个dist的文件夹,将它放到

  • vue中引用swiper轮播插件的教程详解

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件:  npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div

  • React为 Vue 引入容器组件和展示组件的教程详解

    如果你使用过 Redux 开发 React,你一定听过 容器组件(Smart/Container Components) 或 展示组件(Dumb/Presentational Components),这样划分有什么样的好处,我们能否能借鉴这种划分方式来编写 Vue 代码呢?这篇文章会演示为什么我们应该采取这种模式,以及如何在 Vue 中编写这两种组件. 为什么要使用容器组件? 假如我们要写一个组件来展示评论,在没听过容器组件之前,我们的代码一般都是这样写的: components/Comment

  • VirtualBox软件下载安装及Linux环境安装部署图文教程详解

    一.VirtualBox软件下载及安装 首先进入VirtualBox官方网站进行软件下载, https://www.virtualbox.org/,目前VirtualBox最新的版本为6.1,详细如下图: 点击"Downloads"按钮,即跳转自"VirtualBox 6.1.4 platform packages"下载页面 选择"Windows hosts",即进行VirtualBox软件下载 双击"VirtualBox-6.1.4-

  • spring boot 项目利用Jenkins实现自动化部署的教程详解

    本文主要讲解利用Jenkins实现spring boot项目的自动化部署: •1.后台技术架构:Spring boot 1.4.2.RELEASE +Mybatis 3+ Redis+ Mysql 5.6+JDK8; •2.代码构建工具:maven 3.3; •3.源代码托管工具:Gitlab; •4.利用maven的docker插件打包成docker镜像在docker容器中部署项目: •5.服务器是阿里云的ECS; 一.安装Jenkins 1.阿里云服务器安装Jenkins方式见如下链接地址

  • 使用VUE+SpringBoot+EasyExcel 整合导入导出数据的教程详解

    使用VUE+SpringBoot+EasyExcel 整合导入导出数据的教程详解

    目录 1 前端 2 数据库 3 后端 3.1 contrller 3.2 mapper 3.3 bean 3.4 listener 3.5 config 3.6 配置文件 4 启动测试 创建一个普通的maven项目即可 项目目录结构 1 前端 存放在resources/static 下 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo

  • 又拍云异步上传实例教程详解

    网站静态文件存储在又拍云,之前上传是通过又拍云的的FORM API进行. 当产品经理歪着脑袋走向你的时候,哎呀呀,这用户信息这里,上传要无刷新的效果了. 这他***,自己偷偷抱怨一会会,怎么搞喃?听说这家伙要一个好听的名字,异步上传,高大上档次挺像我的. 根据我们的观察,此处有两个重点: ①.怎么实现异步上传 ②.怎么上传到又 拍 云 首先我们要实现异步上传,就需要利用js里面的FormData对象,据说,这家伙不支持ie6 7的,ie8就不太清楚了,据说哈,说错了不负责的. 不过喃,我们也不用

  • springboot项目idea热部署的教程详解

    1.添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> <scope>true</scope> </dependency> 2.开启自动编译 3.ctrl+shifi+alt

  • Windows环境下实现Jenkins部署的教程详解

    Windows环境下实现Jenkins部署的教程详解

    前言 本章主要讲述Windows环境下的Jenkins的自动化部署 关于JenKins下载的方式有两种, 1)直接下载war包,用tomcat/java命令运行 2)msi安装,作为系统服务后台运行 推荐第二种方法很简单: 链接: https://pan.baidu.com/s/1i-qJvoURqTaIKqxoEr170A 提取码: qz6j 我这篇blog主要讲述第一种方法 前提准备工作:安装配置好java环境(关于Java环境自行百度)和Tomcat环境 我这里是jdk1.8和Tomcat

  • Java结合Vue项目打包并进行服务器部署

    Java结合Vue项目打包并进行服务器部署

    目录 Java后端项目打包和服务器部署 Vue项目服务器部署 两周前我刚刚入职实习的时候,后端的几个同事看到我需要学习如何把项目进行部署,都围过来教我怎么部署,我感觉学习到了很多,因此,记录一下学习的笔记.当然了,这些部署是建立在已经配置好tomcat(后端服务器)和nginx(前端服务器)的基础之上的,因为公司之前已经做好了,我只需要迭代即可. Java后端项目打包和服务器部署 1.IDEA点击maven,然后点击clean,接着点击package打包获得cr.war(在项目根目录的targe

随机推荐