『壹』 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里進行配置代理轉發。