最简单的前后端分离部署(Koa2)
前后端分离开发应该已经是很多公司的标配了,然而,在前端工程化的体系下,开发环境代码和生产环境代码往往是平级的,不再是整个文件夹往服务器上一扔就了事,这让每次的部署过程相当繁琐。
如下是常见的项目目录:
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.jsconst 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 = falsereturn 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
文件夹即可。
这是最懒的实现方式,如果你愿意写几句脚本的话,可以让整个流程变得更加自动化,在这里就不做探讨了。
最简单的前后端分离部署(Koa2)相关推荐
- Docker环境下的前后端分离部署与运维 脚本
<Docker环境下的前后端分离部署与运维>脚本 文章目录 <Docker环境下的前后端分离部署与运维>脚本 一.Docker虚拟机常用命令 二.安装PXC集群,负载均衡,双机 ...
- 2021年数据库课设该怎么做?一个超市管理系统,简单的前后端分离项目,带你从概要设计走到项目发布!(Vue.js+SpringBoot+MybatisPlus)
由于本文格式原来是word,所以文中有些格式不太对.如果这篇文章对你有帮助,麻烦点赞评论一下谢谢!源码和word文档可私聊领取~ 目录 一.相关技术介绍 1.1 RDBMS: 1.2应用程序开发环境: ...
- Django + react + 阿里云ecs 前后端分离部署上线
背景 因为之前一直在捣鼓Python,本人是前端菜鸟一枚~,一直想着做个小demo,把后端和前端给统一跑起来,正好也可以把掌握的知识梳理一遍,这样前端后端就能够打通,岂不快哉!平时上班大家都知道没时间 ...
- 若依前后端分离部署到tomcat中详细教程
本章教程,主要介绍一下,如何将若依前后端分离项目部署到tomcat中. 在阅读本教程前,希望你能够在本地能够将前后端分离项目跑起来,这里就不过多介绍了. 目录 一.后端打包步骤 (1)修改ruoyi- ...
- 人人开源前后端分离部署到阿里云服务器
购买阿里云学生服务器 https://developer.aliyun.com/plan/grow-up?utm_content=se_1011983784 阿里云学生服务器试用 阿里云服务器购买及配 ...
- 简单了解前后端分离架构(MVVM)
JavaWeb 项目前后端分离架构 前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式有效解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构.多端 ...
- 动静分离java html_动静分离-前后端分离部署
#静态态资源文件分离发布 遇到的问题 多节点web服务器部署期间,访问静态资源可能会出现404. 为什么? 如果java进程我们以jar打包的方式打包文件并启动.假设有N多个pod,客户端请求会随机访 ...
- 【个人理解】简单理解前后端分离,微服务,分布式开发
前后端分离就是分开开发 前端和后台不在同一个应用中.而是两个不同的项目 每个项目都有不同的域名和端口号,如果前端需要数据,就去访问后台得项目接口获取数据 就比如说,数据库和后台是分开的, 数据库和后台 ...
- 简单理解前后端分离,微服务,分布式开发
前后端分离就是分开开发 前端和后台不在同一个应用中.而是两个不同的项目 每个项目都有不同的域名和端口号,如果前端需要数据,就去访问后台得项目接口获取数据 就比如说,数据库和后台是分开的, 数据库和后台 ...
最新文章
- python基础题-python基础练习题(一)
- C# Marshal类基本概念和入门示例程序
- python dump函数_python 处理 json 四个函数dumps、loads、dump、load的区别
- R语言-时间序列-arima模型-forecast、tseries包
- mezzanine安装配置
- 关于SQLContext过期,SparkSession登场
- Redis的基本操作二
- 【遥感数字图像处理】基础知识:第四章 遥感图像辐射纠正
- 数据结构---KMP模式匹配病毒感染人的DNA检测
- 利用二分法解决 leetcode 378. Kth Smallest Element in a Sorted Matrix
- 利用Android属性动画实现Banner的原理与实践
- 经典蓝色主题海报设计,永恒色彩趋势
- C语言之计算程序运行时间(八)
- vue2使用脚手架配置prettier报错:‘prettier/prettier‘: context.getPhysicalFilename is not a function
- 软考初级程序员主要考什么?如何复习?
- 遇到没有exe文件的驱动
- excel取消合并单元格并自动填充数据
- 超清视频制作:视频补帧+超分辨率
- [BJDCTF2020]Mark loves cat
- ORACLE使用DBLINK导入导出数据