本項目是前端蠢萌，想要了解下前端+后端分離的全棧項目的基本運作而整的。
本項目的技術(shù)架構(gòu)大概是koa2+vue2
1 項目文件結(jié)構(gòu)
首先，采用vue_cli腳手架創(chuàng)建了一個vue項目；本項目的基本目錄結(jié)構(gòu)就如一般的vue_cli腳手架創(chuàng)建的項目那樣，不一樣的地方主要在于新建了一個目錄server，這個文件夾主要用來存放koa后端的一些文件，它的文件目錄大概如下：
對上訴server目錄下的文件結(jié)構(gòu)說明如下：
---DBconn：new一個Sequelize，來連接數(shù)據(jù)庫
---DBmodels：定義數(shù)據(jù)表模型、數(shù)據(jù)表連接關(guān)系，并利用sequelize.sync來同步數(shù)據(jù)庫
---service：與數(shù)據(jù)庫表相關(guān)的操作，如增刪查改等
---controllers：api接口的定義，通過這些接口去調(diào)用操作數(shù)據(jù)庫表的方法（定義在目錄`service`中的），以便在前端中去調(diào)用這些接口
---middleware：定義一些koa會使用到的一些中間件；如importantcontroller.js用來把`controllers`中定義的接口引入
---app.js：后端服務(wù)的入口文件；如在package.json中定義的`start`命名，就是通過`nodemon server/app.js`在啟動后端服務(wù)
2 項目啟動
參見項目中的package.json文件（前端模塊、后端模塊分別維護(hù)了各自的package.json文件）
（1）啟動后端服務(wù)：npm run start
（2）啟動前端服務(wù)：npm run serve
ps：本地啟動的后端服務(wù)監(jiān)聽的是端口3000，而前端是8080端口；所以在vue.config.js中增加了如下代理，就能進(jìn)行本地接口調(diào)用開發(fā)了：
3 項目中的jwt登錄驗證
（1）做token權(quán)限控制，排除不需要進(jìn)行token校驗的path，比如login；其他的接口則需要進(jìn)行token校驗的，即需要通過token校驗中間件./middleware/tokenVerify
（2）login不需要經(jīng)過token驗證，登錄成功后，會簽發(fā)token，以便其他接口攜帶去進(jìn)行token校驗
（3）tokenVerify里面的token校驗邏輯
4 項目部署
4.1 服務(wù)器中安裝Node
（1）下載Node安裝包，放到服務(wù)器/usr/local/node；在/usr/local新建一個node目錄mkdir node
（2）解壓縮node安裝包，tar -vxf node-v14.17.0-linux-x64.tar.xz
（3）配置環(huán)境變量，ln -s /usr/local/node/node-v14.17.0-linux-x64/bin/node /usr/local/bin/node、ln -s /usr/local/node/node-v14.17.0-linux-x64/bin/npm /usr/local/bin/npm
4.2 服務(wù)器中安裝mysql
（1）下載mysql安裝包 wget http://repo.mysql.com/mysql80-community-release-el7-1.noarch.rpm
（2）安裝軟件包到y(tǒng)um庫rpm -ivh mysql80-community-release-el7-1.noarch.rpm
（3）安裝軟件 yum install mysql-server
使用mysql
service mysql start :啟動mysql服務(wù)
service mysql status：查看服務(wù)狀態(tài)
service mysql stop：停止服務(wù)
service mysql restart：重啟服務(wù)
service mysql status：查看服務(wù)狀態(tài)
mysqladmin -u root password "new_password"：為root用戶更改密碼
mysql -u root -p：用密碼登錄root用戶
4.3 在云服務(wù)器部署服務(wù)的記錄
由于本人從未接觸過部署，所以整個部署過程是通過一系列的嘗試去發(fā)現(xiàn)“新鮮”事物的
（1）將項目源代碼，整個拷貝到服務(wù)器中，像在本地開發(fā)那樣的啟動，是可行的
ps :這次嘗試其實不算是部署的內(nèi)容，但卻是本蠢萌新人學(xué)步之路上，對于神秘的服務(wù)器，相對于本機(jī)電腦的一次類比認(rèn)知；所以寫在這里了
（2）使用koa-static管理靜態(tài)資源
首先，需要將vue.config.js里面的：publicPath的值改為./；
其次，在Koa的app.js主文件里面加上koa-static這個中間件使用
constpath=require('path')
constkoa-static=require('koa-static');
app.use(koa-static(path.resolve('dist')));
最后，使用koa-server-http-proxy代理?！疽驗閎uild打包后在vue.config.js里面的代理就不起作用了，需在服務(wù)器配置下代理】
// 使用koa-server-http-proxy代理
constkoaServerHttpProxy=require("koa-server-http-proxy");
app.use(koaServerHttpProxy("/api",{
????target:"http://localhost:3000",
????pathRewrite:{'/api':''},
????changeOrigin:true
}));
（3）使用nginx反向代理
本項目的前后端的包管理是分開的，所以，可以直接把后端模塊的目錄server搞到服務(wù)器去部署；再把前端打包好的dist包放到nginx中去管理就可以了。
服務(wù)器安裝nginx
使用nginx代理轉(zhuǎn)發(fā)請求
（1）將項目npm run build后的dist里的文件，放到/usr/local/nginx/html中；【要注意vue.config.js中的publicPath的值，將其設(shè)置為./】
（2）在nginx.conf配置文件中，添加代理配置：
location/api/{
proxy_passhttp://1.117.28.252:3000/;? #因為這個最后有斜杠，所以轉(zhuǎn)發(fā)后的地址不會把/api帶進(jìn)去了
}
（3）由于前端用的history模式，刷新的時候會404，所以在nginx.conf中可以改下配置：
error_page404/index.html;
（4）由于項目中使用koa-jwt做了鑒權(quán)，所以需要在nginx.conf中http塊兒中增加如下配置：
add_headerAccess-Control-Allow-HeadersAuthorization;
4.4 主要參考
https://www.icode9.com/content-1-539544.html
https://molunerfinn.com/Vue+Koa/#%E9%A1%B9%E7%9B%AE%E9%83%A8%E7%BD%B2
【B站學(xué)習(xí)的服務(wù)器部署知識】https://www.bilibili.com/video/BV15V411U7Vd?p=2&spm_id_from=pageDriver? 筆記如下：
1、申請一個免費的服務(wù)器
? ? ? 每個云基本都有免費一個月的服務(wù)器試用，可以去試試；搞個centos的
2、部署一個node koa項目到云服務(wù)器? ? => 在云服務(wù)器上進(jìn)行以下操作
（1）安裝node
自己電腦上去node官網(wǎng)，選擇linux系統(tǒng)的安裝包下載
把下載的node安裝包傳到云服務(wù)器上
指定目錄下解壓node安裝包
將node、npm命令b綁定到環(huán)境變量
檢驗是否安裝成功：node -v， npm -v
（2）本地寫一個Node koa項目
將Node koa項目拷貝到云服務(wù)器去
npm install
node app.js就可以去訪問這些接口了（但是要注意去云服務(wù)器把監(jiān)聽的相應(yīng)端口放開）
（3）使用pm2
? 如果不使用pm2的話，如果服務(wù)器關(guān)了就訪問不了了；pm2就來解決這個問題的
云服務(wù)器中去node koa項目目錄下，去全局安裝pm2
綁定pm2的環(huán)境變量
運行pm2 start app.js
pm2 list、 pm2 delete {id}就可以把相應(yīng)id的服務(wù)關(guān)掉
3、部署一個連接數(shù)據(jù)庫的node項目
（1）服務(wù)器安裝數(shù)據(jù)庫，開啟數(shù)據(jù)庫服務(wù)（要一直保持后臺啟動）
（2）后端項目打zip包，放到服務(wù)器的server目錄下去啟動
4、服務(wù)器中安裝nginx
將打包好的前端包放到nginx下，就可以通過ip去訪問它
5、部署前端項目
（1）build打包下項目
（2）把前端打好的包放到nginx中的/html目錄下
