‘壹’ vue + CI + APACHE 前后端分离服务器部署踩坑（vue-cli-3）
1.前端本地开发环境需要配置代理：
在项目路径下创建 vue.config.js ，内容如下：
const path = require('path');
mole.exports = {
// publicPath:'http:// .com/mm', // 线上
publicPath:'', //本地
outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist', // 不同的环境打不同包名
devServer:{ // 配置服务器
port:8891,
open:true,
https:false,
// disableHostCheck: true,
overlay: {
warnings: true,
errors: true
},
proxy:{ //主要是这里，设置代理！！！！
'/api': {
target: ' http://www . .com：****',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
},
configureWebpack:{ // 覆盖webpack默认配置的都在这里
resolve:{ // 配置解析别名
alias:{
'@':path.resolve(__dirname, './src'),
'@a':path.resolve(__dirname, './src/api'),
'@f':path.resolve(__dirname, './src/filters'),
'@u':path.resolve(__dirname, './src/utils'),
}
}
}
}
2.设置完代理之后可以请求url直接用 ： '/api/' + *** 代替
3.如果前端的路由是‘history’模式，则需要在部署服务器时，在index.html同路劲下新增文件 ： .htaccess, 内容如下：
<IfMole mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfMole>
主要是为了刷新的时候，路由重写到 index.html下面。
‘贰’ (Docker Nginx) Spring boot+Vue 前后端分离部署 详细完整版
简述：Spring boot+Vue 前后端分离项目部署，主要采用docker容器部署方式。
Springboot项目部署：docker构建mysql环境+docker构建项目自身环境。
Vue项目：使用docker启动nginx服务器方式代理部署。
项目使用mysql8.0作为数据源，所以部署时需要使用docker构建mysql环境及项目自身环境。
连接出现1251错误时：
首先将项目进行打包：mumu-0.0.1-SNAPSHOT.jar
到此，springboot项目采用docker方式运行部署结束。
使用docker容器方式运行nginx服务器。
对于nginx服务器，重要的两个操作是：
所以我们在配置启动nginx容器的时候，需要将对应的目录及文件进行宿主机挂载，方便后续更新资源及操作
启动命令：
‘叁’ 前后端分离微服务架构如何设计
前端
前端开发人员专注业务的页面呈现，非常注重用户体验度，也是与各种角色打交道最多的。
比如：
一般前端工作包括六个部分：
后端
如果前后端职责划分很清楚的话，后端更多开发工作在于业务接口设计、业务逻辑处理以及数据的持久化存储，并提供详细的接口设计文档给前端开发人员使用。
一般后端工作包括五个部分：
1、与产品经理对接需求
2、业务 API 接口开发：根据根据需求文档进行业务接口开发
4、接口对接：与前端开发人员接口对接
5、前后端联调测试：包括页面展示以及接口数据
6、bug修复
前端开发技术栈
h5 、 css 、 nodejs / vue / angular / react 、 webpack 、 hbuilder / vscode 等
后端开发技术栈
SpringCloud / Springboot 、 SpringMVC 、 ORM 框架、数据库、缓存框架（ Redis ， Codis , Memcached 等），大数据框架（ Hadoop / Spark / hive / Hbase / Storm / ES / Kafka ）等等
技术选型
最好选择成熟稳定，易上手、开发效率高的技术，因为实际项目开发时间是有限的，开发人员没有多少精力放在学习和深度研究技术上。
数据格式
后端开发提供接口设计文档，详细写明每个接口的请求地址、请求参数、响应参数等等；一般采用 REST 风格以 JSON 格式提供数据。
接口设计
一个接口设计的好坏，直接影响到前后端的一些沟通协调问题。
依笔者的经验来看，如果后端接口不稳定，会导致前端开发人员反复修改页面数据呈现。常常出现后端开发说这是前端问题，前端开发说是后端问题，来回扯皮，沟通效率低下。
接口容量问题
一个接口的业务容量大小，往往代表前后端工作量的大小。
如果一个接口的业务容量太小，前端需要分阶段处理的事情就多，尤其是对多个接口 Ajax 异步处理；
如果一个接口的业务容量太大，那么业务耦合性高，万一需求变更，后端程序改动大，不利于程序的扩展。
一、前后端分离的思想要转变
不能老是按照传统WEB（ js/h5/css/ 后端代码放在一个工程）开发思维去看待前后端分离
二、沟通成本问题
以前传统 WEB 开发，开发人员从需求到设计到开发基本上是一个人。
而前后端分离后，前端只负责页面呈现，后端更注重业务逻辑处理以及数据的持久化，双发都有自己的侧重点，工作量上有私心。
三、组织结构问题
康威定律
第一定律： Communication dictates design （组织沟通方式会通过系统设计表达出来）
第二定律： There is never enough time to do something right, but there is always enough time to do it over （时间再多一件事情也不可能做得美，但总有时间做完一件事情）
第三定律 ： There is a homomorphism from the linear graph of a system to the linear graph of its design organization （线型系统和线型组织架构间有潜在的异质同态特性）
第四定律： The structures of large systems tend to disintegrate ring development, qualitatively more so than with small systems （大的系统组织总是比小系统更倾向于分解）
康威定律说明以下几点
四、部署及监控运维
前后端分离后，拆分的服务会带来线上部署以及如何监控运维的复杂性。
总体来说，前后分离所带来的好处还是更明显的。一个成熟的前后端分离的团队，文档化约定，前后端职责分离、接口约定都是做得比较好的
‘肆’ django+vue前后端分离项目部署
后端用的drf，使用的是uwsgi+nginx
进入服务器项目文件目录下，我的django项目放在了“/usr/myProjects/”目录下了。在manage.py同级目录下创建uwsgi.ini文件，配置如下：
测试效果命令：
如果访问：xxx.xxx.xxx.xx:8000 成功， 则uwsgi.ini配置成功
我的nginx.conf所在位置是“/etc/nginx/nginx.conf”
配置文件如下：
1、第一行
主要就是给nginx加权限，vue部署后使用history路由时会去掉地址后面的‘#’号，打包部署后不加权限会有bug。
2、如配置所示，有两个Server，分别部署了前端服务，和后端服务，值得注意的是两个Server用的是同一个服务器，监听的端口不同。
3、vue部署需要注意的是反向代理地址：
以及后面的端口问题
4、后端的Server需要注意location中的uwsgi_pass 后面的端口号要和uwsgi.ini中配的相同，否则监听不到
5、后端跨域问题。如果遇到跨域需要自己网上找配置，我的没遇到，可能是因为我在django的settings中配置了跨域。
6、django-suit后台管理样式崩了，需要改，但是api可以正常访问，这个有空再说
7、我开始后台监听的是8008端口，vue前端监听的是80端口，这样前端显示好看。然而问题出现了，虽然后台api可以正常访问，vue的本地开发环境也能正常运行且文字、图片资源均显示正常，但是前端vue打包线上部署后，文字信息显示正常，图片信息缺失8008端口，导致显示不出来。为图方便我选择了前端监听8008端口，后端监听80，部署后显示正常。原因不太清楚///////有空再说吧。
8、不要问我为啥都前后端分离了还部署到一个服务器上？穷，而且只是测试，没必要
9、此文仅适合入门
关于django后台admin（suit）缺失的修改（参考：django中文网： https://www.django.cn/article/show-4.html ）
在环境中进入项目目录，需要收集css样式，在终端输入命令：
接下来你就回发现static文件中包含了css文件，此时再打开网站，样式显示正常
uWSGI 通过 xxx.ini 启动后会在相同目录下生成一个 xxx.pid 的文件，里面只有一行内容是 uWSGI 的主进程的进程号。
关于uwsgi,进入同届目录下
教训
获取不到环境，那就指定环境
另外：记得重启uwsgi，重启Nginx，实在不行就先把监听的端口kill掉再重启
暴力删端口：fuser -k 80/tcp
netstat -aptn命令行，查看所有开启的端口号
netstat -ntlp | grep 80 查看具体的端口是否使用
ps -ef | grep uwsgi 查看是否有uwsgi端口存在
‘伍’ 不用nginx可以部署前后端分离项目吗
不可以。不用nginx不可以可以部署前后端分离项目。根据查询相关信息可知：不用nginx无法部署前后端分离项目。前后端分离部署采用前端静态资源部署在服务器，然后需要nginx充当我们的前端静态文件代理服务器，然后后端使用jar包方式部署，还需要nginx的反向代理解决跨域问题，因为前后端分离项目，前后端运行在不同的端口上就需要解决跨域的问题，需要在nginx里进行配置代理转发。