最简单的前后端分离部署（Koa2）

SegmentFault 发布于2019-08-22 16:11 / 570人阅读

摘要：既然前段工程化是基于，那么选择做前后端分离部署也是理所应当的。有了这三个东西，我们就可以搭建出最简单的前端服务器了。

前后端分离开发应该已经是很多公司的标配了，然而，在前端工程化的体系下，开发环境代码和生产环境代码往往是平级的，不再是整个文件夹往服务器上一扔就了事，这让每次的部署过程相当繁琐。

如下是常见的项目目录：

Project
└──javaSrc
    └──app
        └──src
            └──main
                └──web        // 这里面是我们前端的世界
                    ├──src        // 开发环境
                    └──dist       // 生产环境

如果能实现分离部署，整个项目的层级关系可以变成这样：

Project
└──javaSrc
└──web

前端后端平级，一目了然的同时，少敲几次cd命令，可以减少对键盘的损耗。当然，目录层级和分离部署之间没有必然关联，并非合在一起就无法实现分离部署，但尽量层级关系尽量分得清晰一些，无论做什么操作都可以少些顾忌。

既然前段工程化是基于NodeJS，那么选择NodeJs做前后端分离部署也是理所应当的。其实只需要实现静态资源和代理的话，用nginx才是最好的选择，用NodeJS是为了日后能进一步在服务端上实现自动构建或服务端渲染。

第一步：安装环境

在前端工程的外层新建一个文件夹，比如就叫web吧，随后在里面搭建我们的前端工程。

web
└── app    // 这是完整的前端工程
    ├── README.md
    ├── build/
    ├── dist/    // 生产环境代码
    ├── config/
    ├── index.html
    ├── package.json
    ├── src/     // 开发环境代码
    ├── node_modules/
    └── static/

随后，我们在终端打开web目录，执行这样的语句：

npm init -y
npm i koa koa-static http-proxy-middleware -S

第一个koa是基于NodeJS的服务器框架，koa-static是基于Koa的插件，我们需要用它建立静态资源服务器，最后一个http-proxy-middleware是用于做代理的插件。有了这三个东西，我们就可以搭建出最简单的前端服务器了。

第二步：配置

时候web文件夹下会多出一个package.json和一个node_modules，我们不用管这两个，而是在web/下建立一个js文件，比如叫server.js吧！

// server.js

const Koa = require("koa")
const path = require("path")
const proxy = require("http-proxy-middleware")
const static = require("koa-static")
const fs = require("fs")

const app = new Koa()

const url = "http://www.foo.com"    // 后端服务器地址

app.use(async (ctx, next) => {
    if(ctx.url.startsWith("/api")) {    // 以api开头的异步请求接口都会被转发
        ctx.respond = false
        return proxy({
            target: url, // 服务器地址
            changeOrigin: true,
            secure: false,
            pathRewrite: {
                "^/api" : "/webapp/api"
            }
            /* ^^^
            上面这个pathRewrite字段不是必须的，
            你的开发环境和生产环境接口路径不一致的话，才需要加这个。
            */
        })(ctx.req, ctx.res, next)
    }
    // ...这里省略N个接口
    return next()
})

// 指定静态资源文件夹
app.use(static(path.join(__dirname, "./app/dist")))

// 指定首页
app.use(async (ctx) => {
    ctx.body = fs.readFile("./app/dist/index.html")
})

// 监听
app.listen(3000, () => {
    console.log("Listening 3000...")
});

这时候项目的层级关系就成了这样：

web
├── server.js
├── node_modules/
├── package.json
└── app    // 这是完整的前端工程
    ├── README.md
    ├── build/
    ├── dist/    // 生产环境代码
    ├── config/
    ├── index.html
    ├── package.json
    ├── src/     // 开发环境代码
    ├── node_modules/
    └── static/

第三步：运行

现在可以在服务器上跑了，运行命令：

node server.js

运行起来后，直接关掉终端即可，切不可Ctrl + C退出，否则服务又会停掉。觉得这种方式太粗暴的话，也有其他办法可以运行得更优雅一些，由于本文只阐述最简单的实现方式，因此不再赘述。

可以在后端服务器上随便找个目录搭建前端服务器，代理url写成http://localhost:8000之类的，也可以另外找个服务器，但要记得不要将app/下的node_modules/一并扔上服务器，前端服务器上只需要以下几样东西就够了。

web
├── server.js
├── node_modules/
├── package.json
└── app    
    └── dist/

此后，只要接口没有变动，几乎不需要再改server.js文件，以后每次部署只需要在本地构建好，一个scp命令扔上去替换app/dist文件夹即可。

这是最懒的实现方式，如果你愿意写几句脚本的话，可以让整个流程变得更加自动化，在这里就不做探讨了。

GPU云服务器云服务器前后端分离项目部署云服务器阿里云前后端分离项目怎么部署服务器前后端分离前后端分离开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94123.html

vue+koa2+mongo前后端分离restful，配置和部署到云

摘要：前端项目使用搭建项目，这里就不发了安装和配置或加载。目录下文件修改来个请求，查看结果。一。前端项目 1.使用vue-cli（vue2.0）搭建项目，这里就不发了. axios安装和配置～ npm install axios 1. main.js或app.js加载axios。 import axios from axios Vue.prototype.$axios =...

miracledan 2019-06-26 17:42 评论0 收藏0
ONE-sys 整合前后端脚手架 koa2 + pm2 + vue-cli3.0 + element

摘要：项目地址干货求本脚手架主要致力于前端工程师的快速开发一键部署等快捷开发框架，主要目的是想让前端工程师在一个阿里云服务器上可以快速开发部署自己的项目。项目地址https://github.com/fanshyiis/... 干货！求star showImg(https://segmentfault.com/img/remote/1460000017886870); 本脚手架主要致力于...

刘福 2019-07-25 14:37 评论0 收藏0
Node.js作为中间层实现简单的前后端分离

摘要：基本逻辑如下图所示对此做了一个点赞的，逻辑不复杂，但达到了作为中间层实现前后端分离的目的。零、用koa2实现前后端分离的点赞＋1的功能（欢迎clone和star） Github：https://github.com/pengxiaohua/praise-by-koa简书：http://www.jianshu.com/p/c3215333655a 一、前后端不分离存在什么问题之前做一...

moven_j 2019-06-28 13:53 评论0 收藏0
使用node+vue实现一个前后端分离的简约博客

摘要：技术栈使用实现的前后端分离的简约风格的博客线上地址源码在上使用的是腾讯云的服务器博客介绍前后端分离开发默认是后台目录，其中目录下是前端代码启动项目项目默认是端口项目进入目录下默认是端口技术栈前端后端实现功能主页列表页侧边栏富文技术栈：使用node.js + koa2 + mongoDB + vue + vue-router + element-ui 实现的前后端分离的简约风格的博客 ...

longshengwang 2019-08-23 16:16 评论0 收藏0
swagger-decorator：注解方式为 Koa2 应用自动生成 Swagger 文档

摘要：注解方式为应用动态生成文档目前我司服务端应用程序框架主要采用了与，而因为今年有很多的调研阶段的产品线发布，持续部署接口文档以及线上质量监控这三个问题愈发突出。 swagger-decorator：注解方式为 Koa2 应用自动生成 Swagger 文档从属于笔者的服务端应用程序开发与系统架构，记述了如何在以 Koa2 与 koa-router 开发服务端应用时，通过自定义 swagg...

printempw 2019-08-20 17:21 评论0 收藏0