ONE-sys 整合前後端腳手架 koa2 + pm2 + vue-cli3.0 + element

koalaFE發表於2019-01-14
後端Vue

專案地址 github.com/fanshyiis/O…

one-sys gogogo!

本腳手架主要致力於前端工程師的快速開發、一鍵部署等快捷開發框架，主要目的是想讓前端工程師在一個阿里雲伺服器上可以快速開發部署自己的專案。本著前端後端融合統一的邏輯進行一些輪子的整合、並加入了自己的一些腳手架工具，第一次做腳手架的開發，如有問題，請在issue上提出，如果有幫助到您的地方，請不吝賜個star~

#####技術棧選擇

  • 前端整合：vue-cli3.0、axios、element等
  • 命令列工具整合：commander、chalk、figlet、shelljs等
  • 後端整合：node、 koa2、koa-mysql-session、mysql等
  • 伺服器整合：nginx、pm2、node等

#####基本功能模組實現

  • 聚合分離 所謂聚合分離，首先是‘聚合’，聚合程式碼，聚合外掛，做到一個專案就可完成前端端程式碼的編寫，打包上線等功能的聚合。其後是‘分離’。前後端分離。雖然程式碼會在同一個專案工程中但是前後端互不干擾，分別上線，區別於常規的ejs等服務端渲染的模式，做到前端完全分離
  • 一鍵部署 基於本地的命令列工具，可以快速打包view端的靜態檔案並上傳到阿里雲伺服器，也可快速上傳server端的檔案到伺服器資料夾，配合pm2的監控功能進行程式碼的熱更新，無縫更新介面邏輯
  • 快速迭代 提供基本的使用案例，包括前端的view層的容器案例與元件案例，元件的api設定以及集合了axios的中介軟體邏輯，方便使用者快速搭建自己的專案，程式碼清晰，易於分析與修改，server端對mysql連線池進行簡單的封裝，完成連線後及時釋放，對table表格與函式進行分層，程式碼分層為路由層、控制器層、sql操作層

#####基本模組舉例 1.登入頁面

  • 登入 -正確反饋 錯誤反饋 登入成功後session的設定
  • 註冊 -重名檢測 正確反饋 錯誤反饋
  1. 主要模組功能
  • 模組增刪查改基本功能的實現
  1. 後臺koa2服務模組
  • 配合koa-mysql-session進行session的設定儲存
  • checkLogin中介軟體的實現
  • cors跨域白名單的設定
  • middlewer 中介軟體的設定
  • mysql連線池的封裝 等等。。。
  1. 服務端
  • nginx 的基本配置與前端端分離的配置
  • pm2 多例項構建配置檔案的配置檔案 pm2config.json

#####使用流程

  1. 本地除錯
  • 安裝mysql （過程請百度）
// 進入sql命令列
$ mysql -u root -p
// 建立名為nodesql的資料庫
$ create database nodesql
複製程式碼
  • 安裝pm2 (過程請百度)
  • 拉取專案程式碼
git clone https://github.com/fanshyiis/ONE-sys
cd ONE-sys
// 安裝外掛
cnpm i 或 npm i 或者 yarn add
// 安裝link
sudo npm link
//  然後就能使用命令列工具了
one start
// 或者不願意使用命令列的同學可以
yarn run serve
複製程式碼

#####主要程式碼解析

  • 程式碼邏輯
    image.png
  • server
    image.png
  • bin
one -h
複製程式碼

image.png
image.png
image.png

  • 啟動效果
啟動專案
yarn run v1.3.2
$ pm2 restart ./server/index.js && vue-cli-service serve
Use --update-env to update environment variables
[PM2] Applying action restartProcessId on app [./server/index.js](ids: 0,1)
[PM2] [index](0) ✓
[PM2] [one-sys](1) ✓
┌──────────┬────┬─────────┬─────────┬───────┬────────┬─────────┬────────┬─────┬───────────┬───────────┬──────────┐
│ App name │ id │ version │ mode    │ pid   │ status │ restart │ uptime │ cpu │ mem       │ user      │ watching │
├──────────┼────┼─────────┼─────────┼───────┼────────┼─────────┼────────┼─────┼───────────┼───────────┼──────────┤
│ index    │ 0  │ 0.1.0   │ fork    │ 77439 │ online │ 2640    │ 0s     │ 0%  │ 15.4 MB   │ koala_cpx │ disabled │
│ one-sys  │ 1  │ 0.1.0   │ cluster │ 77438 │ online │ 15      │ 0s     │ 0%  │ 20.2 MB   │ koala_cpx │ disabled │
└──────────┴────┴─────────┴─────────┴───────┴────────┴─────────┴────────┴─────┴───────────┴───────────┴──────────┘
 Use `pm2 show <id|name>` to get more details about an app
 INFO  Starting development server...
 98% after emitting CopyPlugin DONE  Compiled successfully in 10294ms16:31:55


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.7.69:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.
複製程式碼

頁面展示

image.png
image.png

  1. 線上除錯
  • 阿里雲伺服器檔案存放目錄
[root@iZm5e6naugml8q0362d8rfZ ~]# cd /home/
[root@iZm5e6naugml8q0362d8rfZ home]# ls
dist  server  test
[root@iZm5e6naugml8q0362d8rfZ home]#
複製程式碼
  • 阿里雲nginx配置
       location ^~ /api {
          proxy_pass http://127.0.0.1:3000;
        }

        location ^~ /redAlert/ {
           root /home/dist/;
           try_files $uri $uri/ /index.html =404;
        }

        location ^~ /file/ {
            alias /home/server/controller/public/;
        }

        location / {
            root   /home/dist/;
            index  index.html index.htm;
        }
複製程式碼

其他方面如同本地配置

有問題可以加群聯絡

歡迎交流

最後請star一個吧~~~

相關文章